@buoy-gg/highlight-updates 7.0.38 → 7.0.39

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

@@ -1 +1,273 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.CategoryBadge=CategoryBadge,exports.IDENTIFIER_CONFIG=void 0,exports.IdentifierBadge=IdentifierBadge,exports.default=void 0;var _react=_interopRequireDefault(require("react")),_reactNative=require("react-native"),_sharedUi=require("@buoy-gg/shared-ui"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const IDENTIFIER_CONFIG=exports.IDENTIFIER_CONFIG={viewType:{label:"ViewType",shortLabel:"View",color:_sharedUi.night.color.accent,icon:_sharedUi.Box},testID:{label:"testID",shortLabel:"test",color:_sharedUi.buoyColors.success,icon:_sharedUi.Hash},nativeID:{label:"nativeID",shortLabel:"native",color:"#f59e0b",icon:_sharedUi.Hash},component:{label:"Component",shortLabel:"Comp",color:"#a855f7",icon:_sharedUi.FileCode},accessibilityLabel:{label:"a11y",shortLabel:"a11y",color:"#ec4899",icon:_sharedUi.Eye},nativeTag:{label:"tag",shortLabel:"tag",color:_sharedUi.buoyColors.textMuted,icon:_sharedUi.Layers},any:{label:"Any",shortLabel:"Any",color:_sharedUi.buoyColors.warning,icon:_sharedUi.Search}};function IdentifierBadge({type:e,value:t,compact:o=!1,badgeOnly:a=!1,valueOnly:r=!1,shortLabel:i=!1,showIcon:l=!1,testID:n}){const s=IDENTIFIER_CONFIG[e],c=s.icon,d=i?s.shortLabel:s.label;return r?(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:n?`${n}-value`:void 0,style:[styles.valueOnly,o&&styles.valueOnlyCompact,{color:s.color}],numberOfLines:1,children:t}):a?(0,_jsxRuntime.jsxs)(_reactNative.View,{testID:n,style:[styles.badgeOnly,o&&styles.badgeOnlyCompact,{backgroundColor:s.color+"20",borderColor:s.color+"40"}],children:[l&&(0,_jsxRuntime.jsx)(c,{size:o?10:12,color:s.color}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.badgeOnlyText,o&&styles.badgeOnlyTextCompact,{color:s.color}],children:d})]}):(0,_jsxRuntime.jsxs)(_reactNative.View,{testID:n,accessibilityLabel:`${s.label} ${t}`,style:[styles.container,o&&styles.containerCompact],children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.badge,o&&styles.badgeCompact,{backgroundColor:s.color+"20"}],children:[l&&(0,_jsxRuntime.jsx)(c,{size:o?8:10,color:s.color}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.badgeText,o&&styles.badgeTextCompact,{color:s.color}],children:d})]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:n?`${n}-value`:void 0,style:[styles.value,o&&styles.valueCompact],numberOfLines:1,children:t})]})}function CategoryBadge({type:e,count:t,isSelected:o=!1,showIcon:a=!0}){const r=IDENTIFIER_CONFIG[e],i=r.icon;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.categoryBadge,{backgroundColor:r.color+"15",borderColor:o?r.color:r.color+"40",borderWidth:o?2:1}],children:[a&&(0,_jsxRuntime.jsx)(i,{size:12,color:r.color}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.categoryBadgeText,{color:r.color}],children:r.label}),void 0!==t&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.categoryBadgeCount,{backgroundColor:r.color+"25"}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.categoryBadgeCountText,{color:r.color}],children:t})})]})}const styles=_reactNative.StyleSheet.create({container:{flexDirection:"row",alignItems:"center",gap:6},containerCompact:{gap:4},badge:{flexDirection:"row",alignItems:"center",paddingVertical:3,paddingHorizontal:6,borderRadius:4,gap:4},badgeCompact:{paddingVertical:2,paddingHorizontal:5,gap:3},badgeText:{fontSize:10,fontWeight:"700"},badgeTextCompact:{fontSize:9},value:{fontSize:12,color:_sharedUi.night.color.text,fontFamily:_sharedUi.monoFont,flex:1},valueCompact:{fontSize:11},badgeOnly:{flexDirection:"row",alignItems:"center",paddingVertical:4,paddingHorizontal:8,borderRadius:6,borderWidth:1,gap:5},badgeOnlyCompact:{paddingVertical:2,paddingHorizontal:6,borderRadius:4,gap:4},badgeOnlyText:{fontSize:11,fontWeight:"600"},badgeOnlyTextCompact:{fontSize:9,fontWeight:"700"},valueOnly:{fontSize:12,fontFamily:_sharedUi.monoFont},valueOnlyCompact:{fontSize:11},categoryBadge:{flexDirection:"row",alignItems:"center",paddingVertical:8,paddingLeft:10,paddingRight:6,borderRadius:8,gap:6},categoryBadgeText:{fontSize:11,fontWeight:"600"},categoryBadgeCount:{paddingHorizontal:6,paddingVertical:2,borderRadius:10,minWidth:20,alignItems:"center"},categoryBadgeCountText:{fontSize:10,fontWeight:"600"}});var _default=exports.default=IdentifierBadge;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CategoryBadge = CategoryBadge;
+exports.IDENTIFIER_CONFIG = void 0;
+exports.IdentifierBadge = IdentifierBadge;
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * IdentifierBadge
+ *
+ * Shared badge component for displaying component identifiers.
+ * Used throughout the highlight-updates package for consistent styling.
+ */
+
+// All possible identifier types
+
+// Badge configuration for each identifier type
+const IDENTIFIER_CONFIG = exports.IDENTIFIER_CONFIG = {
+  viewType: {
+    label: "ViewType",
+    shortLabel: "View",
+    color: _sharedUi.night.color.accent,
+    icon: _sharedUi.Box
+  },
+  testID: {
+    label: "testID",
+    shortLabel: "test",
+    color: _sharedUi.buoyColors.success,
+    icon: _sharedUi.Hash
+  },
+  nativeID: {
+    label: "nativeID",
+    shortLabel: "native",
+    color: "#f59e0b",
+    // amber
+    icon: _sharedUi.Hash
+  },
+  component: {
+    label: "Component",
+    shortLabel: "Comp",
+    color: "#a855f7",
+    // purple
+    icon: _sharedUi.FileCode
+  },
+  accessibilityLabel: {
+    label: "a11y",
+    shortLabel: "a11y",
+    color: "#ec4899",
+    // pink
+    icon: _sharedUi.Eye
+  },
+  nativeTag: {
+    label: "tag",
+    shortLabel: "tag",
+    color: _sharedUi.buoyColors.textMuted,
+    icon: _sharedUi.Layers
+  },
+  any: {
+    label: "Any",
+    shortLabel: "Any",
+    color: _sharedUi.buoyColors.warning,
+    icon: _sharedUi.Search
+  }
+};
+function IdentifierBadge({
+  type,
+  value,
+  compact = false,
+  badgeOnly = false,
+  valueOnly = false,
+  shortLabel = false,
+  showIcon = false,
+  testID
+}) {
+  const config = IDENTIFIER_CONFIG[type];
+  const IconComponent = config.icon;
+  const label = shortLabel ? config.shortLabel : config.label;
+  if (valueOnly) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      testID: testID ? `${testID}-value` : undefined,
+      style: [styles.valueOnly, compact && styles.valueOnlyCompact, {
+        color: config.color
+      }],
+      numberOfLines: 1,
+      children: value
+    });
+  }
+  if (badgeOnly) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      testID: testID,
+      style: [styles.badgeOnly, compact && styles.badgeOnlyCompact, {
+        backgroundColor: config.color + "20",
+        borderColor: config.color + "40"
+      }],
+      children: [showIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
+        size: compact ? 10 : 12,
+        color: config.color
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.badgeOnlyText, compact && styles.badgeOnlyTextCompact, {
+          color: config.color
+        }],
+        children: label
+      })]
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    testID: testID,
+    accessibilityLabel: `${config.label} ${value}`,
+    style: [styles.container, compact && styles.containerCompact],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [styles.badge, compact && styles.badgeCompact, {
+        backgroundColor: config.color + "20"
+      }],
+      children: [showIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
+        size: compact ? 8 : 10,
+        color: config.color
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.badgeText, compact && styles.badgeTextCompact, {
+          color: config.color
+        }],
+        children: label
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      testID: testID ? `${testID}-value` : undefined,
+      style: [styles.value, compact && styles.valueCompact],
+      numberOfLines: 1,
+      children: value
+    })]
+  });
+}
+
+// Standalone badge (no value) for category selection
+
+function CategoryBadge({
+  type,
+  count,
+  isSelected = false,
+  showIcon = true
+}) {
+  const config = IDENTIFIER_CONFIG[type];
+  const IconComponent = config.icon;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.categoryBadge, {
+      backgroundColor: config.color + "15",
+      borderColor: isSelected ? config.color : config.color + "40",
+      borderWidth: isSelected ? 2 : 1
+    }],
+    children: [showIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
+      size: 12,
+      color: config.color
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.categoryBadgeText, {
+        color: config.color
+      }],
+      children: config.label
+    }), count !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.categoryBadgeCount, {
+        backgroundColor: config.color + "25"
+      }],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.categoryBadgeCountText, {
+          color: config.color
+        }],
+        children: count
+      })
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  // Full badge with value
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
+  },
+  containerCompact: {
+    gap: 4
+  },
+  badge: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 3,
+    paddingHorizontal: 6,
+    borderRadius: 4,
+    gap: 4
+  },
+  badgeCompact: {
+    paddingVertical: 2,
+    paddingHorizontal: 5,
+    gap: 3
+  },
+  badgeText: {
+    fontSize: 10,
+    fontWeight: "700"
+  },
+  badgeTextCompact: {
+    fontSize: 9
+  },
+  value: {
+    fontSize: 12,
+    color: _sharedUi.night.color.text,
+    fontFamily: _sharedUi.monoFont,
+    flex: 1
+  },
+  valueCompact: {
+    fontSize: 11
+  },
+  // Badge only (no value)
+  badgeOnly: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 4,
+    paddingHorizontal: 8,
+    borderRadius: 6,
+    borderWidth: 1,
+    gap: 5
+  },
+  badgeOnlyCompact: {
+    paddingVertical: 2,
+    paddingHorizontal: 6,
+    borderRadius: 4,
+    gap: 4
+  },
+  badgeOnlyText: {
+    fontSize: 11,
+    fontWeight: "600"
+  },
+  badgeOnlyTextCompact: {
+    fontSize: 9,
+    fontWeight: "700"
+  },
+  // Value only
+  valueOnly: {
+    fontSize: 12,
+    fontFamily: _sharedUi.monoFont
+  },
+  valueOnlyCompact: {
+    fontSize: 11
+  },
+  // Category badge (for filter selection)
+  categoryBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 8,
+    paddingLeft: 10,
+    paddingRight: 6,
+    borderRadius: 8,
+    gap: 6
+  },
+  categoryBadgeText: {
+    fontSize: 11,
+    fontWeight: "600"
+  },
+  categoryBadgeCount: {
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 10,
+    minWidth: 20,
+    alignItems: "center"
+  },
+  categoryBadgeCountText: {
+    fontSize: 10,
+    fontWeight: "600"
+  }
+});
+var _default = exports.default = IdentifierBadge;

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

