@buoy-gg/highlight-updates 3.0.1 → 3.0.2

package/lib/module/highlight-updates/components/HighlightUpdatesModal.js

@@ -1 +1,558 @@
-"use strict";import React,{useState,useEffect,useRef,useCallback}from"react";import{View,Text,StyleSheet}from"react-native";import{Power,JsModal,devToolsStorageKeys,persistentStorage,buoyColors,TickProvider}from"@buoy-gg/shared-ui";import{useIsPro}from"@buoy-gg/license";import HighlightUpdatesController from"../utils/HighlightUpdatesController";import{RenderTracker}from"../utils/RenderTracker";import{RenderDetailView}from"./RenderDetailView";import{EventStepperFooter}from"@buoy-gg/shared-ui";import{HighlightFilterView}from"./HighlightFilterView";import{IsolatedRenderList}from"./IsolatedRenderList";import{MainListHeader,FilterViewHeader,DetailViewHeader,CopySettingsViewHeader}from"./ModalHeaderContent";import{RenderHistoryViewer,RenderHistoryFooter}from"./RenderHistoryViewer";import{RendersCopySettingsView}from"./RendersCopySettingsView";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const DisabledBanner=React.memo(function(){return _jsxs(View,{style:styles.disabledBanner,children:[_jsx(Power,{size:14,color:buoyColors.warning}),_jsx(Text,{style:styles.disabledText,children:"Render tracking is disabled"})]})});export function HighlightUpdatesModal({visible:e,onClose:t,onBack:r,onMinimize:n,enableSharedModalDimensions:s=!1,initialNativeTag:i,onInitialNativeTagHandled:l}){const a=useIsPro(),[o,c]=useState(!1),[d,u]=useState(()=>HighlightUpdatesController.getFrozen()),[g,h]=useState(()=>RenderTracker.getStats().totalComponents>0),[p,C]=useState(null),[f,m]=useState(0),[S,T]=useState(!1),[y,x]=useState(!1),[b,k]=useState([]),[R,w]=useState("filters"),[v,H]=useState("details"),[I,F]=useState(0),[P,V]=useState(""),[D,_]=useState(!1),j=useRef(null),U=useRef([]),E=useRef(RenderTracker.getFilters()),[N,z]=useState(()=>{const e=RenderTracker.getFilters();return e.includePatterns.length+e.excludePatterns.length}),[A,M]=useState(()=>RenderTracker.getFilters()),[B,K]=useState(()=>RenderTracker.getSettings()),L=useRef(!1),J=useRef(!1),O=useRef(!1);useEffect(()=>{e&&!L.current&&(L.current=!0)},[e]),useEffect(()=>{e&&!J.current&&(async()=>{try{const e=await persistentStorage.getItem(devToolsStorageKeys.highlightUpdates.filters());if(e){const t=JSON.parse(e),r={includeTestID:new Set(t.includeTestID||[]),includeNativeID:new Set(t.includeNativeID||[]),includeViewType:new Set(t.includeViewType||[]),includeComponent:new Set(t.includeComponent||[]),excludeTestID:new Set(t.excludeTestID||[]),excludeNativeID:new Set(t.excludeNativeID||[]),excludeViewType:new Set(t.excludeViewType||[]),excludeComponent:new Set(t.excludeComponent||[]),includePatterns:t.includePatterns||[],excludePatterns:t.excludePatterns||[]};RenderTracker.setFilters(r);const n=RenderTracker.getFilters();E.current=n,M(n),z(n.includePatterns.length+n.excludePatterns.length)}J.current=!0}catch(e){}})()},[e]),useEffect(()=>{J.current&&(async()=>{try{const e={includeTestID:Array.from(A.includeTestID),includeNativeID:Array.from(A.includeNativeID),includeViewType:Array.from(A.includeViewType),includeComponent:Array.from(A.includeComponent),excludeTestID:Array.from(A.excludeTestID),excludeNativeID:Array.from(A.excludeNativeID),excludeViewType:Array.from(A.excludeViewType),excludeComponent:Array.from(A.excludeComponent),includePatterns:A.includePatterns,excludePatterns:A.excludePatterns};await persistentStorage.setItem(devToolsStorageKeys.highlightUpdates.filters(),JSON.stringify(e))}catch(e){}})()},[A]),useEffect(()=>{e&&!O.current&&(async()=>{try{const e=await persistentStorage.getItem(devToolsStorageKeys.highlightUpdates.settings());if(e){const t=JSON.parse(e),{performanceLogging:r,excludeDevTools:n,...s}=t;RenderTracker.setSettings(s),K(RenderTracker.getSettings())}O.current=!0}catch(e){O.current=!0}})()},[e]),useEffect(()=>{O.current&&(async()=>{try{const{performanceLogging:e,excludeDevTools:t,...r}=B;await persistentStorage.setItem(devToolsStorageKeys.highlightUpdates.settings(),JSON.stringify(r))}catch(e){}})()},[B]),useEffect(()=>{const e=RenderTracker.subscribeToState(e=>{c(e.isTracking)});return()=>{e()}},[]),useEffect(()=>{const e=HighlightUpdatesController.subscribeToFreeze(e=>{u(e)});return()=>{e()}},[]),useEffect(()=>{D&&requestAnimationFrame(()=>{j.current?.focus()})},[D]),useEffect(()=>{e||HighlightUpdatesController.setSpotlight(null)},[e]),useEffect(()=>{if(e&&null!=i){const e=RenderTracker.getRender(String(i));e&&(C(e),m(0),T(!1),HighlightUpdatesController.setSpotlight(e.nativeTag)),l?.()}},[e,i,l]);const q=useCallback(()=>{HighlightUpdatesController.isInitialized()||HighlightUpdatesController.initialize(),HighlightUpdatesController.toggle()},[]),G=useCallback(()=>{HighlightUpdatesController.toggleFreeze()},[]),W=useCallback(()=>{HighlightUpdatesController.clearRenderCounts(),h(!1)},[]),Q=useCallback(()=>{k(RenderTracker.getFilteredRenders(P)),x(!0)},[P]),X=useCallback(()=>{x(!1)},[]),Y=useCallback(e=>{V(e)},[]),Z=useCallback((e,t,r)=>{C(e),m(t),H("details"),F(0),U.current=r,HighlightUpdatesController.setSpotlight(e.nativeTag)},[]),$=useCallback(e=>{U.current=e},[]),ee=useCallback(()=>{C(null),m(0),HighlightUpdatesController.setSpotlight(null)},[]),te=useCallback(()=>{const e=U.current;if(f>0){const t=f-1,r=e[t];r&&(C(r),m(t),HighlightUpdatesController.setSpotlight(r.nativeTag))}},[f]),re=useCallback(()=>{const e=U.current;if(f<e.length-1){const t=f+1,r=e[t];r&&(C(r),m(t),HighlightUpdatesController.setSpotlight(r.nativeTag))}},[f]),ne=useCallback(()=>{T(!1)},[]),se=useCallback(()=>{T(!0)},[]),ie=useCallback(()=>{_(!0)},[]),le=useCallback(()=>{_(!1)},[]),ae=useCallback(e=>{RenderTracker.setFilters(e);const t=RenderTracker.getFilters();E.current=t,M(t),z(t.includePatterns.length+t.excludePatterns.length)},[]),oe=useCallback((e,t)=>{const r=RenderTracker.getFilters(),n={};"include"===t?r.includePatterns.some(t=>t.type===e.type&&t.value===e.value)||(n.includePatterns=[...r.includePatterns,e]):r.excludePatterns.some(t=>t.type===e.type&&t.value===e.value)||(n.excludePatterns=[...r.excludePatterns,e]),Object.keys(n).length>0&&(ae(n),C(null),m(0),HighlightUpdatesController.setSpotlight(null))},[ae]),ce=useCallback(e=>{RenderTracker.setSettings(e),K(RenderTracker.getSettings())},[]),de=useCallback(e=>{h(e.totalComponents>0)},[]),ue=useCallback(()=>y?_jsx(CopySettingsViewHeader,{onBack:X}):S?_jsx(FilterViewHeader,{onBack:ne,activeTab:R,onTabChange:w,activeFilterCount:N}):p?_jsx(DetailViewHeader,{onBack:ee,activeTab:v,onTabChange:H,hasHistory:(p.renderHistory?.length??0)>0}):_jsx(MainListHeader,{onBack:r,isSearchActive:D,searchText:P,onSearchChange:Y,onSearchToggle:ie,onSearchClose:le,onFilterToggle:se,onToggleTracking:q,onToggleFreeze:G,onClear:W,onOpenCopySettings:Q,isTracking:o,isFrozen:d,activeFilterCount:N,hasRenders:g,searchInputRef:j}),[y,S,p,r,D,P,o,d,N,g,R,v,ne,ee,X,Y,ie,le,se,q,G,W,Q]),ge=s?devToolsStorageKeys.modal.root():devToolsStorageKeys.highlightUpdates.modal();if(!e)return null;const he=U.current.length,pe=p?"details"===v?_jsx(EventStepperFooter,{currentIndex:f,totalItems:he,onPrevious:te,onNext:re,itemLabel:"Component",subtitle:p.componentName||p.displayName||p.viewType}):_jsx(RenderHistoryFooter,{render:p,selectedEventIndex:I,onEventIndexChange:F,isPro:a}):null;return _jsx(TickProvider,{children:_jsx(JsModal,{visible:e,onClose:t,onMinimize:n,persistenceKey:ge,header:{showToggleButton:!0,customContent:ue()},enablePersistence:!0,initialMode:"bottomSheet",enableGlitchEffects:!0,styles:{},footer:pe,footerHeight:p&&("details"===v||(p.renderHistory?.length??0)>1)?68:0,children:_jsx(View,{nativeID:"__rn_buoy__highlight-modal",style:styles.container,children:y?_jsx(RendersCopySettingsView,{renders:b}):p?"details"===v?_jsx(RenderDetailView,{render:p,disableInternalFooter:!0,onAddFilter:oe,isPro:a}):_jsx(RenderHistoryViewer,{render:p,disableInternalFooter:!0,selectedEventIndex:I,onEventIndexChange:F,isPro:a}):S?_jsx(HighlightFilterView,{filters:A,onFilterChange:ae,settings:B,onSettingsChange:ce,availableProps:RenderTracker.getAvailableProps(),activeTab:R}):_jsxs(_Fragment,{children:[!o&&_jsx(DisabledBanner,{}),_jsx(IsolatedRenderList,{searchText:P,filters:A,onSelectRender:Z,onStatsChange:de,onRendersChange:$,isTracking:o,isPro:a})]})})})})}const styles=StyleSheet.create({container:{flex:1,backgroundColor:buoyColors.base},disabledBanner:{flexDirection:"row",alignItems:"center",gap:8,padding:10,marginHorizontal:12,marginTop:8,backgroundColor:buoyColors.warning+"15",borderRadius:8,borderWidth:1,borderColor:buoyColors.warning+"20"},disabledText:{color:buoyColors.warning,fontSize:11,flex:1}});export default HighlightUpdatesModal;
+"use strict";
+
+/**
+ * HighlightUpdatesModal
+ *
+ * Main modal interface for the Highlight Updates dev tool.
+ * Shows a list of tracked component renders with controls for
+ * start/stop, clear, and filtering.
+ *
+ * PERFORMANCE OPTIMIZED:
+ * - Uses isolated components to prevent parent re-renders
+ * - Stats display is isolated (StatsDisplay)
+ * - Render list is isolated (IsolatedRenderList)
+ * - Header components are memoized
+ * - Uses refs for values not displayed in UI
+ */
+
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { Power, JsModal, devToolsStorageKeys, persistentStorage, buoyColors, TickProvider } from "@buoy-gg/shared-ui";
+import { useIsPro } from "@buoy-gg/license";
+import HighlightUpdatesController from "../utils/HighlightUpdatesController";
+import { RenderTracker } from "../utils/RenderTracker";
+import { RenderDetailView } from "./RenderDetailView";
+import { EventStepperFooter } from "@buoy-gg/shared-ui";
+import { HighlightFilterView } from "./HighlightFilterView";
+import { IsolatedRenderList } from "./IsolatedRenderList";
+import { MainListHeader, FilterViewHeader, DetailViewHeader, CopySettingsViewHeader } from "./ModalHeaderContent";
+import { RenderHistoryViewer, RenderHistoryFooter } from "./RenderHistoryViewer";
+import { RendersCopySettingsView } from "./RendersCopySettingsView";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Disabled banner - memoized since props rarely change
+const DisabledBanner = /*#__PURE__*/React.memo(function DisabledBanner() {
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.disabledBanner,
+    children: [/*#__PURE__*/_jsx(Power, {
+      size: 14,
+      color: buoyColors.warning
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.disabledText,
+      children: "Render tracking is disabled"
+    })]
+  });
+});
+export function HighlightUpdatesModal({
+  visible,
+  onClose,
+  onBack,
+  onMinimize,
+  enableSharedModalDimensions = false,
+  initialNativeTag,
+  onInitialNativeTagHandled
+}) {
+  const isPro = useIsPro();
+
+  // ============================================================================
+  // TRACKING STATE - subscribed via isolated component
+  // ============================================================================
+  const [isTracking, setIsTracking] = useState(false);
+  const [isFrozen, setIsFrozen] = useState(() => HighlightUpdatesController.getFrozen());
+
+  // Track if there are renders for header clear button state
+  const [hasRenders, setHasRenders] = useState(() => RenderTracker.getStats().totalComponents > 0);
+
+  // ============================================================================
+  // UI STATE - kept in parent for view switching
+  // ============================================================================
+  const [selectedRender, setSelectedRender] = useState(null);
+  const [selectedRenderIndex, setSelectedRenderIndex] = useState(0);
+  const [showFilterView, setShowFilterView] = useState(false);
+  const [showCopySettingsView, setShowCopySettingsView] = useState(false);
+  const [copyRendersSnapshot, setCopyRendersSnapshot] = useState([]);
+  const [filterViewActiveTab, setFilterViewActiveTab] = useState("filters");
+  const [detailViewActiveTab, setDetailViewActiveTab] = useState("details");
+  const [historyEventIndex, setHistoryEventIndex] = useState(0);
+  const [searchText, setSearchText] = useState("");
+  const [isSearchActive, setIsSearchActive] = useState(false);
+  const searchInputRef = useRef(null);
+
+  // Track the renders list for navigation
+  const rendersListRef = useRef([]);
+
+  // ============================================================================
+  // FILTER STATE - use ref for filter config, state for display count only
+  // ============================================================================
+  const filtersRef = useRef(RenderTracker.getFilters());
+  const [activeFilterCount, setActiveFilterCount] = useState(() => {
+    const filters = RenderTracker.getFilters();
+    return filters.includePatterns.length + filters.excludePatterns.length;
+  });
+
+  // Expose filters via state for HighlightFilterView (it needs to display them)
+  const [filters, setFilters] = useState(() => RenderTracker.getFilters());
+
+  // ============================================================================
+  // SETTINGS STATE
+  // ============================================================================
+  const [settings, setSettings] = useState(() => RenderTracker.getSettings());
+
+  // ============================================================================
+  // PERSISTENCE REFS - prevent saving on initial load
+  // ============================================================================
+  const hasLoadedTrackingState = useRef(false);
+  const hasLoadedFilters = useRef(false);
+  const hasLoadedSettings = useRef(false);
+
+  // ============================================================================
+  // LOAD PERSISTED STATE
+  // ============================================================================
+
+  // Tracking state is intentionally NOT persisted.
+  // Always starts OFF to prevent infinite re-render loops on load where
+  // the overlay highlights its own components before exclusion filters can take effect.
+  // The user must explicitly enable tracking each session.
+  useEffect(() => {
+    if (!visible || hasLoadedTrackingState.current) return;
+    hasLoadedTrackingState.current = true;
+  }, [visible]);
+
+  // Load persisted filters on mount
+  useEffect(() => {
+    if (!visible || hasLoadedFilters.current) return;
+    const loadFilters = async () => {
+      try {
+        const storedFilters = await persistentStorage.getItem(devToolsStorageKeys.highlightUpdates.filters());
+        if (storedFilters) {
+          const parsedFilters = JSON.parse(storedFilters);
+          const restoredFilters = {
+            includeTestID: new Set(parsedFilters.includeTestID || []),
+            includeNativeID: new Set(parsedFilters.includeNativeID || []),
+            includeViewType: new Set(parsedFilters.includeViewType || []),
+            includeComponent: new Set(parsedFilters.includeComponent || []),
+            excludeTestID: new Set(parsedFilters.excludeTestID || []),
+            excludeNativeID: new Set(parsedFilters.excludeNativeID || []),
+            excludeViewType: new Set(parsedFilters.excludeViewType || []),
+            excludeComponent: new Set(parsedFilters.excludeComponent || []),
+            includePatterns: parsedFilters.includePatterns || [],
+            excludePatterns: parsedFilters.excludePatterns || []
+          };
+          RenderTracker.setFilters(restoredFilters);
+          const newFilters = RenderTracker.getFilters();
+          filtersRef.current = newFilters;
+          setFilters(newFilters);
+          setActiveFilterCount(newFilters.includePatterns.length + newFilters.excludePatterns.length);
+        }
+        hasLoadedFilters.current = true;
+      } catch (error) {
+        // Failed to load filters
+      }
+    };
+    loadFilters();
+  }, [visible]);
+
+  // Save filters when they change
+  useEffect(() => {
+    if (!hasLoadedFilters.current) return;
+    const saveFilters = async () => {
+      try {
+        const filtersToSave = {
+          includeTestID: Array.from(filters.includeTestID),
+          includeNativeID: Array.from(filters.includeNativeID),
+          includeViewType: Array.from(filters.includeViewType),
+          includeComponent: Array.from(filters.includeComponent),
+          excludeTestID: Array.from(filters.excludeTestID),
+          excludeNativeID: Array.from(filters.excludeNativeID),
+          excludeViewType: Array.from(filters.excludeViewType),
+          excludeComponent: Array.from(filters.excludeComponent),
+          includePatterns: filters.includePatterns,
+          excludePatterns: filters.excludePatterns
+        };
+        await persistentStorage.setItem(devToolsStorageKeys.highlightUpdates.filters(), JSON.stringify(filtersToSave));
+      } catch (error) {
+        // Failed to save filters
+      }
+    };
+    saveFilters();
+  }, [filters]);
+
+  // Load persisted settings on mount
+  useEffect(() => {
+    if (!visible || hasLoadedSettings.current) return;
+    const loadSettings = async () => {
+      try {
+        const storedSettings = await persistentStorage.getItem(devToolsStorageKeys.highlightUpdates.settings());
+        if (storedSettings) {
+          const parsedSettings = JSON.parse(storedSettings);
+          // Never restore excludeDevTools or performanceLogging from persistence -
+          // excludeDevTools must always default to true to prevent infinite re-render loops
+          const {
+            performanceLogging: _ignored,
+            excludeDevTools: _alwaysTrue,
+            ...settingsToRestore
+          } = parsedSettings;
+          RenderTracker.setSettings(settingsToRestore);
+          setSettings(RenderTracker.getSettings());
+        }
+        hasLoadedSettings.current = true;
+      } catch (error) {
+        hasLoadedSettings.current = true;
+      }
+    };
+    loadSettings();
+  }, [visible]);
+
+  // Save settings when they change
+  useEffect(() => {
+    if (!hasLoadedSettings.current) return;
+    const saveSettings = async () => {
+      try {
+        // Never persist excludeDevTools - it must always default to true on startup
+        const {
+          performanceLogging: _ignored,
+          excludeDevTools: _neverPersist,
+          ...settingsToSave
+        } = settings;
+        await persistentStorage.setItem(devToolsStorageKeys.highlightUpdates.settings(), JSON.stringify(settingsToSave));
+      } catch (error) {
+        // Failed to save settings
+      }
+    };
+    saveSettings();
+  }, [settings]);
+
+  // ============================================================================
+  // SUBSCRIPTIONS - only for tracking state, not renders
+  // ============================================================================
+
+  // Subscribe to tracking state changes only
+  useEffect(() => {
+    const unsubscribeState = RenderTracker.subscribeToState(state => {
+      setIsTracking(state.isTracking);
+    });
+    return () => {
+      unsubscribeState();
+    };
+  }, []);
+
+  // Subscribe to freeze state changes
+  useEffect(() => {
+    const unsubscribeFreeze = HighlightUpdatesController.subscribeToFreeze(frozen => {
+      setIsFrozen(frozen);
+    });
+    return () => {
+      unsubscribeFreeze();
+    };
+  }, []);
+
+  // Focus search input when activated
+  useEffect(() => {
+    if (isSearchActive) {
+      requestAnimationFrame(() => {
+        searchInputRef.current?.focus();
+      });
+    }
+  }, [isSearchActive]);
+
+  // Clear spotlight when modal is closed
+  useEffect(() => {
+    if (!visible) {
+      HighlightUpdatesController.setSpotlight(null);
+    }
+  }, [visible]);
+
+  // ============================================================================
+  // DEEP LINK NAVIGATION - "Click Overlay Badge → Jump to Detail"
+  // ============================================================================
+
+  // Handle initial navigation when a badge is tapped
+  useEffect(() => {
+    if (visible && initialNativeTag != null) {
+      // Look up the render by nativeTag
+      const render = RenderTracker.getRender(String(initialNativeTag));
+      if (render) {
+        // Navigate to detail view for this component
+        setSelectedRender(render);
+        setSelectedRenderIndex(0);
+        setShowFilterView(false);
+        // Set spotlight to show which component is being viewed
+        HighlightUpdatesController.setSpotlight(render.nativeTag);
+      }
+      // Notify parent that we've handled the navigation
+      onInitialNativeTagHandled?.();
+    }
+  }, [visible, initialNativeTag, onInitialNativeTagHandled]);
+
+  // ============================================================================
+  // CALLBACKS - stable references for child components
+  // ============================================================================
+
+  const handleToggleTracking = useCallback(() => {
+    if (!HighlightUpdatesController.isInitialized()) {
+      HighlightUpdatesController.initialize();
+    }
+    HighlightUpdatesController.toggle();
+  }, []);
+  const handleToggleFreeze = useCallback(() => {
+    HighlightUpdatesController.toggleFreeze();
+  }, []);
+  const handleClear = useCallback(() => {
+    HighlightUpdatesController.clearRenderCounts();
+    setHasRenders(false);
+  }, []);
+  const handleOpenCopySettings = useCallback(() => {
+    // Snapshot the same filtered list the user sees in the main list view
+    // (respects include/exclude patterns and the search box).
+    setCopyRendersSnapshot(RenderTracker.getFilteredRenders(searchText));
+    setShowCopySettingsView(true);
+  }, [searchText]);
+  const handleCloseCopySettings = useCallback(() => {
+    setShowCopySettingsView(false);
+  }, []);
+  const handleSearch = useCallback(text => {
+    setSearchText(text);
+  }, []);
+  const handleRenderPress = useCallback((render, index, allRenders) => {
+    setSelectedRender(render);
+    setSelectedRenderIndex(index);
+    setDetailViewActiveTab("details"); // Reset to details tab when selecting a new render
+    setHistoryEventIndex(0); // Reset history event index when selecting a new render
+    rendersListRef.current = allRenders;
+    // Set spotlight to show which component is being viewed
+    HighlightUpdatesController.setSpotlight(render.nativeTag);
+  }, []);
+  const handleRendersChange = useCallback(renders => {
+    rendersListRef.current = renders;
+  }, []);
+  const handleBackFromDetail = useCallback(() => {
+    setSelectedRender(null);
+    setSelectedRenderIndex(0);
+    // Clear the spotlight
+    HighlightUpdatesController.setSpotlight(null);
+  }, []);
+  const handlePreviousRender = useCallback(() => {
+    const renders = rendersListRef.current;
+    if (selectedRenderIndex > 0) {
+      const newIndex = selectedRenderIndex - 1;
+      const newRender = renders[newIndex];
+      if (newRender) {
+        setSelectedRender(newRender);
+        setSelectedRenderIndex(newIndex);
+        HighlightUpdatesController.setSpotlight(newRender.nativeTag);
+      }
+    }
+  }, [selectedRenderIndex]);
+  const handleNextRender = useCallback(() => {
+    const renders = rendersListRef.current;
+    if (selectedRenderIndex < renders.length - 1) {
+      const newIndex = selectedRenderIndex + 1;
+      const newRender = renders[newIndex];
+      if (newRender) {
+        setSelectedRender(newRender);
+        setSelectedRenderIndex(newIndex);
+        HighlightUpdatesController.setSpotlight(newRender.nativeTag);
+      }
+    }
+  }, [selectedRenderIndex]);
+  const handleBackFromFilter = useCallback(() => {
+    setShowFilterView(false);
+  }, []);
+  const handleFilterToggle = useCallback(() => {
+    setShowFilterView(true);
+  }, []);
+  const handleSearchToggle = useCallback(() => {
+    setIsSearchActive(true);
+  }, []);
+  const handleSearchClose = useCallback(() => {
+    setIsSearchActive(false);
+  }, []);
+  const handleFilterChange = useCallback(newFilters => {
+    RenderTracker.setFilters(newFilters);
+    const updatedFilters = RenderTracker.getFilters();
+    filtersRef.current = updatedFilters;
+    setFilters(updatedFilters);
+    setActiveFilterCount(updatedFilters.includePatterns.length + updatedFilters.excludePatterns.length);
+  }, []);
+
+  // Handler for adding a filter from the detail view (quick actions)
+  const handleAddFilter = useCallback((pattern, mode) => {
+    const currentFilters = RenderTracker.getFilters();
+    const newFilters = {};
+    if (mode === "include") {
+      // Check if pattern already exists
+      const exists = currentFilters.includePatterns.some(p => p.type === pattern.type && p.value === pattern.value);
+      if (!exists) {
+        newFilters.includePatterns = [...currentFilters.includePatterns, pattern];
+      }
+    } else {
+      // Check if pattern already exists
+      const exists = currentFilters.excludePatterns.some(p => p.type === pattern.type && p.value === pattern.value);
+      if (!exists) {
+        newFilters.excludePatterns = [...currentFilters.excludePatterns, pattern];
+      }
+    }
+    if (Object.keys(newFilters).length > 0) {
+      handleFilterChange(newFilters);
+      // Go back to the list view after adding filter
+      setSelectedRender(null);
+      setSelectedRenderIndex(0);
+      // Clear the spotlight
+      HighlightUpdatesController.setSpotlight(null);
+    }
+  }, [handleFilterChange]);
+  const handleSettingsChange = useCallback(newSettings => {
+    RenderTracker.setSettings(newSettings);
+    setSettings(RenderTracker.getSettings());
+  }, []);
+
+  // Callback for IsolatedRenderList to update hasRenders (for header clear button)
+  const handleStatsChange = useCallback(stats => {
+    setHasRenders(stats.totalComponents > 0);
+  }, []);
+
+  // ============================================================================
+  // HEADER RENDERING - using memoized components
+  // ============================================================================
+
+  const renderHeaderContent = useCallback(() => {
+    if (showCopySettingsView) {
+      return /*#__PURE__*/_jsx(CopySettingsViewHeader, {
+        onBack: handleCloseCopySettings
+      });
+    }
+    if (showFilterView) {
+      return /*#__PURE__*/_jsx(FilterViewHeader, {
+        onBack: handleBackFromFilter,
+        activeTab: filterViewActiveTab,
+        onTabChange: setFilterViewActiveTab,
+        activeFilterCount: activeFilterCount
+      });
+    }
+    if (selectedRender) {
+      return /*#__PURE__*/_jsx(DetailViewHeader, {
+        onBack: handleBackFromDetail,
+        activeTab: detailViewActiveTab,
+        onTabChange: setDetailViewActiveTab,
+        hasHistory: (selectedRender.renderHistory?.length ?? 0) > 0
+      });
+    }
+    return /*#__PURE__*/_jsx(MainListHeader, {
+      onBack: onBack,
+      isSearchActive: isSearchActive,
+      searchText: searchText,
+      onSearchChange: handleSearch,
+      onSearchToggle: handleSearchToggle,
+      onSearchClose: handleSearchClose,
+      onFilterToggle: handleFilterToggle,
+      onToggleTracking: handleToggleTracking,
+      onToggleFreeze: handleToggleFreeze,
+      onClear: handleClear,
+      onOpenCopySettings: handleOpenCopySettings,
+      isTracking: isTracking,
+      isFrozen: isFrozen,
+      activeFilterCount: activeFilterCount,
+      hasRenders: hasRenders,
+      searchInputRef: searchInputRef
+    });
+  }, [showCopySettingsView, showFilterView, selectedRender, onBack, isSearchActive, searchText, isTracking, isFrozen, activeFilterCount, hasRenders, filterViewActiveTab, detailViewActiveTab, handleBackFromFilter, handleBackFromDetail, handleCloseCopySettings, handleSearch, handleSearchToggle, handleSearchClose, handleFilterToggle, handleToggleTracking, handleToggleFreeze, handleClear, handleOpenCopySettings]);
+
+  // ============================================================================
+  // RENDER
+  // ============================================================================
+
+  const persistenceKey = enableSharedModalDimensions ? devToolsStorageKeys.modal.root() : devToolsStorageKeys.highlightUpdates.modal();
+  if (!visible) return null;
+
+  // Footer for navigating through the renders list or history events
+  const totalRenders = rendersListRef.current.length;
+  const footerNode = selectedRender ? detailViewActiveTab === "details" ? /*#__PURE__*/_jsx(EventStepperFooter, {
+    currentIndex: selectedRenderIndex,
+    totalItems: totalRenders,
+    onPrevious: handlePreviousRender,
+    onNext: handleNextRender,
+    itemLabel: "Component",
+    subtitle: selectedRender.componentName || selectedRender.displayName || selectedRender.viewType
+  }) : /*#__PURE__*/_jsx(RenderHistoryFooter, {
+    render: selectedRender,
+    selectedEventIndex: historyEventIndex,
+    onEventIndexChange: setHistoryEventIndex,
+    isPro: isPro
+  }) : null;
+  return /*#__PURE__*/_jsx(TickProvider, {
+    children: /*#__PURE__*/_jsx(JsModal, {
+      visible: visible,
+      onClose: onClose,
+      onMinimize: onMinimize,
+      persistenceKey: persistenceKey,
+      header: {
+        showToggleButton: true,
+        customContent: renderHeaderContent()
+      },
+      enablePersistence: true,
+      initialMode: "bottomSheet",
+      enableGlitchEffects: true,
+      styles: {},
+      footer: footerNode,
+      footerHeight: selectedRender ? detailViewActiveTab === "details" ? 68 : (selectedRender.renderHistory?.length ?? 0) > 1 ? 68 : 0 : 0,
+      children: /*#__PURE__*/_jsx(View, {
+        nativeID: "__rn_buoy__highlight-modal",
+        style: styles.container,
+        children: showCopySettingsView ? /*#__PURE__*/_jsx(RendersCopySettingsView, {
+          renders: copyRendersSnapshot
+        }) : selectedRender ? detailViewActiveTab === "details" ? /*#__PURE__*/_jsx(RenderDetailView, {
+          render: selectedRender,
+          disableInternalFooter: true,
+          onAddFilter: handleAddFilter,
+          isPro: isPro
+        }) : /*#__PURE__*/_jsx(RenderHistoryViewer, {
+          render: selectedRender,
+          disableInternalFooter: true,
+          selectedEventIndex: historyEventIndex,
+          onEventIndexChange: setHistoryEventIndex,
+          isPro: isPro
+        }) : showFilterView ? /*#__PURE__*/_jsx(HighlightFilterView, {
+          filters: filters,
+          onFilterChange: handleFilterChange,
+          settings: settings,
+          onSettingsChange: handleSettingsChange,
+          availableProps: RenderTracker.getAvailableProps(),
+          activeTab: filterViewActiveTab
+        }) : /*#__PURE__*/_jsxs(_Fragment, {
+          children: [!isTracking && /*#__PURE__*/_jsx(DisabledBanner, {}), /*#__PURE__*/_jsx(IsolatedRenderList, {
+            searchText: searchText,
+            filters: filters,
+            onSelectRender: handleRenderPress,
+            onStatsChange: handleStatsChange,
+            onRendersChange: handleRendersChange,
+            isTracking: isTracking,
+            isPro: isPro
+          })]
+        })
+      })
+    })
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: buoyColors.base
+  },
+  disabledBanner: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    padding: 10,
+    marginHorizontal: 12,
+    marginTop: 8,
+    backgroundColor: buoyColors.warning + "15",
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: buoyColors.warning + "20"
+  },
+  disabledText: {
+    color: buoyColors.warning,
+    fontSize: 11,
+    flex: 1
+  }
+});
+export default HighlightUpdatesModal;