@buoy-gg/highlight-updates 2.1.12 → 2.1.14

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

@@ -1,591 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-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 _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, {
-    style: styles.disabledBanner,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Power, {
-      size: 14,
-      color: _sharedUi.buoyColors.warning
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: styles.disabledText,
-      children: "Render tracking is disabled"
-    })]
-  });
-});
-
-/**
- * Format render data for copying to clipboard as JSON
- */
-function formatRenderDataForClipboard() {
-  const renders = _RenderTracker.RenderTracker.getRenders();
-  const exportData = {
-    exportedAt: new Date().toISOString(),
-    totalComponents: renders.length,
-    totalRenders: renders.reduce((sum, r) => sum + r.renderCount, 0),
-    components: renders.map(render => ({
-      componentName: render.componentName || render.displayName,
-      viewType: render.viewType,
-      nativeTag: render.nativeTag,
-      testID: render.testID,
-      nativeID: render.nativeID,
-      accessibilityLabel: render.accessibilityLabel,
-      renderCount: render.renderCount,
-      firstRenderTime: render.firstRenderTime,
-      lastRenderTime: render.lastRenderTime,
-      lastRenderCause: render.lastRenderCause ? {
-        type: render.lastRenderCause.type,
-        componentCause: render.lastRenderCause.componentCause,
-        changedKeys: render.lastRenderCause.changedKeys,
-        hookChanges: render.lastRenderCause.hookChanges?.map(h => ({
-          type: h.type,
-          index: h.index,
-          description: h.description
-        }))
-      } : null,
-      renderHistory: render.renderHistory?.map(event => ({
-        renderNumber: event.renderNumber,
-        timestamp: event.timestamp,
-        cause: {
-          type: event.cause.type,
-          componentCause: event.cause.componentCause,
-          changedKeys: event.cause.changedKeys
-        }
-      }))
-    }))
-  };
-  return JSON.stringify(exportData, null, 2);
-}
-function HighlightUpdatesModal({
-  visible,
-  onClose,
-  onBack,
-  onMinimize,
-  enableSharedModalDimensions = false,
-  initialNativeTag,
-  onInitialNativeTagHandled
-}) {
-  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 [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);
-  }, []);
-
-  // Pass a lazy getter so CopyButton calls it at click time with fresh data
-  const copyData = hasRenders ? formatRenderDataForClipboard : "";
-  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);
-  }, []);
-  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 (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,
-      copyData: copyData,
-      isTracking: isTracking,
-      isFrozen: isFrozen,
-      activeFilterCount: activeFilterCount,
-      hasRenders: hasRenders,
-      searchInputRef: searchInputRef
-    });
-  }, [showFilterView, selectedRender, onBack, isSearchActive, searchText, isTracking, isFrozen, activeFilterCount, hasRenders, filterViewActiveTab, detailViewActiveTab, handleBackFromFilter, handleBackFromDetail, handleSearch, handleSearchToggle, handleSearchClose, handleFilterToggle, handleToggleTracking, handleToggleFreeze, handleClear, copyData]);
-
-  // ============================================================================
-  // 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;
-  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: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        nativeID: "__rn_buoy__highlight-modal",
-        style: styles.container,
-        children: 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
-          })]
-        })
-      })
-    })
-  });
-}
-const styles = _reactNative.StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: _sharedUi.buoyColors.base
-  },
-  disabledBanner: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    padding: 10,
-    marginHorizontal: 12,
-    marginTop: 8,
-    backgroundColor: _sharedUi.buoyColors.warning + "15",
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.warning + "20"
-  },
-  disabledText: {
-    color: _sharedUi.buoyColors.warning,
-    fontSize: 11,
-    flex: 1
-  }
-});
-var _default = exports.default = HighlightUpdatesModal;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),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"),_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,a=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var n,i,s={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return s;if(n=t?a:r){if(n.has(e))return n.get(e);n.set(e,s)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((i=(n=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(i.get||i.set)?n(s,t,i):s[t]=e[t]);return s})(e,t)}const DisabledBanner=_react.default.memo(function(){return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.disabledBanner,children:[(0,_jsxRuntime.jsx)(_sharedUi.Power,{size:14,color:_sharedUi.buoyColors.warning}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.disabledText,children:"Render tracking is disabled"})]})});function formatRenderDataForClipboard(){const e=_RenderTracker.RenderTracker.getRenders(),t={exportedAt:(new Date).toISOString(),totalComponents:e.length,totalRenders:e.reduce((e,t)=>e+t.renderCount,0),components:e.map(e=>({componentName:e.componentName||e.displayName,viewType:e.viewType,nativeTag:e.nativeTag,testID:e.testID,nativeID:e.nativeID,accessibilityLabel:e.accessibilityLabel,renderCount:e.renderCount,firstRenderTime:e.firstRenderTime,lastRenderTime:e.lastRenderTime,lastRenderCause:e.lastRenderCause?{type:e.lastRenderCause.type,componentCause:e.lastRenderCause.componentCause,changedKeys:e.lastRenderCause.changedKeys,hookChanges:e.lastRenderCause.hookChanges?.map(e=>({type:e.type,index:e.index,description:e.description}))}:null,renderHistory:e.renderHistory?.map(e=>({renderNumber:e.renderNumber,timestamp:e.timestamp,cause:{type:e.cause.type,componentCause:e.cause.componentCause,changedKeys:e.cause.changedKeys}}))}))};return JSON.stringify(t,null,2)}function HighlightUpdatesModal({visible:e,onClose:t,onBack:r,onMinimize:a,enableSharedModalDimensions:n=!1,initialNativeTag:i,onInitialNativeTagHandled:s}){const l=(0,_license.useIsPro)(),[o,c]=(0,_react.useState)(!1),[d,u]=(0,_react.useState)(()=>_HighlightUpdatesController.default.getFrozen()),[g,_]=(0,_react.useState)(()=>_RenderTracker.RenderTracker.getStats().totalComponents>0),[h,p]=(0,_react.useState)(null),[f,R]=(0,_react.useState)(0),[T,m]=(0,_react.useState)(!1),[C,y]=(0,_react.useState)("filters"),[x,k]=(0,_react.useState)("details"),[b,S]=(0,_react.useState)(0),[v,w]=(0,_react.useState)(""),[H,U]=(0,_react.useState)(!1),I=(0,_react.useRef)(null),j=(0,_react.useRef)([]),D=(0,_react.useRef)(_RenderTracker.RenderTracker.getFilters()),[P,F]=(0,_react.useState)(()=>{const e=_RenderTracker.RenderTracker.getFilters();return e.includePatterns.length+e.excludePatterns.length}),[N,V]=(0,_react.useState)(()=>_RenderTracker.RenderTracker.getFilters()),[M,q]=(0,_react.useState)(()=>_RenderTracker.RenderTracker.getSettings()),E=(0,_react.useRef)(!1),A=(0,_react.useRef)(!1),z=(0,_react.useRef)(!1);(0,_react.useEffect)(()=>{e&&!E.current&&(E.current=!0)},[e]),(0,_react.useEffect)(()=>{e&&!A.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 a=_RenderTracker.RenderTracker.getFilters();D.current=a,V(a),F(a.includePatterns.length+a.excludePatterns.length)}A.current=!0}catch(e){}})()},[e]),(0,_react.useEffect)(()=>{A.current&&(async()=>{try{const e={includeTestID:Array.from(N.includeTestID),includeNativeID:Array.from(N.includeNativeID),includeViewType:Array.from(N.includeViewType),includeComponent:Array.from(N.includeComponent),excludeTestID:Array.from(N.excludeTestID),excludeNativeID:Array.from(N.excludeNativeID),excludeViewType:Array.from(N.excludeViewType),excludeComponent:Array.from(N.excludeComponent),includePatterns:N.includePatterns,excludePatterns:N.excludePatterns};await _sharedUi.persistentStorage.setItem(_sharedUi.devToolsStorageKeys.highlightUpdates.filters(),JSON.stringify(e))}catch(e){}})()},[N]),(0,_react.useEffect)(()=>{e&&!z.current&&(async()=>{try{const e=await _sharedUi.persistentStorage.getItem(_sharedUi.devToolsStorageKeys.highlightUpdates.settings());if(e){const t=JSON.parse(e),{performanceLogging:r,excludeDevTools:a,...n}=t;_RenderTracker.RenderTracker.setSettings(n),q(_RenderTracker.RenderTracker.getSettings())}z.current=!0}catch(e){z.current=!0}})()},[e]),(0,_react.useEffect)(()=>{z.current&&(async()=>{try{const{performanceLogging:e,excludeDevTools:t,...r}=M;await _sharedUi.persistentStorage.setItem(_sharedUi.devToolsStorageKeys.highlightUpdates.settings(),JSON.stringify(r))}catch(e){}})()},[M]),(0,_react.useEffect)(()=>{const e=_RenderTracker.RenderTracker.subscribeToState(e=>{c(e.isTracking)});return()=>{e()}},[]),(0,_react.useEffect)(()=>{const e=_HighlightUpdatesController.default.subscribeToFreeze(e=>{u(e)});return()=>{e()}},[]),(0,_react.useEffect)(()=>{H&&requestAnimationFrame(()=>{I.current?.focus()})},[H]),(0,_react.useEffect)(()=>{e||_HighlightUpdatesController.default.setSpotlight(null)},[e]),(0,_react.useEffect)(()=>{if(e&&null!=i){const e=_RenderTracker.RenderTracker.getRender(String(i));e&&(p(e),R(0),m(!1),_HighlightUpdatesController.default.setSpotlight(e.nativeTag)),s?.()}},[e,i,s]);const O=(0,_react.useCallback)(()=>{_HighlightUpdatesController.default.isInitialized()||_HighlightUpdatesController.default.initialize(),_HighlightUpdatesController.default.toggle()},[]),K=(0,_react.useCallback)(()=>{_HighlightUpdatesController.default.toggleFreeze()},[]),L=(0,_react.useCallback)(()=>{_HighlightUpdatesController.default.clearRenderCounts(),_(!1)},[]),B=g?formatRenderDataForClipboard:"",W=(0,_react.useCallback)(e=>{w(e)},[]),J=(0,_react.useCallback)((e,t,r)=>{p(e),R(t),k("details"),S(0),j.current=r,_HighlightUpdatesController.default.setSpotlight(e.nativeTag)},[]),G=(0,_react.useCallback)(e=>{j.current=e},[]),Q=(0,_react.useCallback)(()=>{p(null),R(0),_HighlightUpdatesController.default.setSpotlight(null)},[]),X=(0,_react.useCallback)(()=>{const e=j.current;if(f>0){const t=f-1,r=e[t];r&&(p(r),R(t),_HighlightUpdatesController.default.setSpotlight(r.nativeTag))}},[f]),Y=(0,_react.useCallback)(()=>{const e=j.current;if(f<e.length-1){const t=f+1,r=e[t];r&&(p(r),R(t),_HighlightUpdatesController.default.setSpotlight(r.nativeTag))}},[f]),Z=(0,_react.useCallback)(()=>{m(!1)},[]),$=(0,_react.useCallback)(()=>{m(!0)},[]),ee=(0,_react.useCallback)(()=>{U(!0)},[]),te=(0,_react.useCallback)(()=>{U(!1)},[]),re=(0,_react.useCallback)(e=>{_RenderTracker.RenderTracker.setFilters(e);const t=_RenderTracker.RenderTracker.getFilters();D.current=t,V(t),F(t.includePatterns.length+t.excludePatterns.length)},[]),ae=(0,_react.useCallback)((e,t)=>{const r=_RenderTracker.RenderTracker.getFilters(),a={};"include"===t?r.includePatterns.some(t=>t.type===e.type&&t.value===e.value)||(a.includePatterns=[...r.includePatterns,e]):r.excludePatterns.some(t=>t.type===e.type&&t.value===e.value)||(a.excludePatterns=[...r.excludePatterns,e]),Object.keys(a).length>0&&(re(a),p(null),R(0),_HighlightUpdatesController.default.setSpotlight(null))},[re]),ne=(0,_react.useCallback)(e=>{_RenderTracker.RenderTracker.setSettings(e),q(_RenderTracker.RenderTracker.getSettings())},[]),ie=(0,_react.useCallback)(e=>{_(e.totalComponents>0)},[]),se=(0,_react.useCallback)(()=>T?(0,_jsxRuntime.jsx)(_ModalHeaderContent.FilterViewHeader,{onBack:Z,activeTab:C,onTabChange:y,activeFilterCount:P}):h?(0,_jsxRuntime.jsx)(_ModalHeaderContent.DetailViewHeader,{onBack:Q,activeTab:x,onTabChange:k,hasHistory:(h.renderHistory?.length??0)>0}):(0,_jsxRuntime.jsx)(_ModalHeaderContent.MainListHeader,{onBack:r,isSearchActive:H,searchText:v,onSearchChange:W,onSearchToggle:ee,onSearchClose:te,onFilterToggle:$,onToggleTracking:O,onToggleFreeze:K,onClear:L,copyData:B,isTracking:o,isFrozen:d,activeFilterCount:P,hasRenders:g,searchInputRef:I}),[T,h,r,H,v,o,d,P,g,C,x,Z,Q,W,ee,te,$,O,K,L,B]),le=n?_sharedUi.devToolsStorageKeys.modal.root():_sharedUi.devToolsStorageKeys.highlightUpdates.modal();if(!e)return null;const oe=j.current.length,ce=h?"details"===x?(0,_jsxRuntime.jsx)(_sharedUi.EventStepperFooter,{currentIndex:f,totalItems:oe,onPrevious:X,onNext:Y,itemLabel:"Component",subtitle:h.componentName||h.displayName||h.viewType}):(0,_jsxRuntime.jsx)(_RenderHistoryViewer.RenderHistoryFooter,{render:h,selectedEventIndex:b,onEventIndexChange:S,isPro:l}):null;return(0,_jsxRuntime.jsx)(_sharedUi.TickProvider,{children:(0,_jsxRuntime.jsx)(_sharedUi.JsModal,{visible:e,onClose:t,onMinimize:a,persistenceKey:le,header:{showToggleButton:!0,customContent:se()},enablePersistence:!0,initialMode:"bottomSheet",enableGlitchEffects:!0,styles:{},footer:ce,footerHeight:h&&("details"===x||(h.renderHistory?.length??0)>1)?68:0,children:(0,_jsxRuntime.jsx)(_reactNative.View,{nativeID:"__rn_buoy__highlight-modal",style:styles.container,children:h?"details"===x?(0,_jsxRuntime.jsx)(_RenderDetailView.RenderDetailView,{render:h,disableInternalFooter:!0,onAddFilter:ae,isPro:l}):(0,_jsxRuntime.jsx)(_RenderHistoryViewer.RenderHistoryViewer,{render:h,disableInternalFooter:!0,selectedEventIndex:b,onEventIndexChange:S,isPro:l}):T?(0,_jsxRuntime.jsx)(_HighlightFilterView.HighlightFilterView,{filters:N,onFilterChange:re,settings:M,onSettingsChange:ne,availableProps:_RenderTracker.RenderTracker.getAvailableProps(),activeTab:C}):(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[!o&&(0,_jsxRuntime.jsx)(DisabledBanner,{}),(0,_jsxRuntime.jsx)(_IsolatedRenderList.IsolatedRenderList,{searchText:v,filters:N,onSelectRender:J,onStatsChange:ie,onRendersChange:G,isTracking:o,isPro:l})]})})})})}const styles=_reactNative.StyleSheet.create({container:{flex:1,backgroundColor:_sharedUi.buoyColors.base},disabledBanner:{flexDirection:"row",alignItems:"center",gap:8,padding:10,marginHorizontal:12,marginTop:8,backgroundColor:_sharedUi.buoyColors.warning+"15",borderRadius:8,borderWidth:1,borderColor:_sharedUi.buoyColors.warning+"20"},disabledText:{color:_sharedUi.buoyColors.warning,fontSize:11,flex:1}});var _default=exports.default=HighlightUpdatesModal;