@@ -1 +1,188 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.IsolatedRenderList=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_RenderTracker=require("../utils/RenderTracker"),_RenderListItem=require("./RenderListItem"),_sharedUi=require("@buoy-gg/shared-ui"),_jsxRuntime=require("react/jsx-runtime");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)}function IsolatedRenderListInner({searchText:e,filters:t,onSelectRender:r,onStatsChange:n,onRendersChange:a,isTracking:i,isPro:s=!1}){const[o,c]=(0,_react.useState)(()=>_RenderTracker.RenderTracker.getFilteredRenders(e)),d=(0,_react.useRef)(null);(0,_react.useEffect)(()=>_RenderTracker.RenderTracker.subscribe(()=>{const t=_RenderTracker.RenderTracker.getFilteredRenders(e);c(t),n(_RenderTracker.RenderTracker.getStats()),a?.(t)}),[e,n,a]),(0,_react.useEffect)(()=>{const t=_RenderTracker.RenderTracker.getFilteredRenders(e);c(t),a?.(t)},[e,t,a]);const l=(0,_sharedUi.useLimit)("highlightUpdates.components"),u=s?1/0:l,_=(0,_react.useMemo)(()=>o.slice(0,u),[o,u]),h=(0,_react.useMemo)(()=>Math.max(0,o.length-u),[o.length,u]),g=(0,_react.useCallback)(e=>e.id,[]),R=(0,_react.useCallback)(({item:e,index:t})=>(0,_jsxRuntime.jsx)(_RenderListItem.RenderListItem,{render:e,onPress:()=>r(e,t,_)}),[r,_]),p=(0,_react.useCallback)(()=>h<=0?null:(0,_jsxRuntime.jsxs)(_reactNative.View,{testID:"buoy-highlight-locked",style:styles.lockedBanner,children:[(0,_jsxRuntime.jsx)(_sharedUi.Lock,{size:14,color:_sharedUi.night.color.warning}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{testID:"buoy-highlight-locked-text",style:styles.lockedBannerText,children:[h," more ",1===h?"component":"components"," locked"]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.lockedBannerSubtext,children:"Upgrade to Pro"})]}),[h]);if(0===o.length){const t=e.trim(),r=_RenderTracker.RenderTracker.getStats().totalComponents,n=t?_RenderTracker.RenderTracker.getFilteredRenders("").length:0,a=(0,_sharedUi.resolveListEmptyState)({subject:"components",verb:"tracked",search:e,total:t?n:r,capturing:i,blocked:t&&0===n&&r>0?"The active filters hide everything tracked, so there is nothing to search.":void 0,waiting:{otto:"stare",title:"No renders tracked",message:"Component renders will appear here"},paused:{title:"No renders tracked",message:"Enable tracking to start capturing"}});return(0,_jsxRuntime.jsx)(_sharedUi.ToolEmptyState,{...a,testID:"buoy-highlight-empty"})}return(0,_jsxRuntime.jsx)(_reactNative.FlatList,{testID:"buoy-highlight-list",ref:d,data:_,renderItem:R,keyExtractor:g,contentContainerStyle:styles.listContent,showsVerticalScrollIndicator:!0,initialNumToRender:10,maxToRenderPerBatch:10,windowSize:10,scrollEnabled:!1,ListFooterComponent:p})}const IsolatedRenderList=exports.IsolatedRenderList=(0,_react.memo)(IsolatedRenderListInner),styles=_reactNative.StyleSheet.create({listContent:{paddingTop:8},lockedBanner:{flexDirection:"row",alignItems:"center",justifyContent:"center",paddingVertical:12,paddingHorizontal:16,marginTop:8,gap:8},lockedBannerText:{color:_sharedUi.night.color.warning,fontSize:13,fontWeight:"500"},lockedBannerSubtext:{color:_sharedUi.night.color.textTertiary,fontSize:12}});var _default=exports.default=IsolatedRenderList;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.IsolatedRenderList = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _RenderTracker = require("../utils/RenderTracker");
+var _RenderListItem = require("./RenderListItem");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _jsxRuntime = require("react/jsx-runtime");
+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); }
+/**
+ * IsolatedRenderList
+ *
+ * Performance-optimized component that isolates the render tracking subscription
+ * to prevent parent re-renders. Only this component re-renders when new renders
+ * are tracked, keeping the modal UI stable.
+ *
+ * Following the optimization guide: move subscriptions to child components to
+ * prevent parent re-renders.
+ */
+
+// Free tier limit for tracked components
+
+/**
+ * Isolated list component that owns the render subscription.
+ * Parent component does NOT re-render when renders change.
+ */
+function IsolatedRenderListInner({
+  searchText,
+  filters,
+  onSelectRender,
+  onStatsChange,
+  onRendersChange,
+  isTracking,
+  isPro = false
+}) {
+  // Initialize with current data to avoid flash of empty state
+  const [renders, setRenders] = (0, _react.useState)(() => _RenderTracker.RenderTracker.getFilteredRenders(searchText));
+  const flatListRef = (0, _react.useRef)(null);
+
+  // Subscribe to RenderTracker updates - ONLY this component re-renders
+  (0, _react.useEffect)(() => {
+    const unsubscribe = _RenderTracker.RenderTracker.subscribe(() => {
+      const newRenders = _RenderTracker.RenderTracker.getFilteredRenders(searchText);
+      setRenders(newRenders);
+      // Notify parent of stats via callback (parent uses ref, no re-render)
+      onStatsChange(_RenderTracker.RenderTracker.getStats());
+      // Notify parent of renders list for navigation
+      onRendersChange?.(newRenders);
+    });
+    return unsubscribe;
+  }, [searchText, onStatsChange, onRendersChange]);
+
+  // Update filtered renders when search or filters change
+  (0, _react.useEffect)(() => {
+    const newRenders = _RenderTracker.RenderTracker.getFilteredRenders(searchText);
+    setRenders(newRenders);
+    onRendersChange?.(newRenders);
+  }, [searchText, filters, onRendersChange]);
+
+  // Limit visible components for free tier
+  // `isPro` stays a prop so callers can force the unlimited view; the tier cap
+  // applies otherwise. useLimit() already returns Infinity for Pro, so the two
+  // agree — this only preserves the prop contract for cross-package callers.
+  const tierLimit = (0, _sharedUi.useLimit)("highlightUpdates.components");
+  const componentLimit = isPro ? Infinity : tierLimit;
+  const visibleRenders = (0, _react.useMemo)(() => {
+    return renders.slice(0, componentLimit);
+  }, [renders, componentLimit]);
+
+  // Calculate locked component count
+  const lockedComponentCount = (0, _react.useMemo)(() => {
+    return Math.max(0, renders.length - componentLimit);
+  }, [renders.length, componentLimit]);
+
+  // Stable keyExtractor - moved outside to avoid recreation
+  const keyExtractor = (0, _react.useCallback)(item => item.id, []);
+
+  // Stable renderItem - uses stable onSelectRender callback
+  const renderItem = (0, _react.useCallback)(({
+    item,
+    index
+  }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderListItem.RenderListItem, {
+    render: item,
+    onPress: () => onSelectRender(item, index, visibleRenders)
+  }), [onSelectRender, visibleRenders]);
+
+  // Locked banner footer
+  const renderFooter = (0, _react.useCallback)(() => {
+    if (lockedComponentCount <= 0) return null;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      testID: "buoy-highlight-locked",
+      style: styles.lockedBanner,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Lock, {
+        size: 14,
+        color: _sharedUi.night.color.warning
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+        testID: "buoy-highlight-locked-text",
+        style: styles.lockedBannerText,
+        children: [lockedComponentCount, " more ", lockedComponentCount === 1 ? 'component' : 'components', " locked"]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.lockedBannerSubtext,
+        children: "Upgrade to Pro"
+      })]
+    });
+  }, [lockedComponentCount]);
+
+  // Show empty state when no renders
+  if (renders.length === 0) {
+    const term = searchText.trim();
+
+    // Read straight off the tracker rather than held in state: this runs only
+    // on the empty branch, so it costs nothing on the hot path, and it is
+    // always the current truth. `totalTracked` is every component the tracker
+    // holds; `unsearched` is what the settings and filters allow BEFORE the
+    // search box.
+    const totalTracked = _RenderTracker.RenderTracker.getStats().totalComponents;
+    const unsearched = term ? _RenderTracker.RenderTracker.getFilteredRenders("").length : 0;
+    const content = (0, _sharedUi.resolveListEmptyState)({
+      subject: "components",
+      verb: "tracked",
+      search: searchText,
+      // The denominator is what the FILTERS left, not the raw tracker count —
+      // "clear the search to see them" has to be true of what you get back.
+      total: term ? unsearched : totalTracked,
+      capturing: isTracking,
+      blocked: term && unsearched === 0 && totalTracked > 0 ? "The active filters hide everything tracked, so there is nothing to search." : undefined,
+      waiting: {
+        // stare = "watching for a specific event; recording armed".
+        otto: "stare",
+        title: "No renders tracked",
+        message: "Component renders will appear here"
+      },
+      paused: {
+        title: "No renders tracked",
+        message: "Enable tracking to start capturing"
+      }
+    });
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolEmptyState, {
+      ...content,
+      testID: "buoy-highlight-empty"
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+    testID: "buoy-highlight-list",
+    ref: flatListRef,
+    data: visibleRenders,
+    renderItem: renderItem,
+    keyExtractor: keyExtractor,
+    contentContainerStyle: styles.listContent,
+    showsVerticalScrollIndicator: true,
+    initialNumToRender: 10,
+    maxToRenderPerBatch: 10,
+    windowSize: 10,
+    scrollEnabled: false,
+    ListFooterComponent: renderFooter
+  });
+}
+
+// Memoize to prevent re-renders from parent state changes
+const IsolatedRenderList = exports.IsolatedRenderList = /*#__PURE__*/(0, _react.memo)(IsolatedRenderListInner);
+const styles = _reactNative.StyleSheet.create({
+  listContent: {
+    paddingTop: 8
+  },
+  lockedBanner: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    marginTop: 8,
+    gap: 8
+  },
+  lockedBannerText: {
+    color: _sharedUi.night.color.warning,
+    fontSize: 13,
+    fontWeight: "500"
+  },
+  lockedBannerSubtext: {
+    color: _sharedUi.night.color.textTertiary,
+    fontSize: 12
+  }
+});
+var _default = exports.default = IsolatedRenderList;