@buoy-gg/highlight-updates 7.0.38 → 7.0.39

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

@@ -1 +1,641 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.HighlightToolView=HighlightToolView,exports.HighlightUpdatesModal=HighlightUpdatesModal,exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_sharedUi=require("@buoy-gg/shared-ui"),_license=require("@buoy-gg/license"),_HighlightUpdatesController=_interopRequireDefault(require("../utils/HighlightUpdatesController")),_RenderTracker=require("../utils/RenderTracker"),_RenderDetailView=require("./RenderDetailView"),_HighlightFilterView=require("./HighlightFilterView"),_IsolatedRenderList=require("./IsolatedRenderList"),_ModalHeaderContent=require("./ModalHeaderContent"),_RenderHistoryViewer=require("./RenderHistoryViewer"),_RendersCopySettingsView=require("./RendersCopySettingsView"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var a,i,s={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return s;if(a=t?n:r){if(a.has(e))return a.get(e);a.set(e,s)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((i=(a=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(i.get||i.set)?a(s,t,i):s[t]=e[t]);return s})(e,t)}const DisabledBanner=_react.default.memo(function(){return(0,_jsxRuntime.jsxs)(_reactNative.View,{testID:"buoy-highlight-disabled-banner",style:styles.disabledBanner,children:[(0,_jsxRuntime.jsx)(_sharedUi.Power,{size:14,color:_sharedUi.night.color.warning}),(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:"buoy-highlight-disabled-text",style:styles.disabledText,children:"Render tracking is disabled"})]})});function HighlightUpdatesModal({visible:e,onClose:t,onBack:r,onMinimize:n,enableSharedModalDimensions:a=!1,initialNativeTag:i,onInitialNativeTagHandled:s,onRenderSelect:l,inline:o=!1}){const c=(0,_license.useIsPro)(),[d,u]=(0,_react.useState)(!1),[g,_]=(0,_react.useState)(()=>_HighlightUpdatesController.default.getFrozen()),[h,p]=(0,_react.useState)(()=>_RenderTracker.RenderTracker.getStats().totalComponents>0),[R,f]=(0,_react.useState)(null),[T,x]=(0,_react.useState)(0),[C,k]=(0,_react.useState)(!1),[y,m]=(0,_react.useState)(!1),[b,S]=(0,_react.useState)([]),[v,w]=(0,_react.useState)("filters"),[j,H]=(0,_react.useState)("details"),[U,I]=(0,_react.useState)(0),[P,V]=(0,_react.useState)(""),[D,F]=(0,_react.useState)(!1),N=(0,_react.useRef)(null),M=(0,_react.useRef)([]),q=(0,_react.useRef)(_RenderTracker.RenderTracker.getFilters()),[E,z]=(0,_react.useState)(()=>{const e=_RenderTracker.RenderTracker.getFilters();return e.includePatterns.length+e.excludePatterns.length}),[A,B]=(0,_react.useState)(()=>_RenderTracker.RenderTracker.getFilters()),[O,L]=(0,_react.useState)(()=>_RenderTracker.RenderTracker.getSettings()),W=(0,_react.useRef)(!1),K=(0,_react.useRef)(!1),J=(0,_react.useRef)(!1);(0,_react.useEffect)(()=>{e&&!W.current&&(W.current=!0)},[e]),(0,_react.useEffect)(()=>{e&&!K.current&&(async()=>{try{const e=await _sharedUi.persistentStorage.getItem(_sharedUi.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.RenderTracker.setFilters(r);const n=_RenderTracker.RenderTracker.getFilters();q.current=n,B(n),z(n.includePatterns.length+n.excludePatterns.length)}K.current=!0}catch(e){}})()},[e]),(0,_react.useEffect)(()=>{K.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 _sharedUi.persistentStorage.setItem(_sharedUi.devToolsStorageKeys.highlightUpdates.filters(),JSON.stringify(e))}catch(e){}})()},[A]),(0,_react.useEffect)(()=>{e&&!J.current&&(async()=>{try{const e=await _sharedUi.persistentStorage.getItem(_sharedUi.devToolsStorageKeys.highlightUpdates.settings());if(e){const t=JSON.parse(e),{performanceLogging:r,excludeDevTools:n,...a}=t;_RenderTracker.RenderTracker.setSettings(a),L(_RenderTracker.RenderTracker.getSettings())}J.current=!0}catch(e){J.current=!0}})()},[e]),(0,_react.useEffect)(()=>{J.current&&(async()=>{try{const{performanceLogging:e,excludeDevTools:t,...r}=O;await _sharedUi.persistentStorage.setItem(_sharedUi.devToolsStorageKeys.highlightUpdates.settings(),JSON.stringify(r))}catch(e){}})()},[O]),(0,_react.useEffect)(()=>{const e=_RenderTracker.RenderTracker.subscribeToState(e=>{u(e.isTracking)});return()=>{e()}},[]),(0,_react.useEffect)(()=>{const e=_HighlightUpdatesController.default.subscribeToFreeze(e=>{_(e)});return()=>{e()}},[]),(0,_react.useEffect)(()=>{D&&requestAnimationFrame(()=>{N.current?.focus()})},[D]),(0,_react.useEffect)(()=>{e||_HighlightUpdatesController.default.setSpotlight(null)},[e]),(0,_react.useEffect)(()=>{if(e&&null!=i){const e=_RenderTracker.RenderTracker.getRender(String(i));e&&(f(e),x(0),k(!1),_HighlightUpdatesController.default.setSpotlight(e.nativeTag)),s?.()}},[e,i,s]);const G=(0,_react.useCallback)(()=>{_HighlightUpdatesController.default.isInitialized()||_HighlightUpdatesController.default.initialize(),_HighlightUpdatesController.default.toggle()},[]),Q=(0,_react.useCallback)(()=>{_HighlightUpdatesController.default.toggleFreeze()},[]),X=(0,_react.useCallback)(()=>{_HighlightUpdatesController.default.clearRenderCounts(),p(!1)},[]),Y=(0,_react.useCallback)(()=>{S(_RenderTracker.RenderTracker.getFilteredRenders(P)),m(!0)},[P]),Z=(0,_react.useCallback)(()=>{m(!1)},[]),$=(0,_react.useCallback)(e=>{V(e)},[]),ee=(0,_react.useCallback)((e,t,r)=>{f(e),x(t),H("details"),I(0),M.current=r,_HighlightUpdatesController.default.setSpotlight(e.nativeTag)},[]);(0,_react.useEffect)(()=>{if(!R)return;const e=String(R.nativeTag);return _RenderTracker.RenderTracker.subscribe(()=>{const t=_RenderTracker.RenderTracker.getRender(e);t&&f({...t})})},[R?.nativeTag]);const te=(0,_react.useRef)(null);(0,_react.useEffect)(()=>{l&&R&&te.current!==R.nativeTag&&(te.current=R.nativeTag,l(R))},[R,l]);const re=(0,_react.useCallback)(e=>{M.current=e},[]),ne=(0,_react.useCallback)(()=>{f(null),x(0),_HighlightUpdatesController.default.setSpotlight(null)},[]),ae=(0,_react.useCallback)(()=>{const e=M.current;if(T>0){const t=T-1,r=e[t];r&&(f(r),x(t),_HighlightUpdatesController.default.setSpotlight(r.nativeTag))}},[T]),ie=(0,_react.useCallback)(()=>{const e=M.current;if(T<e.length-1){const t=T+1,r=e[t];r&&(f(r),x(t),_HighlightUpdatesController.default.setSpotlight(r.nativeTag))}},[T]),se=(0,_react.useCallback)(()=>{k(!1)},[]),le=(0,_react.useCallback)(()=>{k(!0)},[]),oe=(0,_react.useCallback)(()=>{F(!0)},[]),ce=(0,_react.useCallback)(()=>{F(!1)},[]),de=(0,_react.useCallback)(e=>{_RenderTracker.RenderTracker.setFilters(e);const t=_RenderTracker.RenderTracker.getFilters();q.current=t,B(t),z(t.includePatterns.length+t.excludePatterns.length)},[]),ue=(0,_react.useCallback)((e,t)=>{const r=_RenderTracker.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&&(de(n),f(null),x(0),_HighlightUpdatesController.default.setSpotlight(null))},[de]),ge=(0,_react.useCallback)(e=>{_RenderTracker.RenderTracker.setSettings(e),L(_RenderTracker.RenderTracker.getSettings())},[]),_e=(0,_react.useCallback)(e=>{p(e.totalComponents>0)},[]),he=(0,_react.useCallback)(()=>y?(0,_jsxRuntime.jsx)(_ModalHeaderContent.CopySettingsViewHeader,{onBack:Z}):C?(0,_jsxRuntime.jsx)(_ModalHeaderContent.FilterViewHeader,{onBack:se,activeTab:v,onTabChange:w,activeFilterCount:E}):R?(0,_jsxRuntime.jsx)(_ModalHeaderContent.DetailViewHeader,{onBack:ne,activeTab:j,onTabChange:H,hasHistory:(R.renderHistory?.length??0)>0}):(0,_jsxRuntime.jsx)(_ModalHeaderContent.MainListHeader,{onBack:r,isSearchActive:D,searchText:P,onSearchChange:$,onSearchToggle:oe,onSearchClose:ce,onFilterToggle:le,onToggleTracking:G,onToggleFreeze:Q,onClear:X,onOpenCopySettings:Y,isTracking:d,isFrozen:g,activeFilterCount:E,hasRenders:h,searchInputRef:N}),[y,C,R,r,D,P,d,g,E,h,v,j,se,ne,Z,$,oe,ce,le,G,Q,X,Y]),pe=a?_sharedUi.devToolsStorageKeys.modal.root():_sharedUi.devToolsStorageKeys.highlightUpdates.modal();if(!e)return null;const Re=M.current.length,fe=R?"details"===j?(0,_jsxRuntime.jsx)(_sharedUi.EventStepperFooter,{currentIndex:T,totalItems:Re,onPrevious:ae,onNext:ie,itemLabel:"Component",subtitle:R.componentName||R.displayName||R.viewType}):(0,_jsxRuntime.jsx)(_RenderHistoryViewer.RenderHistoryFooter,{render:R,selectedEventIndex:U,onEventIndexChange:I,isPro:c}):null,Te=(0,_jsxRuntime.jsx)(_reactNative.View,{nativeID:"__rn_buoy__highlight-modal",testID:"buoy-highlight-body",style:styles.container,children:y?(0,_jsxRuntime.jsx)(_RendersCopySettingsView.RendersCopySettingsView,{renders:b}):R?"details"===j?(0,_jsxRuntime.jsx)(_RenderDetailView.RenderDetailView,{render:R,disableInternalFooter:!0,onAddFilter:ue,isPro:c}):(0,_jsxRuntime.jsx)(_RenderHistoryViewer.RenderHistoryViewer,{render:R,disableInternalFooter:!0,selectedEventIndex:U,onEventIndexChange:I,isPro:c}):C?(0,_jsxRuntime.jsx)(_HighlightFilterView.HighlightFilterView,{filters:A,onFilterChange:de,settings:O,onSettingsChange:ge,availableProps:_RenderTracker.RenderTracker.getAvailableProps(),activeTab:v}):(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[!d&&(0,_jsxRuntime.jsx)(DisabledBanner,{}),(0,_jsxRuntime.jsx)(_IsolatedRenderList.IsolatedRenderList,{searchText:P,filters:A,onSelectRender:ee,onStatsChange:_e,onRendersChange:re,isTracking:d,isPro:c})]})});return o?(0,_jsxRuntime.jsx)(_sharedUi.TickProvider,{children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.inlineRoot,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.inlineHeader,..._sharedUi.windowDragProps,children:he()}),Te,fe]})}):(0,_jsxRuntime.jsx)(_sharedUi.TickProvider,{children:(0,_jsxRuntime.jsx)(_sharedUi.JsModal,{visible:e,onClose:t,onMinimize:n,persistenceKey:pe,header:{showToggleButton:!0,customContent:he()},enablePersistence:!0,initialMode:"bottomSheet",enableGlitchEffects:!0,styles:{},footer:fe,footerHeight:R&&("details"===j||(R.renderHistory?.length??0)>1)?68:0,children:Te})})}function HighlightToolView(e={}){return(0,_jsxRuntime.jsx)(HighlightUpdatesModal,{...e,inline:!0,visible:!0,onClose:()=>{}})}const styles=_reactNative.StyleSheet.create({inlineRoot:{flex:1,minHeight:0,backgroundColor:"transparent"},inlineHeader:{paddingHorizontal:12,paddingVertical:8,borderBottomWidth:1,borderBottomColor:_sharedUi.night.color.border,backgroundColor:"transparent"},container:{flex:1,backgroundColor:"transparent"},disabledBanner:{flexDirection:"row",alignItems:"center",gap:8,padding:10,marginHorizontal:12,marginTop:8,backgroundColor:_sharedUi.night.color.warningSoft,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.warning+"20"},disabledText:{color:_sharedUi.night.color.warning,fontSize:11,flex:1}});var _default=exports.default=HighlightUpdatesModal;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HighlightToolView = HighlightToolView;
+exports.HighlightUpdatesModal = HighlightUpdatesModal;
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _license = require("@buoy-gg/license");
+var _HighlightUpdatesController = _interopRequireDefault(require("../utils/HighlightUpdatesController"));
+var _RenderTracker = require("../utils/RenderTracker");
+var _RenderDetailView = require("./RenderDetailView");
+var _HighlightFilterView = require("./HighlightFilterView");
+var _IsolatedRenderList = require("./IsolatedRenderList");
+var _ModalHeaderContent = require("./ModalHeaderContent");
+var _RenderHistoryViewer = require("./RenderHistoryViewer");
+var _RendersCopySettingsView = require("./RendersCopySettingsView");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * 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
+ */
+
+// Disabled banner - memoized since props rarely change
+const DisabledBanner = /*#__PURE__*/_react.default.memo(function DisabledBanner() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    testID: "buoy-highlight-disabled-banner",
+    style: styles.disabledBanner,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Power, {
+      size: 14,
+      color: _sharedUi.night.color.warning
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      testID: "buoy-highlight-disabled-text",
+      style: styles.disabledText,
+      children: "Render tracking is disabled"
+    })]
+  });
+});
+function HighlightUpdatesModal({
+  visible,
+  onClose,
+  onBack,
+  onMinimize,
+  enableSharedModalDimensions = false,
+  initialNativeTag,
+  onInitialNativeTagHandled,
+  onRenderSelect,
+  inline = false
+}) {
+  const isPro = (0, _license.useIsPro)();
+
+  // ============================================================================
+  // TRACKING STATE - subscribed via isolated component
+  // ============================================================================
+  const [isTracking, setIsTracking] = (0, _react.useState)(false);
+  const [isFrozen, setIsFrozen] = (0, _react.useState)(() => _HighlightUpdatesController.default.getFrozen());
+
+  // Track if there are renders for header clear button state
+  const [hasRenders, setHasRenders] = (0, _react.useState)(() => _RenderTracker.RenderTracker.getStats().totalComponents > 0);
+
+  // ============================================================================
+  // UI STATE - kept in parent for view switching
+  // ============================================================================
+  const [selectedRender, setSelectedRender] = (0, _react.useState)(null);
+  const [selectedRenderIndex, setSelectedRenderIndex] = (0, _react.useState)(0);
+  const [showFilterView, setShowFilterView] = (0, _react.useState)(false);
+  const [showCopySettingsView, setShowCopySettingsView] = (0, _react.useState)(false);
+  const [copyRendersSnapshot, setCopyRendersSnapshot] = (0, _react.useState)([]);
+  const [filterViewActiveTab, setFilterViewActiveTab] = (0, _react.useState)("filters");
+  const [detailViewActiveTab, setDetailViewActiveTab] = (0, _react.useState)("details");
+  const [historyEventIndex, setHistoryEventIndex] = (0, _react.useState)(0);
+  const [searchText, setSearchText] = (0, _react.useState)("");
+  const [isSearchActive, setIsSearchActive] = (0, _react.useState)(false);
+  const searchInputRef = (0, _react.useRef)(null);
+
+  // Track the renders list for navigation
+  const rendersListRef = (0, _react.useRef)([]);
+
+  // ============================================================================
+  // FILTER STATE - use ref for filter config, state for display count only
+  // ============================================================================
+  const filtersRef = (0, _react.useRef)(_RenderTracker.RenderTracker.getFilters());
+  const [activeFilterCount, setActiveFilterCount] = (0, _react.useState)(() => {
+    const filters = _RenderTracker.RenderTracker.getFilters();
+    return filters.includePatterns.length + filters.excludePatterns.length;
+  });
+
+  // Expose filters via state for HighlightFilterView (it needs to display them)
+  const [filters, setFilters] = (0, _react.useState)(() => _RenderTracker.RenderTracker.getFilters());
+
+  // ============================================================================
+  // SETTINGS STATE
+  // ============================================================================
+  const [settings, setSettings] = (0, _react.useState)(() => _RenderTracker.RenderTracker.getSettings());
+
+  // ============================================================================
+  // PERSISTENCE REFS - prevent saving on initial load
+  // ============================================================================
+  const hasLoadedTrackingState = (0, _react.useRef)(false);
+  const hasLoadedFilters = (0, _react.useRef)(false);
+  const hasLoadedSettings = (0, _react.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.
+  (0, _react.useEffect)(() => {
+    if (!visible || hasLoadedTrackingState.current) return;
+    hasLoadedTrackingState.current = true;
+  }, [visible]);
+
+  // Load persisted filters on mount
+  (0, _react.useEffect)(() => {
+    if (!visible || hasLoadedFilters.current) return;
+    const loadFilters = async () => {
+      try {
+        const storedFilters = await _sharedUi.persistentStorage.getItem(_sharedUi.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.RenderTracker.setFilters(restoredFilters);
+          const newFilters = _RenderTracker.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
+  (0, _react.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 _sharedUi.persistentStorage.setItem(_sharedUi.devToolsStorageKeys.highlightUpdates.filters(), JSON.stringify(filtersToSave));
+      } catch (error) {
+        // Failed to save filters
+      }
+    };
+    saveFilters();
+  }, [filters]);
+
+  // Load persisted settings on mount
+  (0, _react.useEffect)(() => {
+    if (!visible || hasLoadedSettings.current) return;
+    const loadSettings = async () => {
+      try {
+        const storedSettings = await _sharedUi.persistentStorage.getItem(_sharedUi.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.RenderTracker.setSettings(settingsToRestore);
+          setSettings(_RenderTracker.RenderTracker.getSettings());
+        }
+        hasLoadedSettings.current = true;
+      } catch (error) {
+        hasLoadedSettings.current = true;
+      }
+    };
+    loadSettings();
+  }, [visible]);
+
+  // Save settings when they change
+  (0, _react.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 _sharedUi.persistentStorage.setItem(_sharedUi.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
+  (0, _react.useEffect)(() => {
+    const unsubscribeState = _RenderTracker.RenderTracker.subscribeToState(state => {
+      setIsTracking(state.isTracking);
+    });
+    return () => {
+      unsubscribeState();
+    };
+  }, []);
+
+  // Subscribe to freeze state changes
+  (0, _react.useEffect)(() => {
+    const unsubscribeFreeze = _HighlightUpdatesController.default.subscribeToFreeze(frozen => {
+      setIsFrozen(frozen);
+    });
+    return () => {
+      unsubscribeFreeze();
+    };
+  }, []);
+
+  // Focus search input when activated
+  (0, _react.useEffect)(() => {
+    if (isSearchActive) {
+      requestAnimationFrame(() => {
+        searchInputRef.current?.focus();
+      });
+    }
+  }, [isSearchActive]);
+
+  // Clear spotlight when modal is closed
+  (0, _react.useEffect)(() => {
+    if (!visible) {
+      _HighlightUpdatesController.default.setSpotlight(null);
+    }
+  }, [visible]);
+
+  // ============================================================================
+  // DEEP LINK NAVIGATION - "Click Overlay Badge → Jump to Detail"
+  // ============================================================================
+
+  // Handle initial navigation when a badge is tapped
+  (0, _react.useEffect)(() => {
+    if (visible && initialNativeTag != null) {
+      // Look up the render by nativeTag
+      const render = _RenderTracker.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.default.setSpotlight(render.nativeTag);
+      }
+      // Notify parent that we've handled the navigation
+      onInitialNativeTagHandled?.();
+    }
+  }, [visible, initialNativeTag, onInitialNativeTagHandled]);
+
+  // ============================================================================
+  // CALLBACKS - stable references for child components
+  // ============================================================================
+
+  const handleToggleTracking = (0, _react.useCallback)(() => {
+    if (!_HighlightUpdatesController.default.isInitialized()) {
+      _HighlightUpdatesController.default.initialize();
+    }
+    _HighlightUpdatesController.default.toggle();
+  }, []);
+  const handleToggleFreeze = (0, _react.useCallback)(() => {
+    _HighlightUpdatesController.default.toggleFreeze();
+  }, []);
+  const handleClear = (0, _react.useCallback)(() => {
+    _HighlightUpdatesController.default.clearRenderCounts();
+    setHasRenders(false);
+  }, []);
+  const handleOpenCopySettings = (0, _react.useCallback)(() => {
+    // Snapshot the same filtered list the user sees in the main list view
+    // (respects include/exclude patterns and the search box).
+    setCopyRendersSnapshot(_RenderTracker.RenderTracker.getFilteredRenders(searchText));
+    setShowCopySettingsView(true);
+  }, [searchText]);
+  const handleCloseCopySettings = (0, _react.useCallback)(() => {
+    setShowCopySettingsView(false);
+  }, []);
+  const handleSearch = (0, _react.useCallback)(text => {
+    setSearchText(text);
+  }, []);
+  const handleRenderPress = (0, _react.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.default.setSpotlight(render.nativeTag);
+  }, []);
+
+  // Keep the open detail in sync with the tracker (live counts + hydrated
+  // history fetched on demand by a remote host).
+  (0, _react.useEffect)(() => {
+    if (!selectedRender) return;
+    const id = String(selectedRender.nativeTag);
+    return _RenderTracker.RenderTracker.subscribe(() => {
+      const next = _RenderTracker.RenderTracker.getRender(id);
+      if (next) setSelectedRender({
+        ...next
+      });
+    });
+  }, [selectedRender?.nativeTag]);
+
+  // Notify the host on selection (keyed by nativeTag so re-renders with the
+  // same selection don't re-fire; remote mirrors fetch history here).
+  const lastNotifiedSelectionRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (!onRenderSelect || !selectedRender) return;
+    if (lastNotifiedSelectionRef.current === selectedRender.nativeTag) return;
+    lastNotifiedSelectionRef.current = selectedRender.nativeTag;
+    onRenderSelect(selectedRender);
+  }, [selectedRender, onRenderSelect]);
+  const handleRendersChange = (0, _react.useCallback)(renders => {
+    rendersListRef.current = renders;
+  }, []);
+  const handleBackFromDetail = (0, _react.useCallback)(() => {
+    setSelectedRender(null);
+    setSelectedRenderIndex(0);
+    // Clear the spotlight
+    _HighlightUpdatesController.default.setSpotlight(null);
+  }, []);
+  const handlePreviousRender = (0, _react.useCallback)(() => {
+    const renders = rendersListRef.current;
+    if (selectedRenderIndex > 0) {
+      const newIndex = selectedRenderIndex - 1;
+      const newRender = renders[newIndex];
+      if (newRender) {
+        setSelectedRender(newRender);
+        setSelectedRenderIndex(newIndex);
+        _HighlightUpdatesController.default.setSpotlight(newRender.nativeTag);
+      }
+    }
+  }, [selectedRenderIndex]);
+  const handleNextRender = (0, _react.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.default.setSpotlight(newRender.nativeTag);
+      }
+    }
+  }, [selectedRenderIndex]);
+  const handleBackFromFilter = (0, _react.useCallback)(() => {
+    setShowFilterView(false);
+  }, []);
+  const handleFilterToggle = (0, _react.useCallback)(() => {
+    setShowFilterView(true);
+  }, []);
+  const handleSearchToggle = (0, _react.useCallback)(() => {
+    setIsSearchActive(true);
+  }, []);
+  const handleSearchClose = (0, _react.useCallback)(() => {
+    setIsSearchActive(false);
+  }, []);
+  const handleFilterChange = (0, _react.useCallback)(newFilters => {
+    _RenderTracker.RenderTracker.setFilters(newFilters);
+    const updatedFilters = _RenderTracker.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 = (0, _react.useCallback)((pattern, mode) => {
+    const currentFilters = _RenderTracker.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.default.setSpotlight(null);
+    }
+  }, [handleFilterChange]);
+  const handleSettingsChange = (0, _react.useCallback)(newSettings => {
+    _RenderTracker.RenderTracker.setSettings(newSettings);
+    setSettings(_RenderTracker.RenderTracker.getSettings());
+  }, []);
+
+  // Callback for IsolatedRenderList to update hasRenders (for header clear button)
+  const handleStatsChange = (0, _react.useCallback)(stats => {
+    setHasRenders(stats.totalComponents > 0);
+  }, []);
+
+  // ============================================================================
+  // HEADER RENDERING - using memoized components
+  // ============================================================================
+
+  const renderHeaderContent = (0, _react.useCallback)(() => {
+    if (showCopySettingsView) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalHeaderContent.CopySettingsViewHeader, {
+        onBack: handleCloseCopySettings
+      });
+    }
+    if (showFilterView) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalHeaderContent.FilterViewHeader, {
+        onBack: handleBackFromFilter,
+        activeTab: filterViewActiveTab,
+        onTabChange: setFilterViewActiveTab,
+        activeFilterCount: activeFilterCount
+      });
+    }
+    if (selectedRender) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalHeaderContent.DetailViewHeader, {
+        onBack: handleBackFromDetail,
+        activeTab: detailViewActiveTab,
+        onTabChange: setDetailViewActiveTab,
+        hasHistory: (selectedRender.renderHistory?.length ?? 0) > 0
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalHeaderContent.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 ? _sharedUi.devToolsStorageKeys.modal.root() : _sharedUi.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__*/(0, _jsxRuntime.jsx)(_sharedUi.EventStepperFooter, {
+    currentIndex: selectedRenderIndex,
+    totalItems: totalRenders,
+    onPrevious: handlePreviousRender,
+    onNext: handleNextRender,
+    itemLabel: "Component",
+    subtitle: selectedRender.componentName || selectedRender.displayName || selectedRender.viewType
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderHistoryViewer.RenderHistoryFooter, {
+    render: selectedRender,
+    selectedEventIndex: historyEventIndex,
+    onEventIndexChange: setHistoryEventIndex,
+    isPro: isPro
+  }) : null;
+  const body = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    nativeID: "__rn_buoy__highlight-modal",
+    testID: "buoy-highlight-body",
+    style: styles.container,
+    children: showCopySettingsView ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_RendersCopySettingsView.RendersCopySettingsView, {
+      renders: copyRendersSnapshot
+    }) : selectedRender ? detailViewActiveTab === "details" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderDetailView.RenderDetailView, {
+      render: selectedRender,
+      disableInternalFooter: true,
+      onAddFilter: handleAddFilter,
+      isPro: isPro
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderHistoryViewer.RenderHistoryViewer, {
+      render: selectedRender,
+      disableInternalFooter: true,
+      selectedEventIndex: historyEventIndex,
+      onEventIndexChange: setHistoryEventIndex,
+      isPro: isPro
+    }) : showFilterView ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_HighlightFilterView.HighlightFilterView, {
+      filters: filters,
+      onFilterChange: handleFilterChange,
+      settings: settings,
+      onSettingsChange: handleSettingsChange,
+      availableProps: _RenderTracker.RenderTracker.getAvailableProps(),
+      activeTab: filterViewActiveTab
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [!isTracking && /*#__PURE__*/(0, _jsxRuntime.jsx)(DisabledBanner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_IsolatedRenderList.IsolatedRenderList, {
+        searchText: searchText,
+        filters: filters,
+        onSelectRender: handleRenderPress,
+        onStatsChange: handleStatsChange,
+        onRendersChange: handleRendersChange,
+        isTracking: isTracking,
+        isPro: isPro
+      })]
+    })
+  });
+
+  // The ONLY difference between the phone and the desktop dashboard is which
+  // shell the header, body and footer go in. Everything above this is shared.
+  if (inline) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TickProvider, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.inlineRoot,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.inlineHeader,
+          ..._sharedUi.windowDragProps,
+          children: renderHeaderContent()
+        }), body, footerNode]
+      })
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TickProvider, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.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: body
+    })
+  });
+}
+
+/**
+ * The same renders tool as `HighlightUpdatesModal`, rendered INLINE for hosts
+ * that place tools in a panel rather than a modal. Exists so there is exactly
+ * one implementation — the desktop dashboard used to ship its own copy of this
+ * component's header and screen router.
+ */
+function HighlightToolView(props = {}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightUpdatesModal, {
+    ...props,
+    inline: true,
+    visible: true,
+    onClose: () => {}
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  inlineRoot: {
+    flex: 1,
+    minHeight: 0,
+    // Transparent so the desktop workbench's hoisted sky (one field spanning
+    // sidebar + panel) shows through — the shell paints its base beneath it.
+    backgroundColor: "transparent"
+  },
+  inlineHeader: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: _sharedUi.night.color.border,
+    // Clear, like Bench — the host's hoisted sky shows through the header.
+    backgroundColor: "transparent"
+  },
+  container: {
+    flex: 1,
+    // Transparent so the HOST's field shows through — JsModal's hoisted
+    // ToolBackground in the modal, the desktop workbench's hoisted sky inline.
+    backgroundColor: "transparent"
+  },
+  disabledBanner: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    padding: 10,
+    marginHorizontal: 12,
+    marginTop: 8,
+    backgroundColor: _sharedUi.night.color.warningSoft,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.night.color.warning + "20"
+  },
+  disabledText: {
+    color: _sharedUi.night.color.warning,
+    fontSize: 11,
+    flex: 1
+  }
+});
+var _default = exports.default = HighlightUpdatesModal;