@buoy-gg/highlight-updates 2.0.2

package/README.md

@@ -0,0 +1,210 @@
+# @buoy/highlight-updates
+
+Control React DevTools' "Highlight updates when components render" feature directly from your React Native app.
+
+## Overview
+
+This tool intercepts the React DevTools agent's `drawTraceUpdates` event to provide programmatic control over component render highlighting. When DevTools has "Highlight updates when components render" enabled, this tool lets you toggle the highlighting on/off without navigating to DevTools settings.
+
+## Installation
+
+```bash
+npm install @buoy/highlight-updates
+# or
+yarn add @buoy/highlight-updates
+# or
+pnpm add @buoy/highlight-updates
+```
+
+## Usage
+
+### With FloatingDevTools (Recommended)
+
+The easiest way to use this tool is with the FloatingDevTools menu:
+
+```tsx
+import { FloatingDevTools, autoDiscoverPresets } from '@buoy/core';
+
+// The highlight updates tool is automatically discovered if installed
+const apps = autoDiscoverPresets();
+
+function App() {
+  return (
+    <FloatingDevTools apps={apps}>
+      <YourApp />
+    </FloatingDevTools>
+  );
+}
+```
+
+Or explicitly add the preset:
+
+```tsx
+import { FloatingDevTools } from '@buoy/core';
+import { highlightUpdatesPreset } from '@buoy/highlight-updates';
+
+function App() {
+  return (
+    <FloatingDevTools apps={[highlightUpdatesPreset]}>
+      <YourApp />
+    </FloatingDevTools>
+  );
+}
+```
+
+### Standalone Controller
+
+You can also use the controller directly without the FloatingDevTools menu:
+
+```tsx
+import { HighlightUpdatesController } from '@buoy/highlight-updates';
+
+// Initialize when DevTools is connected
+HighlightUpdatesController.initialize();
+
+// Toggle highlights
+HighlightUpdatesController.toggle();
+
+// Enable/disable directly
+HighlightUpdatesController.enable();
+HighlightUpdatesController.disable();
+
+// Check state
+const isEnabled = HighlightUpdatesController.isEnabled();
+
+// Subscribe to state changes
+const unsubscribe = HighlightUpdatesController.subscribe((enabled) => {
+  console.log('Highlights enabled:', enabled);
+});
+
+// Cleanup when done
+HighlightUpdatesController.destroy();
+```
+
+### Custom Configuration
+
+Create a customized version of the tool:
+
+```tsx
+import { createHighlightUpdatesTool } from '@buoy/highlight-updates';
+
+const myHighlightTool = createHighlightUpdatesTool({
+  name: 'RENDERS',
+  enabledColor: '#ec4899', // Pink when enabled
+  disabledColor: '#9ca3af', // Gray when disabled
+  autoInitialize: true, // Initialize automatically
+});
+```
+
+## Requirements
+
+For this tool to work:
+
+1. **React DevTools must be connected** (Chrome DevTools or Flipper)
+2. **"Highlight updates when components render" must be enabled** in DevTools Profiler settings
+
+This tool then allows you to temporarily disable the highlighting without going back to DevTools settings.
+
+## How It Works
+
+The tool intercepts the DevTools agent's `drawTraceUpdates` event listener. When disabled, it simply doesn't forward the event to the original handler, effectively blocking the highlight rendering.
+
+```
+React DevTools Frontend (Chrome/Flipper)
+    | (sends drawTraceUpdates event)
+    v
+React DevTools Agent
+    | (event intercepted by HighlightUpdatesController)
+    v
+HighlightUpdatesController.controlledListener
+    | (if enabled, forwards to original)
+    v
+DebuggingOverlayRegistry (original listener)
+    | (processes component bounds)
+    v
+DebuggingOverlay (native component)
+    | (renders highlights on screen)
+```
+
+## API Reference
+
+### `highlightUpdatesPreset`
+
+Pre-configured preset for use with FloatingDevTools.
+
+### `createHighlightUpdatesTool(options?)`
+
+Factory function to create a customized tool.
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `name` | `string` | `"UPDATES"` | Display name in the menu |
+| `description` | `string` | `"Toggle component render highlights"` | Tool description |
+| `enabledColor` | `string` | `"#10b981"` | Icon color when enabled (green) |
+| `disabledColor` | `string` | `"#6b7280"` | Icon color when disabled (gray) |
+| `id` | `string` | `"highlight-updates"` | Unique tool identifier |
+| `autoInitialize` | `boolean` | `false` | Initialize automatically on load |
+
+### `HighlightUpdatesController`
+
+Standalone controller for programmatic use.
+
+| Method | Description |
+|--------|-------------|
+| `initialize()` | Initialize the controller. Returns `true` on success. |
+| `enable()` | Enable highlight rendering |
+| `disable()` | Disable highlight rendering |
+| `toggle()` | Toggle the enabled state |
+| `isEnabled()` | Get current enabled state |
+| `setEnabled(enabled)` | Set enabled state |
+| `isInitialized()` | Check if controller is initialized |
+| `subscribe(callback)` | Subscribe to state changes. Returns unsubscribe function. |
+| `destroy()` | Cleanup and restore original listener |
+
+## Console Access
+
+When in development mode, the controller is exposed globally:
+
+```javascript
+// In Chrome DevTools console
+window.__HIGHLIGHT_UPDATES_CONTROLLER__.toggle();
+window.__HIGHLIGHT_UPDATES_CONTROLLER__.isEnabled();
+```
+
+## Troubleshooting
+
+### Controller Not Initializing
+
+**Problem:** `initialize()` returns false
+
+**Solutions:**
+1. Check DevTools is connected: `window.__REACT_DEVTOOLS_GLOBAL_HOOK__.reactDevtoolsAgent`
+2. Add initialization delay: Wait 1-2 seconds after app launch
+3. Ensure "Highlight updates" is enabled in DevTools first
+
+### Highlights Still Showing After Disable
+
+**Problem:** Highlights appear even when disabled
+
+**Solutions:**
+1. Verify controller is initialized: `HighlightUpdatesController.isInitialized()`
+2. Check enabled state: `HighlightUpdatesController.isEnabled()`
+3. Ensure listener was properly intercepted (check console logs)
+
+## Development
+
+### Building
+
+```bash
+pnpm build
+```
+
+### Type Checking
+
+```bash
+pnpm typecheck
+```
+
+## License
+
+MIT

package/lib/commonjs/highlight-updates/HighlightUpdatesOverlay.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.HighlightUpdatesOverlay=HighlightUpdatesOverlay,exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_sharedUi=require("@buoy-gg/shared-ui"),_HighlightUpdatesController=_interopRequireDefault(require("./utils/HighlightUpdatesController")),_PerformanceLogger=require("./utils/PerformanceLogger"),_RenderTracker=require("./utils/RenderTracker"),_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,i=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var a,o,n={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return n;if(a=t?i:r){if(a.has(e))return a.get(e);a.set(e,n)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((o=(a=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(o.get||o.set)?a(n,t,o):n[t]=e[t]);return n})(e,t)}const HIGHLIGHT_DURATION=1e3;function HighlightUpdatesOverlay({onBadgePress:e}={}){const[t,r]=(0,_react.useState)([]),[i,a]=(0,_react.useState)(()=>_HighlightUpdatesController.default.getFrozen()),[o,n]=(0,_react.useState)(null),l=(0,_react.useRef)(null),s=(0,_react.useRef)(0),c=(0,_react.useRef)(0),u=(0,_react.useRef)(i);u.current=i,_PerformanceLogger.PerformanceLogger.isEnabled()&&(s.current=performance.now(),c.current=t.length),(0,_react.useLayoutEffect)(()=>{if(_PerformanceLogger.PerformanceLogger.isEnabled()&&s.current>0&&c.current>0){const e=performance.now()-s.current;(0,_PerformanceLogger.markOverlayRendered)(c.current,e)}}),(0,_react.useEffect)(()=>_HighlightUpdatesController.default.subscribeToFreeze(e=>{a(e)}),[]),(0,_react.useEffect)(()=>_RenderTracker.RenderTracker.subscribeToFilters(()=>{r(e=>e.filter(e=>{const t=_RenderTracker.RenderTracker.getRender(String(e.id));return!t||_RenderTracker.RenderTracker.shouldShowRender(t)}))}),[]),(0,_react.useEffect)(()=>(_HighlightUpdatesController.default.setSpotlightCallback(e=>{n(e)}),()=>{_HighlightUpdatesController.default.setSpotlightCallback(null)}),[]);const d=(0,_react.useCallback)(e=>{const t=Date.now(),i=e.map(e=>({...e,timestamp:t}));r(e=>{const t=[...e];for(const e of i){const r=t.findIndex(t=>t.id===e.id);r>=0?t[r]=e:t.push(e)}return t})},[]);(0,_react.useEffect)(()=>(_HighlightUpdatesController.default.setHighlightCallback(d),l.current=setInterval(()=>{if(u.current)return;const e=Date.now();r(t=>t.filter(t=>e-t.timestamp<HIGHLIGHT_DURATION))},50),()=>{_HighlightUpdatesController.default.setHighlightCallback(null),l.current&&clearInterval(l.current)}),[d]);const h=e||_HighlightUpdatesController.default.getBadgePressCallback(),g=(0,_react.useCallback)(t=>{e?e(t):_HighlightUpdatesController.default.handleBadgePress(t)},[e]),_=o?_RenderTracker.RenderTracker.getRender(String(o)):null;return 0!==t.length||_?.measurements?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.overlay,pointerEvents:"box-none",nativeID:"highlight-updates-overlay",children:[_?.measurements&&(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",nativeID:"__spotlight_highlight__",style:[styles.spotlightHighlight,{left:_.measurements.x-3,top:_.measurements.y-3,width:_.measurements.width+6,height:_.measurements.height+6}]}),(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",style:[styles.spotlightLabel,{left:_.measurements.x,top:_.measurements.y+_.measurements.height+4}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.spotlightLabelText,children:_.componentName||_.displayName||_.viewType})})]}),t.map(e=>(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"box-none",nativeID:`__highlight_rect_${e.id}__`,style:[styles.highlight,{left:e.x,top:e.y,width:e.width,height:e.height,borderColor:e.color}],children:e.count>0&&(h?(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:()=>g(e.id),style:[styles.badge,{backgroundColor:e.color}],activeOpacity:.7,hitSlop:{top:8,bottom:8,left:8,right:8},children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.badgeText,nativeID:`__highlight_text_${e.id}__`,children:e.count})}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.badge,{backgroundColor:e.color}],nativeID:`__highlight_badge_${e.id}__`,pointerEvents:"none",children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.badgeText,nativeID:`__highlight_text_${e.id}__`,children:e.count})}))},`highlight-${e.id}`))]}):null}const styles=_reactNative.StyleSheet.create({overlay:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:999999,elevation:999999,borderWidth:0},highlight:{position:"absolute",borderWidth:2,borderStyle:"solid",backgroundColor:"transparent"},badge:{position:"absolute",top:0,right:0,height:14,borderRadius:0,justifyContent:"center",alignItems:"center",paddingHorizontal:2},badgeText:{color:"#000",fontSize:9,fontWeight:"bold"},spotlightHighlight:{position:"absolute",borderWidth:2,borderStyle:"dashed",borderColor:_sharedUi.buoyColors.primary,backgroundColor:"transparent"},spotlightLabel:{position:"absolute",backgroundColor:_sharedUi.buoyColors.card,borderWidth:1,borderColor:_sharedUi.buoyColors.primary,paddingHorizontal:8,paddingVertical:3,borderRadius:4},spotlightLabelText:{color:_sharedUi.buoyColors.primary,fontSize:11,fontWeight:"600",fontFamily:"monospace"}});var _default=exports.default=HighlightUpdatesOverlay;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.HighlightFilterView=HighlightFilterView,exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_sharedUi=require("@buoy-gg/shared-ui"),_IdentifierBadge=require("./IdentifierBadge"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var s=new WeakMap,i=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var r,n,o={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return o;if(r=t?i:s){if(r.has(e))return r.get(e);r.set(e,o)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((n=(r=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(n.get||n.set)?r(o,t,n):o[t]=e[t]);return o})(e,t)}const getFilterConfig=e=>_IdentifierBadge.IDENTIFIER_CONFIG[e],FILTER_TYPES=["any","viewType","testID","nativeID","component","accessibilityLabel"];function TypePicker({onSelect:e,onCancel:t}){return(0,_jsxRuntime.jsxs)(_reactNative.View,{nativeID:"__rn_buoy__type-picker",style:styles.typePicker,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.typePickerRow,children:FILTER_TYPES.map(t=>{const s=getFilterConfig(t),i=s.icon;return(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:[styles.typeOption,{backgroundColor:s.color+"15",borderColor:s.color+"40"}],onPress:()=>e(t),children:[(0,_jsxRuntime.jsx)(i,{size:14,color:s.color}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.typeOptionText,{color:s.color}],children:s.label})]},t)})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:t,style:styles.typePickerCancel,children:(0,_jsxRuntime.jsx)(_sharedUi.X,{size:16,color:_sharedUi.buoyColors.textMuted})})]})}function PatternInput({type:e,onSubmit:t,onCancel:s}){const[i,r]=(0,_react.useState)(""),n=getFilterConfig(e),o=()=>{i.trim()&&t(i.trim())};return(0,_jsxRuntime.jsxs)(_reactNative.View,{nativeID:"__rn_buoy__pattern-input",style:styles.patternInputContainer,children:[(0,_jsxRuntime.jsx)(_IdentifierBadge.IdentifierBadge,{type:e,value:"",badgeOnly:!0,compact:!0}),(0,_jsxRuntime.jsx)(_reactNative.TextInput,{value:i,onChangeText:r,onSubmitEditing:o,placeholder:"Enter pattern...",placeholderTextColor:_sharedUi.buoyColors.textMuted,style:styles.patternInput,autoFocus:!0,returnKeyType:"done",autoCorrect:!1,autoCapitalize:"none"}),i.trim()&&(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:o,style:[styles.addPatternButton,{backgroundColor:n.color+"20"}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.addPatternButtonText,{color:n.color}],children:"Add"})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:s,style:styles.cancelButton,children:(0,_jsxRuntime.jsx)(_sharedUi.X,{size:16,color:_sharedUi.buoyColors.textMuted})})]})}function PatternChip({pattern:e,onRemove:t}){const s=getFilterConfig(e.type);return(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:[styles.patternChip,{borderColor:s.color+"40"}],onPress:t,activeOpacity:.7,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.patternChipBadge,{backgroundColor:s.color+"20"}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.patternChipBadgeText,{color:s.color}],children:s.shortLabel})}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.patternChipValue,numberOfLines:1,children:e.value}),(0,_jsxRuntime.jsx)(_sharedUi.X,{size:12,color:_sharedUi.buoyColors.textMuted,style:styles.patternChipX})]})}const ALL_CATEGORY_CONFIG={label:"All",shortLabel:"All",color:_sharedUi.buoyColors.textSecondary,icon:_sharedUi.Box};function DetectedCategoryBadge({filterType:e,count:t,isSelected:s,onPress:i}){const r="all"===e?ALL_CATEGORY_CONFIG:getFilterConfig(e);return(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:[styles.categoryBadge,{backgroundColor:r.color+"15",borderColor:s?r.color:r.color+"40",borderWidth:s?2:1}],onPress:i,children:[(0,_jsxRuntime.jsx)(r.icon,{size:12,color:r.color}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.categoryBadgeText,{color:r.color}],children:r.label}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.categoryBadgeCountBubble,{backgroundColor:r.color+"25"}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.categoryBadgeCount,{color:r.color}],children:t})})]})}const BATCH_SIZE_PRESETS=[{value:20,label:"20"},{value:50,label:"50"},{value:100,label:"100"},{value:150,label:"150"},{value:250,label:"250"},{value:500,label:"500"}],DEBUG_LOG_LEVEL_PRESETS=[{value:"off",label:"Off",description:"No debug logging"},{value:"minimal",label:"Minimal",description:"Only hook value changes"},{value:"verbose",label:"Verbose",description:"Component + cause + changes"},{value:"all",label:"All",description:"Full fiber dump"}];function HighlightFilterView({filters:e,onFilterChange:t,settings:s,onSettingsChange:i,availableProps:r,activeTab:n}){const[o,a]=(0,_react.useState)(!1),[l,c]=(0,_react.useState)(!1),[d,u]=(0,_react.useState)(null),[y,x]=(0,_react.useState)(null),[_,p]=(0,_react.useState)("all"),[h,g]=(0,_react.useState)(null),m=(e=>{switch(e){case"viewType":return r.viewTypes.map(e=>({value:e,type:"viewType"}));case"testID":return r.testIDs.map(e=>({value:e,type:"testID"}));case"nativeID":return r.nativeIDs.map(e=>({value:e,type:"nativeID"}));case"component":return r.componentNames.map(e=>({value:e,type:"component"}));case"accessibilityLabel":return r.accessibilityLabels.map(e=>({value:e,type:"accessibilityLabel"}));default:return[...r.viewTypes.map(e=>({value:e,type:"viewType"})),...r.testIDs.map(e=>({value:e,type:"testID"})),...r.nativeIDs.map(e=>({value:e,type:"nativeID"})),...r.componentNames.map(e=>({value:e,type:"component"})),...r.accessibilityLabels.map(e=>({value:e,type:"accessibilityLabel"}))]}})(_),b=r.viewTypes.length+r.testIDs.length+r.nativeIDs.length+r.componentNames.length+r.accessibilityLabels.length,j=(0,_react.useCallback)((s,i)=>{const r=[...e.includePatterns,{type:s,value:i}];t({includePatterns:r}),u(null)},[e.includePatterns,t]),C=(0,_react.useCallback)((s,i)=>{const r=[...e.excludePatterns,{type:s,value:i}];t({excludePatterns:r}),x(null)},[e.excludePatterns,t]),R=(0,_react.useCallback)(s=>{const i=e.includePatterns.filter((e,t)=>t!==s);t({includePatterns:i})},[e.includePatterns,t]),v=(0,_react.useCallback)(s=>{const i=e.excludePatterns.filter((e,t)=>t!==s);t({excludePatterns:i})},[e.excludePatterns,t]),T=(0,_react.useCallback)((e,t)=>{g({type:e,value:t})},[]),f=(0,_react.useCallback)(()=>{h&&(j(h.type,h.value),g(null))},[h,j]),S=(0,_react.useCallback)(()=>{h&&(C(h.type,h.value),g(null))},[h,C]);return(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.container,children:(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{nativeID:"__rn_buoy__filter-view",style:styles.scrollView,contentContainerStyle:styles.scrollContent,showsVerticalScrollIndicator:!1,children:"filters"===n?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.section,children:[(0,_jsxRuntime.jsxs)(_sharedUi.SectionHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon,{icon:_sharedUi.Eye,color:_sharedUi.buoyColors.success,size:12}),(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Title,{children:"INCLUDE ONLY"}),e.includePatterns.length>0&&(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Badge,{count:e.includePatterns.length,color:_sharedUi.buoyColors.success})]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.sectionDescription,children:"Show only components matching these patterns. If any are set, components must match at least one."}),e.includePatterns.length>0&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.patternChips,children:e.includePatterns.map((e,t)=>(0,_jsxRuntime.jsx)(PatternChip,{pattern:e,onRemove:()=>R(t)},`${e.type}-${e.value}-${t}`))}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.addPatternRow,children:o?(0,_jsxRuntime.jsx)(TypePicker,{onSelect:e=>{a(!1),u(e)},onCancel:()=>a(!1)}):d?(0,_jsxRuntime.jsx)(PatternInput,{type:d,onSubmit:e=>j(d,e),onCancel:()=>u(null)}):(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:[styles.addButton,{borderColor:_sharedUi.buoyColors.success+"40"}],onPress:()=>a(!0),children:[(0,_jsxRuntime.jsx)(_sharedUi.Plus,{size:14,color:_sharedUi.buoyColors.success}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.addButtonText,{color:_sharedUi.buoyColors.success}],children:"Add include pattern"})]})})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.section,children:[(0,_jsxRuntime.jsxs)(_sharedUi.SectionHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon,{icon:_sharedUi.Filter,color:_sharedUi.buoyColors.primary,size:12}),(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Title,{children:"EXCLUDE"}),e.excludePatterns.length>0&&(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Badge,{count:e.excludePatterns.length,color:_sharedUi.buoyColors.primary})]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.sectionDescription,children:"Hide components matching these patterns from the list."}),e.excludePatterns.length>0&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.patternChips,children:e.excludePatterns.map((e,t)=>(0,_jsxRuntime.jsx)(PatternChip,{pattern:e,onRemove:()=>v(t)},`${e.type}-${e.value}-${t}`))}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.addPatternRow,children:l?(0,_jsxRuntime.jsx)(TypePicker,{onSelect:e=>{c(!1),x(e)},onCancel:()=>c(!1)}):y?(0,_jsxRuntime.jsx)(PatternInput,{type:y,onSubmit:e=>C(y,e),onCancel:()=>x(null)}):(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:[styles.addButton,{borderColor:_sharedUi.buoyColors.primary+"40"}],onPress:()=>c(!0),children:[(0,_jsxRuntime.jsx)(_sharedUi.Plus,{size:14,color:_sharedUi.buoyColors.primary}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.addButtonText,{color:_sharedUi.buoyColors.primary}],children:"Add exclude pattern"})]})})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.section,children:[(0,_jsxRuntime.jsxs)(_sharedUi.SectionHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon,{icon:_sharedUi.Hash,color:_sharedUi.buoyColors.warning,size:12}),(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Title,{children:"RENDER COUNT RANGE"}),(void 0!==e.minRenderCount||void 0!==e.maxRenderCount)&&(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Badge,{count:1,color:_sharedUi.buoyColors.warning})]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.sectionDescription,children:"Show only components with render count in a specific range."}),(0,_jsxRuntime.jsxs)(_reactNative.View,{nativeID:"__rn_buoy__render-count-range",style:styles.renderCountRangeContainer,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.renderCountInputRow,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.renderCountInputGroup,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.renderCountLabel,children:"Min"}),(0,_jsxRuntime.jsx)(_reactNative.TextInput,{value:void 0!==e.minRenderCount?String(e.minRenderCount):"",onChangeText:e=>{const s=parseInt(e,10);""===e||void 0===e?t({minRenderCount:void 0}):!isNaN(s)&&s>=0&&t({minRenderCount:s})},placeholder:"0",placeholderTextColor:_sharedUi.buoyColors.textMuted,style:styles.renderCountInput,keyboardType:"number-pad",returnKeyType:"done"})]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.renderCountSeparator,children:"to"}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.renderCountInputGroup,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.renderCountLabel,children:"Max"}),(0,_jsxRuntime.jsx)(_reactNative.TextInput,{value:void 0!==e.maxRenderCount?String(e.maxRenderCount):"",onChangeText:e=>{const s=parseInt(e,10);""===e||void 0===e?t({maxRenderCount:void 0}):!isNaN(s)&&s>=0&&t({maxRenderCount:s})},placeholder:"∞",placeholderTextColor:_sharedUi.buoyColors.textMuted,style:styles.renderCountInput,keyboardType:"number-pad",returnKeyType:"done"})]})]}),(void 0!==e.minRenderCount||void 0!==e.maxRenderCount)&&(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:styles.clearRangeButton,onPress:()=>t({minRenderCount:void 0,maxRenderCount:void 0}),children:[(0,_jsxRuntime.jsx)(_sharedUi.X,{size:12,color:_sharedUi.buoyColors.warning}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.clearRangeButtonText,children:"Clear Range"})]})]})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.section,children:[(0,_jsxRuntime.jsxs)(_sharedUi.SectionHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon,{icon:_sharedUi.Box,color:_sharedUi.buoyColors.textSecondary,size:12}),(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Title,{children:"DETECTED ITEMS"})]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.sectionDescription,children:"Tap an item to quickly add it as an exclude pattern."}),(0,_jsxRuntime.jsxs)(_reactNative.ScrollView,{horizontal:!0,showsHorizontalScrollIndicator:!1,style:styles.categoryBadgeScroll,contentContainerStyle:styles.categoryBadgeScrollContent,children:[b>0&&(0,_jsxRuntime.jsx)(DetectedCategoryBadge,{filterType:"all",count:b,isSelected:"all"===_,onPress:()=>p("all")}),r.viewTypes.length>0&&(0,_jsxRuntime.jsx)(DetectedCategoryBadge,{filterType:"viewType",count:r.viewTypes.length,isSelected:"viewType"===_,onPress:()=>p("viewType")}),r.testIDs.length>0&&(0,_jsxRuntime.jsx)(DetectedCategoryBadge,{filterType:"testID",count:r.testIDs.length,isSelected:"testID"===_,onPress:()=>p("testID")}),r.nativeIDs.length>0&&(0,_jsxRuntime.jsx)(DetectedCategoryBadge,{filterType:"nativeID",count:r.nativeIDs.length,isSelected:"nativeID"===_,onPress:()=>p("nativeID")}),r.componentNames.length>0&&(0,_jsxRuntime.jsx)(DetectedCategoryBadge,{filterType:"component",count:r.componentNames.length,isSelected:"component"===_,onPress:()=>p("component")}),r.accessibilityLabels.length>0&&(0,_jsxRuntime.jsx)(DetectedCategoryBadge,{filterType:"accessibilityLabel",count:r.accessibilityLabels.length,isSelected:"accessibilityLabel"===_,onPress:()=>p("accessibilityLabel")})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{nativeID:"__rn_buoy__detected-items",style:styles.detectedItemsContainer,children:m.length>0?(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{style:styles.detectedItemsScroll,contentContainerStyle:styles.detectedItems,nestedScrollEnabled:!0,showsVerticalScrollIndicator:!0,children:m.map(e=>{const t=getFilterConfig(e.type);return(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:[styles.detectedItem,{borderColor:t.color+"40"}],onPress:()=>T(e.type,e.value),children:"all"===_?(0,_jsxRuntime.jsx)(_IdentifierBadge.IdentifierBadge,{type:e.type,value:e.value,compact:!0,shortLabel:!0}):(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.detectedItemText,numberOfLines:1,children:e.value})},`${e.type}-${e.value}`)})}):(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.emptyText,children:"No items detected yet. Start tracking to see components here."})})]}),(0,_jsxRuntime.jsx)(_reactNative.Modal,{visible:null!==h,transparent:!0,animationType:"fade",onRequestClose:()=>g(null),children:(0,_jsxRuntime.jsx)(_reactNative.Pressable,{style:styles.modalOverlay,onPress:()=>g(null),children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.actionPopup,children:h&&(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.actionPopupHeader,children:(0,_jsxRuntime.jsx)(_IdentifierBadge.IdentifierBadge,{type:h.type,value:h.value,compact:!0,shortLabel:!0})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.actionPopupButtons,children:[(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:[styles.actionPopupButton,styles.actionPopupInclude],onPress:f,children:[(0,_jsxRuntime.jsx)(_sharedUi.Eye,{size:16,color:_sharedUi.buoyColors.success}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.actionPopupButtonText,{color:_sharedUi.buoyColors.success}],children:"Include Only"})]}),(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:[styles.actionPopupButton,styles.actionPopupExclude],onPress:S,children:[(0,_jsxRuntime.jsx)(_sharedUi.Filter,{size:16,color:_sharedUi.buoyColors.primary}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.actionPopupButtonText,{color:_sharedUi.buoyColors.primary}],children:"Exclude"})]})]}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:styles.actionPopupCancel,onPress:()=>g(null),children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.actionPopupCancelText,children:"Cancel"})})]})})})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.section,children:[(0,_jsxRuntime.jsxs)(_sharedUi.SectionHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon,{icon:_sharedUi.Filter,color:_sharedUi.buoyColors.textMuted,size:12}),(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Title,{children:"HOW FILTERS WORK"})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.howItWorks,children:(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.howItWorksText,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.howItWorksBold,children:"Any:"})," Matches against all fields","\n",(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.howItWorksBold,children:"ViewType:"})," Native component class (RCTView, RCTText)","\n",(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.howItWorksBold,children:"testID:"})," Component testID prop","\n",(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.howItWorksBold,children:"Component:"})," React component name from fiber"]})})]})]}):(0,_jsxRuntime.jsx)(_jsxRuntime.Fragment,{children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.section,children:[(0,_jsxRuntime.jsxs)(_sharedUi.SectionHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon,{icon:_sharedUi.Settings,color:_sharedUi.buoyColors.textMuted,size:12}),(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Title,{children:"SETTINGS"})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.settingsSection,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.settingItem,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.settingHeader,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.settingLabel,children:"Show Render Count"}),(0,_jsxRuntime.jsx)(_reactNative.Switch,{value:s.showRenderCount,onValueChange:e=>{i({showRenderCount:e}),!e&&s.trackRenderCauses&&i({trackRenderCauses:!1})},trackColor:{false:_sharedUi.buoyColors.input,true:_sharedUi.buoyColors.success+"80"},thumbColor:s.showRenderCount?_sharedUi.buoyColors.success:_sharedUi.buoyColors.textMuted})]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.settingDescription,children:"Display render count badge on highlights. Disabling improves performance by skipping count tracking."})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.settingItem,styles.settingItemSpaced],children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.settingHeader,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.settingLabel,!s.showRenderCount&&styles.settingLabelDisabled],children:"Track Render Causes"}),(0,_jsxRuntime.jsx)(_reactNative.Switch,{value:s.trackRenderCauses,onValueChange:e=>i({trackRenderCauses:e}),trackColor:{false:_sharedUi.buoyColors.input,true:_sharedUi.buoyColors.warning+"80"},thumbColor:s.trackRenderCauses?_sharedUi.buoyColors.warning:_sharedUi.buoyColors.textMuted,disabled:!s.showRenderCount})]}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.settingDescription,children:["Detect WHY components render (props, hooks, parent re-render).",!s.showRenderCount&&(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.settingWarning,children:["\n",'Requires "Show Render Count" to be enabled.']})]})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.settingItem,styles.settingItemSpaced],children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.settingHeader,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.settingLabel,!s.trackRenderCauses&&styles.settingLabelDisabled],children:"Enable Render History"}),(0,_jsxRuntime.jsx)(_reactNative.Switch,{value:s.enableRenderHistory,onValueChange:e=>i({enableRenderHistory:e}),trackColor:{false:_sharedUi.buoyColors.input,true:_sharedUi.buoyColors.primary+"80"},thumbColor:s.enableRenderHistory?_sharedUi.buoyColors.primary:_sharedUi.buoyColors.textMuted,disabled:!s.trackRenderCauses})]}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.settingDescription,children:["Store render events for each component to view in the History tab.",!s.trackRenderCauses&&(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.settingWarning,children:["\n",'Requires "Track Render Causes" to be enabled.']})]})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.settingItem,styles.settingItemSpaced],children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.settingHeader,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.settingLabel,children:"Debug Log Level"}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.settingValue,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.settingValueText,"off"!==s.debugLogLevel&&{color:_sharedUi.buoyColors.warning}],children:DEBUG_LOG_LEVEL_PRESETS.find(e=>e.value===s.debugLogLevel)?.label||"Off"})})]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.settingDescription,children:"Control console logging verbosity for render cause detection."}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.batchSizePresets,children:DEBUG_LOG_LEVEL_PRESETS.map(e=>(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:[styles.batchSizePreset,s.debugLogLevel===e.value&&styles.batchSizePresetActive,"off"!==e.value&&s.debugLogLevel===e.value&&{backgroundColor:_sharedUi.buoyColors.warning+"30",borderColor:_sharedUi.buoyColors.warning}],onPress:()=>i({debugLogLevel:e.value}),children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.batchSizePresetText,s.debugLogLevel===e.value&&styles.batchSizePresetTextActive,"off"!==e.value&&s.debugLogLevel===e.value&&{color:_sharedUi.buoyColors.warning}],children:e.label})},e.value))}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.settingDescriptionMuted,children:[DEBUG_LOG_LEVEL_PRESETS.find(e=>e.value===s.debugLogLevel)?.description,"off"!==s.debugLogLevel&&" • Check Metro console for logs"]})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.settingItem,styles.settingItemSpaced],children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.settingHeader,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.settingLabel,children:"Batch Size"}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.settingValue,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.settingValueText,children:s.batchSize})})]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.settingDescription,children:"Maximum components to highlight per render update. Higher values capture more re-renders but may impact performance on complex screens."}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.batchSizePresets,children:BATCH_SIZE_PRESETS.map(e=>(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:[styles.batchSizePreset,s.batchSize===e.value&&styles.batchSizePresetActive],onPress:()=>i({batchSize:e.value}),children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.batchSizePresetText,s.batchSize===e.value&&styles.batchSizePresetTextActive],children:e.label})},e.value))})]})]})]})})})})}const styles=_reactNative.StyleSheet.create({container:{flex:1,backgroundColor:_sharedUi.buoyColors.base},scrollView:{flex:1},scrollContent:{paddingHorizontal:16,paddingTop:12,paddingBottom:32},section:{backgroundColor:_sharedUi.buoyColors.card,borderRadius:8,borderWidth:1,borderColor:_sharedUi.buoyColors.border+"50",marginBottom:12,overflow:"hidden"},sectionDescription:{fontSize:11,color:_sharedUi.buoyColors.textSecondary,paddingHorizontal:16,paddingTop:8,lineHeight:16},patternChips:{flexDirection:"row",flexWrap:"wrap",gap:8,paddingHorizontal:16,paddingTop:12},patternChip:{flexDirection:"row",alignItems:"center",backgroundColor:_sharedUi.buoyColors.input,borderRadius:6,borderWidth:1,paddingVertical:4,paddingLeft:4,paddingRight:6,maxWidth:"100%",gap:4},patternChipBadge:{paddingVertical:2,paddingHorizontal:5,borderRadius:4},patternChipBadgeText:{fontSize:9,fontWeight:"700"},patternChipValue:{fontSize:11,color:_sharedUi.buoyColors.text,fontFamily:"monospace",flexShrink:1},patternChipX:{marginLeft:2},addPatternRow:{paddingHorizontal:16,paddingTop:12,paddingBottom:16},addButton:{flexDirection:"row",alignItems:"center",justifyContent:"center",paddingVertical:10,paddingHorizontal:16,borderRadius:8,borderWidth:1,borderStyle:"dashed",gap:6},addButtonText:{fontSize:12,fontWeight:"500"},typePicker:{flexDirection:"row",alignItems:"center",gap:8},typePickerRow:{flex:1,flexDirection:"row",flexWrap:"wrap",gap:8},typeOption:{flexDirection:"row",alignItems:"center",paddingVertical:8,paddingHorizontal:12,borderRadius:6,borderWidth:1,backgroundColor:_sharedUi.buoyColors.input,gap:6},typeOptionText:{fontSize:11,fontWeight:"600"},typePickerCancel:{padding:8},patternInputContainer:{flexDirection:"row",alignItems:"center",backgroundColor:_sharedUi.buoyColors.input,borderRadius:8,borderWidth:1,borderColor:_sharedUi.buoyColors.border,paddingLeft:4,paddingRight:8,paddingVertical:4,gap:4},patternInput:{flex:1,fontSize:12,color:_sharedUi.buoyColors.text,paddingVertical:6,paddingHorizontal:4},addPatternButton:{paddingVertical:6,paddingHorizontal:10,borderRadius:4},addPatternButtonText:{fontSize:11,fontWeight:"600"},cancelButton:{padding:4},categoryBadgeScroll:{marginTop:12},categoryBadgeScrollContent:{paddingHorizontal:16,gap:8},categoryBadge:{flexDirection:"row",alignItems:"center",paddingVertical:8,paddingLeft:10,paddingRight:6,borderRadius:8,borderWidth:1,gap:6},categoryBadgeText:{fontSize:11,fontWeight:"600"},categoryBadgeCountBubble:{paddingHorizontal:6,paddingVertical:2,borderRadius:10,minWidth:20,alignItems:"center"},categoryBadgeCount:{fontSize:10,fontWeight:"600"},detectedItemsContainer:{paddingHorizontal:16,paddingTop:12,paddingBottom:16},detectedItemsScroll:{maxHeight:200},detectedItems:{flexDirection:"row",flexWrap:"wrap",gap:8},detectedItem:{flexDirection:"row",alignItems:"center",backgroundColor:_sharedUi.buoyColors.input,borderRadius:6,borderWidth:1,paddingVertical:6,paddingHorizontal:10,gap:6},detectedItemText:{fontSize:11,color:_sharedUi.buoyColors.text,fontFamily:"monospace"},emptyText:{fontSize:11,color:_sharedUi.buoyColors.textMuted,fontStyle:"italic",textAlign:"center",paddingVertical:16,paddingHorizontal:16},howItWorks:{paddingHorizontal:16,paddingVertical:12},howItWorksText:{fontSize:11,color:_sharedUi.buoyColors.textMuted,lineHeight:18,fontFamily:"monospace"},howItWorksBold:{fontWeight:"700",color:_sharedUi.buoyColors.textSecondary},modalOverlay:{flex:1,backgroundColor:"rgba(0, 0, 0, 0.5)",justifyContent:"center",alignItems:"center",padding:32},actionPopup:{backgroundColor:_sharedUi.buoyColors.card,borderRadius:12,borderWidth:1,borderColor:_sharedUi.buoyColors.border,width:"100%",maxWidth:300,overflow:"hidden"},actionPopupHeader:{padding:16,borderBottomWidth:1,borderBottomColor:_sharedUi.buoyColors.border+"50",alignItems:"center"},actionPopupButtons:{flexDirection:"row",padding:12,gap:8},actionPopupButton:{flex:1,flexDirection:"row",alignItems:"center",justifyContent:"center",paddingVertical:12,paddingHorizontal:12,borderRadius:8,gap:8},actionPopupInclude:{backgroundColor:_sharedUi.buoyColors.success+"15"},actionPopupExclude:{backgroundColor:_sharedUi.buoyColors.primary+"15"},actionPopupButtonText:{fontSize:13,fontWeight:"600"},actionPopupCancel:{padding:12,borderTopWidth:1,borderTopColor:_sharedUi.buoyColors.border+"50",alignItems:"center"},actionPopupCancelText:{fontSize:13,color:_sharedUi.buoyColors.textMuted,fontWeight:"500"},settingsSection:{paddingHorizontal:16,paddingTop:8,paddingBottom:16},settingItem:{gap:8},settingItemSpaced:{marginTop:16,paddingTop:16,borderTopWidth:1,borderTopColor:_sharedUi.buoyColors.border+"30"},settingHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},settingLabel:{fontSize:13,fontWeight:"600",color:_sharedUi.buoyColors.text},settingValue:{backgroundColor:_sharedUi.buoyColors.textMuted+"20",paddingHorizontal:10,paddingVertical:4,borderRadius:6},settingValueText:{fontSize:12,fontWeight:"700",color:_sharedUi.buoyColors.textMuted,fontFamily:"monospace"},settingDescription:{fontSize:11,color:_sharedUi.buoyColors.textSecondary,lineHeight:16},settingDescriptionMuted:{fontSize:10,color:_sharedUi.buoyColors.textMuted,lineHeight:14,marginTop:4,fontStyle:"italic"},settingLabelDisabled:{color:_sharedUi.buoyColors.textMuted},settingWarning:{color:_sharedUi.buoyColors.warning,fontWeight:"500"},batchSizePresets:{flexDirection:"row",flexWrap:"wrap",gap:8,marginTop:4},batchSizePreset:{paddingVertical:8,paddingHorizontal:14,borderRadius:6,backgroundColor:_sharedUi.buoyColors.input,borderWidth:1,borderColor:_sharedUi.buoyColors.border+"50"},batchSizePresetActive:{backgroundColor:_sharedUi.buoyColors.textMuted+"20",borderColor:_sharedUi.buoyColors.textMuted},batchSizePresetText:{fontSize:12,fontWeight:"500",color:_sharedUi.buoyColors.textSecondary,fontFamily:"monospace"},batchSizePresetTextActive:{color:_sharedUi.buoyColors.textMuted,fontWeight:"700"},renderCountRangeContainer:{paddingHorizontal:16,paddingTop:12,paddingBottom:16,gap:12},renderCountInputRow:{flexDirection:"row",alignItems:"center",gap:12},renderCountInputGroup:{flex:1,gap:4},renderCountLabel:{fontSize:10,fontWeight:"600",color:_sharedUi.buoyColors.textMuted,textTransform:"uppercase",letterSpacing:.5},renderCountInput:{backgroundColor:_sharedUi.buoyColors.input,borderRadius:8,borderWidth:1,borderColor:_sharedUi.buoyColors.border,paddingVertical:10,paddingHorizontal:12,fontSize:14,fontWeight:"600",color:_sharedUi.buoyColors.text,fontFamily:"monospace",textAlign:"center"},renderCountSeparator:{fontSize:12,color:_sharedUi.buoyColors.textMuted,marginTop:18},clearRangeButton:{flexDirection:"row",alignItems:"center",justifyContent:"center",paddingVertical:8,paddingHorizontal:12,borderRadius:6,backgroundColor:_sharedUi.buoyColors.warning+"15",borderWidth:1,borderColor:_sharedUi.buoyColors.warning+"40",gap:6,alignSelf:"center"},clearRangeButtonText:{fontSize:11,fontWeight:"600",color:_sharedUi.buoyColors.warning}});var _default=exports.default=HighlightFilterView;

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

@@ -0,0 +1 @@
+"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"),_HighlightUpdatesController=_interopRequireDefault(require("../utils/HighlightUpdatesController")),_RenderTracker=require("../utils/RenderTracker"),_RenderCauseBadge=require("./RenderCauseBadge"),_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,s,i={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return i;if(n=t?a:r){if(n.has(e))return n.get(e);n.set(e,i)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((s=(n=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(s.get||s.set)?n(i,t,s):i[t]=e[t]);return i})(e,t)}let _useIsPro=null,_licenseLoadAttempted=!1;function loadLicenseModule(){if(!_licenseLoadAttempted){_licenseLoadAttempted=!0;try{const e=require("@buoy-gg/license");e&&(_useIsPro=e.useIsPro??null)}catch{}}}function getUseIsPro(){return loadLicenseModule(),_useIsPro??(()=>!1)}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=_RenderTracker.RenderTracker.getStats(),r=_RenderTracker.RenderTracker.getSettings(),a=(new Date).toISOString(),n=[];n.push("=".repeat(60)),n.push("RENDER TRACKING DATA EXPORT"),n.push("=".repeat(60)),n.push(`Timestamp: ${a}`),n.push(`Total Components: ${t.totalComponents}`),n.push(`Total Renders: ${t.totalRenders}`),n.push(""),n.push("Settings:"),n.push(`  - Show Render Count: ${r.showRenderCount}`),n.push(`  - Track Render Causes: ${r.trackRenderCauses}`),n.push(`  - Batch Size: ${r.batchSize}`),n.push("");const s=[...e].sort((e,t)=>t.renderCount-e.renderCount);n.push("-".repeat(60)),n.push("COMPONENTS BY RENDER COUNT (descending)"),n.push("-".repeat(60)),n.push(""),s.forEach((e,t)=>{const r=e.lastRenderCause?.type,a=e.lastRenderCause?.componentCause,s=e.lastRenderCause&&r?`${_RenderCauseBadge.CAUSE_CONFIG[r].label}${e.lastRenderCause.changedKeys?` [${e.lastRenderCause.changedKeys.join(", ")}]`:""}${e.lastRenderCause.hookIndices?` [Hook ${e.lastRenderCause.hookIndices.join(", ")}]`:""}`:"N/A",i=a?_RenderCauseBadge.COMPONENT_CAUSE_CONFIG[a].label.toUpperCase():"N/A",o=e.lastRenderCause?.componentName||e.componentName;n.push(`${t+1}. ${e.displayName} (${e.viewType}) - ${e.renderCount} renders`),a&&r?n.push(`   Why: ${o||"Component"} (${i}) → Native (${s})`):n.push(`   Last Cause: ${s}`),e.testID&&n.push(`   testID: ${e.testID}`),e.nativeID&&n.push(`   nativeID: ${e.nativeID}`),o&&n.push(`   component: ${o}`),e.accessibilityLabel&&n.push(`   accessibilityLabel: ${e.accessibilityLabel}`),n.push(`   nativeTag: ${e.nativeTag}`);const l=e.lastRenderTime-e.firstRenderTime,c=l>0?(e.renderCount/(l/1e3)).toFixed(2):e.renderCount;n.push(`   Renders/sec: ${c}`),n.push("")}),n.push("-".repeat(60)),n.push("BY VIEW TYPE"),n.push("-".repeat(60));const i=new Map;e.forEach(e=>{const t=i.get(e.viewType)||{count:0,renders:0};t.count++,t.renders+=e.renderCount,i.set(e.viewType,t)}),[...i.entries()].sort((e,t)=>t[1].renders-e[1].renders).forEach(([e,t])=>{n.push(`${e}: ${t.count} components, ${t.renders} total renders`)}),n.push(""),n.push("-".repeat(60)),n.push("BY COMPONENT NAME"),n.push("-".repeat(60));const o=new Map;if(e.forEach(e=>{const t=e.componentName||"(unknown)",r=o.get(t)||{count:0,renders:0};r.count++,r.renders+=e.renderCount,o.set(t,r)}),[...o.entries()].sort((e,t)=>t[1].renders-e[1].renders).forEach(([e,t])=>{n.push(`${e}: ${t.count} instances, ${t.renders} total renders`)}),n.push(""),r.trackRenderCauses){n.push("-".repeat(60)),n.push("BY NATIVE CAUSE (what changed on the native view)"),n.push("-".repeat(60));const t=new Map;e.forEach(e=>{const r=e.lastRenderCause?.type||"unknown";t.set(r,(t.get(r)||0)+1)}),[...t.entries()].sort((e,t)=>t[1]-e[1]).forEach(([e,t])=>{const r=_RenderCauseBadge.CAUSE_CONFIG[e];n.push(`${r?.label||e}: ${t} components`)}),n.push(""),n.push("-".repeat(60)),n.push("BY COMPONENT CAUSE (why the React component re-rendered)"),n.push("-".repeat(60));const r=new Map;e.forEach(e=>{const t=e.lastRenderCause?.componentCause||"unknown";r.set(t,(r.get(t)||0)+1)}),[...r.entries()].sort((e,t)=>t[1]-e[1]).forEach(([e,t])=>{const r=_RenderCauseBadge.COMPONENT_CAUSE_CONFIG[e];n.push(`${r?.label?.toUpperCase()||e}: ${t} components`)}),n.push("");const a=e.filter(e=>"parent"===e.lastRenderCause?.componentCause);a.length>0&&(n.push("-".repeat(60)),n.push("💡 OPTIMIZATION OPPORTUNITIES"),n.push("-".repeat(60)),n.push(`${a.length} component(s) re-rendered due to parent:`),a.forEach(e=>{const t=e.lastRenderCause?.componentName||e.componentName||e.displayName;n.push(`  - ${t}: Consider wrapping with React.memo()`)}),n.push(""))}return n.push("=".repeat(60)),n.push("END OF EXPORT"),n.push("=".repeat(60)),n.join("\n")}function HighlightUpdatesModal({visible:e,onClose:t,onBack:r,onMinimize:a,enableSharedModalDimensions:n=!1,initialNativeTag:s,onInitialNativeTagHandled:i}){const o=getUseIsPro()(),[l,c]=(0,_react.useState)(!1),[d,u]=(0,_react.useState)(()=>_HighlightUpdatesController.default.getFrozen()),[h,g]=(0,_react.useState)(()=>_RenderTracker.RenderTracker.getStats().totalComponents>0),[p,_]=(0,_react.useState)(null),[C,R]=(0,_react.useState)(0),[f,T]=(0,_react.useState)(!1),[m,y]=(0,_react.useState)("filters"),[k,S]=(0,_react.useState)("details"),[b,x]=(0,_react.useState)(0),[w,v]=(0,_react.useState)(""),[I,U]=(0,_react.useState)(!1),N=(0,_react.useRef)(null),E=(0,_react.useRef)([]),P=(0,_react.useRef)(_RenderTracker.RenderTracker.getFilters()),[H,j]=(0,_react.useState)(()=>{const e=_RenderTracker.RenderTracker.getFilters();return e.includePatterns.length+e.excludePatterns.length}),[D,F]=(0,_react.useState)(()=>_RenderTracker.RenderTracker.getFilters()),[$,M]=(0,_react.useState)(()=>_RenderTracker.RenderTracker.getSettings()),O=(0,_react.useRef)(!1),A=(0,_react.useRef)(!1),V=(0,_react.useRef)(!1);(0,_react.useEffect)(()=>{e&&!O.current&&(async()=>{try{const e=await(0,_sharedUi.safeGetItem)(_sharedUi.devToolsStorageKeys.highlightUpdates.isTracking());null!==e&&"true"===e&&!_HighlightUpdatesController.default.isEnabled()&&(_HighlightUpdatesController.default.isInitialized()||_HighlightUpdatesController.default.initialize(),_HighlightUpdatesController.default.enable()),O.current=!0}catch(e){}})()},[e]),(0,_react.useEffect)(()=>{O.current&&(async()=>{try{await(0,_sharedUi.safeSetItem)(_sharedUi.devToolsStorageKeys.highlightUpdates.isTracking(),l.toString())}catch(e){}})()},[l]),(0,_react.useEffect)(()=>{e&&!A.current&&(async()=>{try{const e=await(0,_sharedUi.safeGetItem)(_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();P.current=a,F(a),j(a.includePatterns.length+a.excludePatterns.length)}A.current=!0}catch(e){}})()},[e]),(0,_react.useEffect)(()=>{A.current&&(async()=>{try{const e={includeTestID:Array.from(D.includeTestID),includeNativeID:Array.from(D.includeNativeID),includeViewType:Array.from(D.includeViewType),includeComponent:Array.from(D.includeComponent),excludeTestID:Array.from(D.excludeTestID),excludeNativeID:Array.from(D.excludeNativeID),excludeViewType:Array.from(D.excludeViewType),excludeComponent:Array.from(D.excludeComponent),includePatterns:D.includePatterns,excludePatterns:D.excludePatterns};await(0,_sharedUi.safeSetItem)(_sharedUi.devToolsStorageKeys.highlightUpdates.filters(),JSON.stringify(e))}catch(e){}})()},[D]),(0,_react.useEffect)(()=>{e&&!V.current&&(async()=>{try{const e=await(0,_sharedUi.safeGetItem)(_sharedUi.devToolsStorageKeys.highlightUpdates.settings());if(e){const t=JSON.parse(e),{performanceLogging:r,...a}=t;_RenderTracker.RenderTracker.setSettings(a),M(_RenderTracker.RenderTracker.getSettings())}V.current=!0}catch(e){V.current=!0}})()},[e]),(0,_react.useEffect)(()=>{V.current&&(async()=>{try{const{performanceLogging:e,...t}=$;await(0,_sharedUi.safeSetItem)(_sharedUi.devToolsStorageKeys.highlightUpdates.settings(),JSON.stringify(t))}catch(e){}})()},[$]),(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)(()=>{I&&requestAnimationFrame(()=>{N.current?.focus()})},[I]),(0,_react.useEffect)(()=>{e||_HighlightUpdatesController.default.setSpotlight(null)},[e]),(0,_react.useEffect)(()=>{if(e&&null!=s){const e=_RenderTracker.RenderTracker.getRender(String(s));e&&(_(e),R(0),T(!1),_HighlightUpdatesController.default.setSpotlight(e.nativeTag)),i?.()}},[e,s,i]);const B=(0,_react.useCallback)(()=>{_HighlightUpdatesController.default.isInitialized()||_HighlightUpdatesController.default.initialize(),_HighlightUpdatesController.default.toggle()},[]),q=(0,_react.useCallback)(()=>{_HighlightUpdatesController.default.toggleFreeze()},[]),L=(0,_react.useCallback)(()=>{_HighlightUpdatesController.default.clearRenderCounts(),g(!1)},[]),z=(0,_react.useMemo)(()=>h?formatRenderDataForClipboard():"",[h]),K=(0,_react.useCallback)(e=>{v(e)},[]),G=(0,_react.useCallback)((e,t,r)=>{_(e),R(t),S("details"),x(0),E.current=r,_HighlightUpdatesController.default.setSpotlight(e.nativeTag)},[]),W=(0,_react.useCallback)(e=>{E.current=e},[]),Y=(0,_react.useCallback)(()=>{_(null),R(0),_HighlightUpdatesController.default.setSpotlight(null)},[]),J=(0,_react.useCallback)(()=>{const e=E.current;if(C>0){const t=C-1,r=e[t];r&&(_(r),R(t),_HighlightUpdatesController.default.setSpotlight(r.nativeTag))}},[C]),X=(0,_react.useCallback)(()=>{const e=E.current;if(C<e.length-1){const t=C+1,r=e[t];r&&(_(r),R(t),_HighlightUpdatesController.default.setSpotlight(r.nativeTag))}},[C]),Z=(0,_react.useCallback)(()=>{T(!1)},[]),Q=(0,_react.useCallback)(()=>{T(!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();P.current=t,F(t),j(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),_(null),R(0),_HighlightUpdatesController.default.setSpotlight(null))},[re]),ne=(0,_react.useCallback)(e=>{_RenderTracker.RenderTracker.setSettings(e),M(_RenderTracker.RenderTracker.getSettings())},[]),se=(0,_react.useCallback)(e=>{g(e.totalComponents>0)},[]),ie=(0,_react.useCallback)(()=>f?(0,_jsxRuntime.jsx)(_ModalHeaderContent.FilterViewHeader,{onBack:Z,activeTab:m,onTabChange:y,activeFilterCount:H}):p?(0,_jsxRuntime.jsx)(_ModalHeaderContent.DetailViewHeader,{onBack:Y,activeTab:k,onTabChange:S,hasHistory:(p.renderHistory?.length??0)>0}):(0,_jsxRuntime.jsx)(_ModalHeaderContent.MainListHeader,{onBack:r,isSearchActive:I,searchText:w,onSearchChange:K,onSearchToggle:ee,onSearchClose:te,onFilterToggle:Q,onToggleTracking:B,onToggleFreeze:q,onClear:L,copyData:z,isTracking:l,isFrozen:d,activeFilterCount:H,hasRenders:h,searchInputRef:N}),[f,p,r,I,w,l,d,H,h,m,k,Z,Y,K,ee,te,Q,B,q,L,z]),oe=n?_sharedUi.devToolsStorageKeys.modal.root():_sharedUi.devToolsStorageKeys.highlightUpdates.modal();if(!e)return null;const le=E.current.length,ce=p?"details"===k?(0,_jsxRuntime.jsx)(_sharedUi.EventStepperFooter,{currentIndex:C,totalItems:le,onPrevious:J,onNext:X,itemLabel:"Component",subtitle:p.componentName||p.displayName||p.viewType}):(0,_jsxRuntime.jsx)(_RenderHistoryViewer.RenderHistoryFooter,{render:p,selectedEventIndex:b,onEventIndexChange:x,isPro:o}):null;return(0,_jsxRuntime.jsx)(_sharedUi.JsModal,{visible:e,onClose:t,onMinimize:a,persistenceKey:oe,header:{showToggleButton:!0,customContent:ie()},enablePersistence:!0,initialMode:"bottomSheet",enableGlitchEffects:!0,styles:{},footer:ce,footerHeight:p&&("details"===k||(p.renderHistory?.length??0)>1)?68:0,children:(0,_jsxRuntime.jsx)(_reactNative.View,{nativeID:"__rn_buoy__highlight-modal",style:styles.container,children:p?"details"===k?(0,_jsxRuntime.jsx)(_RenderDetailView.RenderDetailView,{render:p,disableInternalFooter:!0,onAddFilter:ae,isPro:o}):(0,_jsxRuntime.jsx)(_RenderHistoryViewer.RenderHistoryViewer,{render:p,disableInternalFooter:!0,selectedEventIndex:b,onEventIndexChange:x,isPro:o}):f?(0,_jsxRuntime.jsx)(_HighlightFilterView.HighlightFilterView,{filters:D,onFilterChange:re,settings:$,onSettingsChange:ne,availableProps:_RenderTracker.RenderTracker.getAvailableProps(),activeTab:m}):(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[!l&&(0,_jsxRuntime.jsx)(DisabledBanner,{}),(0,_jsxRuntime.jsx)(_IsolatedRenderList.IsolatedRenderList,{searchText:w,filters:D,onSelectRender:G,onStatsChange:se,onRendersChange:W,isTracking:l,isPro:o})]})})})}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;

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

@@ -0,0 +1 @@
+"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.buoyColors.primary,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}){const n=IDENTIFIER_CONFIG[e],s=n.icon,c=i?n.shortLabel:n.label;return r?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.valueOnly,o&&styles.valueOnlyCompact,{color:n.color}],numberOfLines:1,children:t}):a?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.badgeOnly,o&&styles.badgeOnlyCompact,{backgroundColor:n.color+"20",borderColor:n.color+"40"}],children:[l&&(0,_jsxRuntime.jsx)(s,{size:o?10:12,color:n.color}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.badgeOnlyText,o&&styles.badgeOnlyTextCompact,{color:n.color}],children:c})]}):(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.container,o&&styles.containerCompact],children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.badge,o&&styles.badgeCompact,{backgroundColor:n.color+"20"}],children:[l&&(0,_jsxRuntime.jsx)(s,{size:o?8:10,color:n.color}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.badgeText,o&&styles.badgeTextCompact,{color:n.color}],children:c})]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{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.buoyColors.text,fontFamily:"monospace",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:"monospace"},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;

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

@@ -0,0 +1 @@
+"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,s,i={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return i;if(a=t?n:r){if(a.has(e))return a.get(e);a.set(e,i)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((s=(a=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(s.get||s.set)?a(i,t,s):i[t]=e[t]);return i})(e,t)}const FREE_TIER_COMPONENT_LIMIT=25;function IsolatedRenderListInner({searchText:e,filters:t,onSelectRender:r,onStatsChange:n,onRendersChange:a,isTracking:s,isPro:i=!1}){const[o,c]=(0,_react.useState)(()=>_RenderTracker.RenderTracker.getFilteredRenders(e)),l=(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 d=(0,_react.useMemo)(()=>i?o:o.slice(0,25),[o,i]),u=(0,_react.useMemo)(()=>i?0:Math.max(0,o.length-25),[o.length,i]),_=(0,_react.useCallback)(e=>e.id,[]),x=(0,_react.useCallback)(({item:e,index:t})=>(0,_jsxRuntime.jsx)(_RenderListItem.RenderListItem,{render:e,onPress:()=>r(e,t,d)}),[r,d]),R=(0,_react.useCallback)(()=>u<=0?null:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.lockedBanner,children:[(0,_jsxRuntime.jsx)(_sharedUi.Lock,{size:14,color:_sharedUi.buoyColors.warning}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.lockedBannerText,children:[u," more ",1===u?"component":"components"," locked"]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.lockedBannerSubtext,children:"Upgrade to Pro"})]}),[u]);return 0===o.length?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.emptyState,children:[(0,_jsxRuntime.jsx)(_sharedUi.Activity,{size:32,color:_sharedUi.buoyColors.textMuted}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.emptyTitle,children:"No renders tracked"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.emptyText,children:s?"Component renders will appear here":"Enable tracking to start capturing"})]}):(0,_jsxRuntime.jsx)(_reactNative.FlatList,{ref:l,data:d,renderItem:x,keyExtractor:_,contentContainerStyle:styles.listContent,showsVerticalScrollIndicator:!0,initialNumToRender:10,maxToRenderPerBatch:10,windowSize:10,scrollEnabled:!1,ListFooterComponent:R})}const IsolatedRenderList=exports.IsolatedRenderList=(0,_react.memo)(IsolatedRenderListInner),styles=_reactNative.StyleSheet.create({listContent:{paddingTop:8},emptyState:{alignItems:"center",paddingVertical:40},emptyTitle:{color:_sharedUi.buoyColors.text,fontSize:14,fontWeight:"600",marginTop:12,marginBottom:6},emptyText:{color:_sharedUi.buoyColors.textMuted,fontSize:12,textAlign:"center"},lockedBanner:{flexDirection:"row",alignItems:"center",justifyContent:"center",paddingVertical:12,paddingHorizontal:16,marginTop:8,gap:8},lockedBannerText:{color:_sharedUi.buoyColors.warning,fontSize:13,fontWeight:"500"},lockedBannerSubtext:{color:_sharedUi.buoyColors.textMuted,fontSize:12}});var _default=exports.default=IsolatedRenderList;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SearchSection=exports.MainListHeader=exports.HeaderActions=exports.FilterViewHeader=exports.DetailViewHeader=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_sharedUi=require("@buoy-gg/shared-ui"),_StatsDisplay=require("./StatsDisplay"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,r){if("function"==typeof WeakMap)var t=new WeakMap,o=new WeakMap;return(_interopRequireWildcard=function(e,r){if(!r&&e&&e.__esModule)return e;var a,s,i={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return i;if(a=r?o:t){if(a.has(e))return a.get(e);a.set(e,i)}for(const r in e)"default"!==r&&{}.hasOwnProperty.call(e,r)&&((s=(a=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,r))&&(s.get||s.set)?a(i,r,s):i[r]=e[r]);return i})(e,r)}const SearchSectionInner=(0,_react.memo)(function({isActive:e,searchText:r,onSearchChange:t,onSearchClose:o}){return e?(0,_jsxRuntime.jsxs)(_reactNative.View,{nativeID:"__rn_buoy__search-container",style:styles.headerSearchContainer,children:[(0,_jsxRuntime.jsx)(_sharedUi.Search,{size:14,color:_sharedUi.buoyColors.textSecondary}),(0,_jsxRuntime.jsx)(_reactNative.TextInput,{style:styles.headerSearchInput,placeholder:"Search testID, nativeID, component...",placeholderTextColor:_sharedUi.buoyColors.textMuted,value:r,onChangeText:t,onSubmitEditing:o,onBlur:o,accessibilityLabel:"Search renders",autoCapitalize:"none",autoCorrect:!1,returnKeyType:"search",autoFocus:!0}),r.length>0?(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:()=>{t(""),o()},style:styles.headerSearchClear,children:(0,_jsxRuntime.jsx)(_sharedUi.X,{size:14,color:_sharedUi.buoyColors.textSecondary})}):null]}):null}),SearchSection=exports.SearchSection=SearchSectionInner,HeaderActionsInner=(0,_react.memo)(function({onSearchToggle:e,onFilterToggle:r,onToggleTracking:t,onToggleFreeze:o,onClear:a,copyData:s,isTracking:i,isFrozen:n,activeFilterCount:l,hasRenders:d}){return(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions,{children:[(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:e,style:styles.headerActionButton,children:(0,_jsxRuntime.jsx)(_sharedUi.Search,{size:14,color:_sharedUi.buoyColors.textSecondary})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:r,style:[styles.headerActionButton,l>0&&styles.activeFilterButton],children:(0,_jsxRuntime.jsx)(_sharedUi.Filter,{size:14,color:l>0?_sharedUi.buoyColors.primary:_sharedUi.buoyColors.textMuted})}),(0,_jsxRuntime.jsx)(_sharedUi.CopyButton,{value:s,size:14,buttonStyle:d?styles.headerActionButton:styles.headerActionButtonCopyDisabled,disabled:!d,colors:{idle:d?_sharedUi.buoyColors.textSecondary:_sharedUi.buoyColors.textMuted}}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:o,style:[styles.headerActionButton,n&&styles.freezeButton,!i&&styles.headerActionButtonDisabled],disabled:!i,children:(0,_jsxRuntime.jsx)(_sharedUi.Pause,{size:14,color:i&&n?_sharedUi.buoyColors.primary:_sharedUi.buoyColors.textMuted})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:t,style:[styles.headerActionButton,i?styles.startButton:styles.stopButton],children:(0,_jsxRuntime.jsx)(_sharedUi.Power,{size:14,color:i?_sharedUi.buoyColors.success:_sharedUi.buoyColors.error})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:a,style:[styles.headerActionButton,!d&&styles.headerActionButtonDisabled],disabled:!d,children:(0,_jsxRuntime.jsx)(_sharedUi.Trash2,{size:14,color:_sharedUi.buoyColors.textMuted})})]})}),HeaderActions=exports.HeaderActions=HeaderActionsInner,MainListHeader=exports.MainListHeader=(0,_react.memo)(function({onBack:e,isSearchActive:r,searchText:t,onSearchChange:o,onSearchToggle:a,onSearchClose:s,onFilterToggle:i,onToggleTracking:n,onToggleFreeze:l,onClear:d,copyData:c,isTracking:u,isFrozen:h,activeFilterCount:_,hasRenders:y,searchInputRef:x}){return(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[e&&(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:e}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:"",children:r?(0,_jsxRuntime.jsx)(SearchSection,{isActive:r,searchText:t,onSearchChange:o,onSearchClose:s,searchInputRef:x}):(0,_jsxRuntime.jsx)(_StatsDisplay.StatsDisplay,{})}),(0,_jsxRuntime.jsx)(HeaderActions,{onSearchToggle:a,onFilterToggle:i,onToggleTracking:n,onToggleFreeze:l,onClear:d,copyData:c,isTracking:u,isFrozen:h,activeFilterCount:_,hasRenders:y})]})}),FilterViewHeader=exports.FilterViewHeader=(0,_react.memo)(function({onBack:e,activeTab:r,onTabChange:t,activeFilterCount:o=0}){const a=[{key:"filters",label:"Filters"+(o>0?` (${o})`:"")},{key:"settings",label:"Settings"}];return(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:e}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:"",noMargin:!0,children:(0,_jsxRuntime.jsx)(_sharedUi.TabSelector,{tabs:a,activeTab:r,onTabChange:e=>t(e)})}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Actions,{})]})}),DetailViewHeader=exports.DetailViewHeader=(0,_react.memo)(function({onBack:e,activeTab:r,onTabChange:t,hasHistory:o=!0}){const a=[{key:"details",label:"Details"},{key:"history",label:"History",disabled:!o}];return(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:e}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:"",noMargin:!0,children:(0,_jsxRuntime.jsx)(_sharedUi.TabSelector,{tabs:a,activeTab:r,onTabChange:e=>t(e)})}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Actions,{})]})}),styles=_reactNative.StyleSheet.create({headerSearchContainer:{flexDirection:"row",alignItems:"center",backgroundColor:_sharedUi.buoyColors.input,borderRadius:10,borderWidth:1,borderColor:_sharedUi.buoyColors.border,paddingHorizontal:12,paddingVertical:5},headerSearchInput:{flex:1,color:_sharedUi.buoyColors.text,fontSize:13,marginLeft:6,paddingVertical:2},headerSearchClear:{marginLeft:6,padding:4},headerActionButton:{width:32,height:32,borderRadius:8,backgroundColor:_sharedUi.buoyColors.hover,borderWidth:1,borderColor:_sharedUi.buoyColors.border,alignItems:"center",justifyContent:"center"},headerActionButtonDisabled:{opacity:.55},headerActionButtonCopyDisabled:{width:32,height:32,borderRadius:8,backgroundColor:_sharedUi.buoyColors.hover,borderWidth:1,borderColor:_sharedUi.buoyColors.border,alignItems:"center",justifyContent:"center",opacity:.55},startButton:{backgroundColor:_sharedUi.buoyColors.success+"15",borderColor:_sharedUi.buoyColors.success+"40"},stopButton:{backgroundColor:_sharedUi.buoyColors.error+"15",borderColor:_sharedUi.buoyColors.error+"40"},activeFilterButton:{backgroundColor:_sharedUi.buoyColors.primary+"15",borderColor:_sharedUi.buoyColors.primary+"40"},freezeButton:{backgroundColor:_sharedUi.buoyColors.primary+"15",borderColor:_sharedUi.buoyColors.primary+"40"}});

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.COMPONENT_CAUSE_CONFIG=exports.CAUSE_CONFIG=void 0,exports.EnhancedCauseDisplay=EnhancedCauseDisplay,exports.RenderCauseBadge=RenderCauseBadge,exports.TwoLevelCauseBadge=TwoLevelCauseBadge,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 CAUSE_CONFIG=exports.CAUSE_CONFIG={mount:{label:"MOUNT",color:_sharedUi.buoyColors.success,tip:"First render of this component."},props:{label:"PROPS",color:_sharedUi.buoyColors.warning,tip:"Native props changed. Consider React.memo() or useCallback for handlers."},state:{label:"STATE",color:"#a855f7",tip:"Component state changed via setState."},hooks:{label:"HOOKS",color:"#ec4899",tip:"Hook values changed (useState, useReducer, useMemo, etc.)."},context:{label:"CONTEXT",color:"#06b6d4",tip:"React context value changed."},parent:{label:"PARENT",color:_sharedUi.buoyColors.textSecondary,tip:"Parent component re-rendered. Consider wrapping with React.memo()."},unknown:{label:"?",color:_sharedUi.buoyColors.textMuted,tip:"Could not determine render cause."}},COMPONENT_CAUSE_CONFIG=exports.COMPONENT_CAUSE_CONFIG={mount:{label:"mount",color:_sharedUi.buoyColors.success,tip:"First render of this component."},props:{label:"props",color:_sharedUi.buoyColors.warning,tip:"Component received different props from parent."},state:{label:"state",color:"#a855f7",tip:"Component's own state changed (useState/useReducer)."},parent:{label:"parent",color:_sharedUi.buoyColors.textSecondary,tip:"Parent re-rendered but this component's props/state didn't change. Consider React.memo()."},unknown:{label:"?",color:_sharedUi.buoyColors.textMuted,tip:"Could not determine component render cause."}};function RenderCauseBadge({cause:e,compact:t=!1,showKeys:n=!1,showTwoLevel:o=!1}){const s=CAUSE_CONFIG[e.type],a=e.componentCause?COMPONENT_CAUSE_CONFIG[e.componentCause]:null,r=o&&a&&e.componentCause!==e.type;return(0,_jsxRuntime.jsxs)(_reactNative.View,{nativeID:"__rn_buoy__cause-badge",style:[styles.container,t&&styles.containerCompact],children:[r&&(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.badge,t&&styles.badgeCompact,styles.componentBadge,{backgroundColor:a.color+"15"}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.badgeText,t&&styles.badgeTextCompact,styles.componentBadgeText,{color:a.color}],children:a.label})}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.arrowText,t&&styles.arrowTextCompact],children:"→"})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.badge,t&&styles.badgeCompact,{backgroundColor:s.color+"20"}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.badgeText,t&&styles.badgeTextCompact,{color:s.color}],children:s.label})}),n&&e.changedKeys&&e.changedKeys.length>0&&(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.keysText,t&&styles.keysTextCompact],numberOfLines:1,children:e.changedKeys.join(", ")}),n&&e.hookIndices&&e.hookIndices.length>0&&(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:[styles.keysText,t&&styles.keysTextCompact],numberOfLines:1,children:["Hook ",e.hookIndices.join(", ")]})]})}function TwoLevelCauseBadge({cause:e}){const t=CAUSE_CONFIG[e.type],n=e.componentCause?COMPONENT_CAUSE_CONFIG[e.componentCause]:null,o=e.componentName||"Component";return(0,_jsxRuntime.jsxs)(_reactNative.View,{nativeID:"__rn_buoy__two-level-cause",style:styles.twoLevelContainer,children:[n&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.twoLevelRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.twoLevelLabel,children:"Component:"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.twoLevelName,children:o}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.twoLevelText,children:"re-rendered due to"}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.badge,{backgroundColor:n.color+"20"}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.badgeText,{color:n.color}],children:n.label.toUpperCase()})})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.twoLevelRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.twoLevelLabel,children:"Native:"}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.badge,{backgroundColor:t.color+"20"}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.badgeText,{color:t.color}],children:t.label})}),e.changedKeys&&e.changedKeys.length>0&&(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.twoLevelKeys,children:["[",e.changedKeys.join(", "),"]"]})]})]})}function EnhancedCauseDisplay({cause:e,nativeType:t}){const n=CAUSE_CONFIG[e.type],o=e.componentCause?COMPONENT_CAUSE_CONFIG[e.componentCause]:null,s=e.componentName||"Unknown",a=e.hookChanges&&e.hookChanges.length>0,r=e.changedKeys&&e.changedKeys.length>0,i=e.changedKeys?.filter(e=>e.includes("(ref only)")||e.includes("(fn ref)"))||[],l=e.changedKeys?.filter(e=>!e.includes("(ref only)")&&!e.includes("(fn ref)"))||[];return(0,_jsxRuntime.jsxs)(_reactNative.View,{nativeID:"__rn_buoy__enhanced-cause",style:styles.enhancedContainer,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.enhancedHeader,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.enhancedComponentName,children:s}),t&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.enhancedNativeTag,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.enhancedNativeTagText,children:t})})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.enhancedFlowContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.enhancedFlowLabel,children:"Cause:"}),o&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.enhancedFlowBadge,{backgroundColor:o.color+"20"}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.enhancedFlowBadgeText,{color:o.color}],children:o.label.toUpperCase()})}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.enhancedFlowArrow,children:"→"}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.enhancedFlowBadge,{backgroundColor:n.color+"20"}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.enhancedFlowBadgeText,{color:n.color}],children:n.label})})]}),a&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.enhancedSection,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.enhancedSectionTitle,children:"Component State Changed:"}),e.hookChanges.map(e=>(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.enhancedChangeRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.enhancedChangeIcon,children:"⚡"}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.enhancedChangeText,children:["Hook[",e.index,"] (",e.type,"): ",e.description]})]},e.index))]}),l.length>0&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.enhancedSection,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.enhancedSectionTitle,children:"Native Props Changed:"}),l.map((e,t)=>(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.enhancedChangeRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.enhancedChangeIcon,children:"~"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.enhancedChangeText,children:e})]},t))]}),i.length>0&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.enhancedSection,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.enhancedSectionTitle,{color:_sharedUi.buoyColors.textMuted}],children:"Reference Changes (optimization opportunity):"}),i.map((e,t)=>(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.enhancedChangeRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.enhancedChangeIcon,{color:_sharedUi.buoyColors.textMuted}],children:"○"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.enhancedChangeText,{color:_sharedUi.buoyColors.textMuted}],children:e})]},t))]}),!a&&!r&&"mount"!==e.type&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.enhancedSection,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.enhancedNoChanges,children:"parent"===e.type?"Parent re-rendered (consider React.memo)":"No specific changes detected"})})]})}const styles=_reactNative.StyleSheet.create({container:{flexDirection:"row",alignItems:"center",gap:6},containerCompact:{gap:4},badge:{paddingVertical:3,paddingHorizontal:6,borderRadius:4},badgeCompact:{paddingVertical:2,paddingHorizontal:5},componentBadge:{borderStyle:"dashed",borderWidth:1,borderColor:_sharedUi.buoyColors.border},badgeText:{fontSize:10,fontWeight:"700"},badgeTextCompact:{fontSize:9},componentBadgeText:{fontWeight:"500",textTransform:"lowercase"},arrowText:{fontSize:10,color:_sharedUi.buoyColors.textMuted},arrowTextCompact:{fontSize:9},keysText:{fontSize:11,color:_sharedUi.buoyColors.textSecondary,fontFamily:"monospace",flex:1},keysTextCompact:{fontSize:10},twoLevelContainer:{gap:8},twoLevelRow:{flexDirection:"row",alignItems:"center",flexWrap:"wrap",gap:6},twoLevelLabel:{fontSize:11,fontWeight:"600",color:_sharedUi.buoyColors.textSecondary,minWidth:70},twoLevelName:{fontSize:11,fontWeight:"600",color:_sharedUi.buoyColors.text,fontFamily:"monospace"},twoLevelText:{fontSize:11,color:_sharedUi.buoyColors.textSecondary},twoLevelKeys:{fontSize:10,color:_sharedUi.buoyColors.textSecondary,fontFamily:"monospace"},enhancedContainer:{gap:12},enhancedHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:8},enhancedComponentName:{fontSize:14,fontWeight:"700",color:_sharedUi.buoyColors.text,fontFamily:"monospace"},enhancedNativeTag:{backgroundColor:_sharedUi.buoyColors.input,paddingVertical:2,paddingHorizontal:6,borderRadius:4},enhancedNativeTagText:{fontSize:10,fontWeight:"600",color:_sharedUi.buoyColors.textMuted,fontFamily:"monospace"},enhancedFlowContainer:{flexDirection:"row",alignItems:"center",gap:8,paddingVertical:8,paddingHorizontal:12,backgroundColor:_sharedUi.buoyColors.input,borderRadius:6},enhancedFlowLabel:{fontSize:11,fontWeight:"600",color:_sharedUi.buoyColors.textSecondary},enhancedFlowBadge:{paddingVertical:3,paddingHorizontal:8,borderRadius:4},enhancedFlowBadgeText:{fontSize:10,fontWeight:"700"},enhancedFlowArrow:{fontSize:14,color:_sharedUi.buoyColors.textMuted,fontWeight:"300"},enhancedSection:{gap:6},enhancedSectionTitle:{fontSize:11,fontWeight:"600",color:_sharedUi.buoyColors.textSecondary,letterSpacing:.3},enhancedChangeRow:{flexDirection:"row",alignItems:"flex-start",gap:6,paddingLeft:4},enhancedChangeIcon:{fontSize:12,color:_sharedUi.buoyColors.warning,fontFamily:"monospace",width:16},enhancedChangeText:{fontSize:12,color:_sharedUi.buoyColors.text,fontFamily:"monospace",flex:1},enhancedNoChanges:{fontSize:12,color:_sharedUi.buoyColors.textMuted,fontStyle:"italic",paddingLeft:4}});var _default=exports.default=RenderCauseBadge;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.RenderDetailView=RenderDetailView,exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_sharedUi=require("@buoy-gg/shared-ui"),_dataViewer=require("@buoy-gg/shared-ui/dataViewer"),_RenderCauseBadge=require("./RenderCauseBadge"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,s=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var i,o,a={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return a;if(i=t?s:r){if(i.has(e))return i.get(e);i.set(e,a)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((o=(i=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(o.get||o.set)?i(a,t,o):a[t]=e[t]);return a})(e,t)}function formatRenderDetailForClipboard(e){const t=[];if(t.push(`${e.componentName||e.displayName} (${e.viewType})`),t.push(`Renders: ${e.renderCount}`),e.lastRenderCause){const r=e.lastRenderCause;if(r.componentCause?t.push(`Cause: ${r.componentCause.toUpperCase()} → ${r.type.toUpperCase()}`):t.push(`Cause: ${r.type.toUpperCase()}`),r.hookChanges?.length)for(const e of r.hookChanges)t.push(`  ${e.type}[${e.index}]: ${e.previousValue} → ${e.currentValue}`)}if(e.renderHistory?.length){t.push(`\nHistory (${e.renderHistory.length} events):`);for(const r of e.renderHistory){const e=r.cause.componentCause?`${r.cause.componentCause.toUpperCase()} → ${r.cause.type.toUpperCase()}`:r.cause.type.toUpperCase();t.push(`  #${r.renderNumber}: ${e}`)}}return t.join("\n")}const FREE_TIER_EVENT_LIMIT=5;function RenderDetailView({render:e,disableInternalFooter:t=!1,selectedEventIndex:r,onEventIndexChange:s,onAddFilter:i,isPro:o=!1}){const[a,n]=(0,_react.useState)(0),l=r??a,d=s??n,c=(0,_react.useMemo)(()=>e.renderHistory&&0!==e.renderHistory.length?[...e.renderHistory].sort((e,t)=>e.timestamp-t.timestamp):[],[e.renderHistory]),u=c.length,y=c[l],x=(0,_react.useMemo)(()=>o?0:Math.max(0,u-FREE_TIER_EVENT_LIMIT),[o,u]),_=y?.cause||e.lastRenderCause,h=(0,_react.useCallback)(()=>{l>0&&d(l-1)},[l,d]),m=(0,_react.useCallback)(()=>{const e=o?u-1:Math.min(FREE_TIER_EVENT_LIMIT-1,u-1);l<e&&d(l+1)},[l,u,d,o]),p=(0,_react.useMemo)(()=>formatRenderDetailForClipboard(e),[e]),b=e.componentName||e.displayName,C=e.viewType,j=e.lastRenderTime-e.firstRenderTime,g=j>0?(e.renderCount/(j/1e3)).toFixed(1):e.renderCount.toString(),f=!t&&u>1;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.container,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.header,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.headerLeft,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.componentName,numberOfLines:1,children:b}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.nativeTypeBadge,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.nativeTypeText,children:C})})]}),(0,_jsxRuntime.jsx)(_sharedUi.CopyButton,{value:p,size:14})]}),(0,_jsxRuntime.jsxs)(_reactNative.ScrollView,{style:styles.scrollView,contentContainerStyle:[styles.scrollContent,f&&{paddingBottom:100}],showsVerticalScrollIndicator:!1,children:[_&&(0,_jsxRuntime.jsx)(AnswerCard,{cause:_,renderNumber:y?.renderNumber}),(0,_jsxRuntime.jsx)(DetailsSection,{render:e,rendersPerSec:g}),x>0&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.lockedBanner,children:[(0,_jsxRuntime.jsx)(_sharedUi.Lock,{size:14,color:_sharedUi.buoyColors.warning}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.lockedBannerText,children:[x," ",1===x?"event":"events"," hidden"]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.lockedBannerSubtext,children:"Upgrade to Pro"})]}),i&&(0,_jsxRuntime.jsx)(QuickActionsSection,{render:e,onAddFilter:i})]}),f&&(0,_jsxRuntime.jsx)(_sharedUi.EventStepperFooter,{currentIndex:l,totalItems:u,onPrevious:h,onNext:m,itemLabel:"Render",subtitle:y?.timestamp?(0,_sharedUi.formatRelativeTime)(new Date(y.timestamp)):void 0,applySafeAreaInset:!1,absolute:!0})]})}function AnswerCard({cause:e,renderNumber:t}){const r=e.componentCause||e.type,s=e.componentCause?_RenderCauseBadge.COMPONENT_CAUSE_CONFIG[e.componentCause]:_RenderCauseBadge.CAUSE_CONFIG[e.type],i=e.hookChanges&&e.hookChanges.length>0,o=e.changedKeys&&e.changedKeys.length>0;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.answerCard,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.causeBadgeRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.causeLabel,children:"mount"===e.type?"First render":"parent"===r?"Triggered by":"Changed:"}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.causeBadgeLarge,{backgroundColor:s.color+"20"}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.causeBadgeLargeText,{color:s.color}],children:s.label.toUpperCase()})})]}),i&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.hookChangesContainer,children:e.hookChanges.map((e,t)=>{const r=`${e.type}[${e.index}]`,s={[r]:e.previousValue},i={[r]:e.currentValue};return(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.hookDiffContainer,children:(0,_jsxRuntime.jsx)(_dataViewer.TreeDiffViewer,{oldValue:s,newValue:i,theme:"dark",showUnchanged:!1})},t)})}),!i&&o&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.propsChangesContainer,children:e.changedKeys.filter(e=>!e.includes("(ref only)")).slice(0,5).map((e,t)=>(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.propChangeChip,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.propChangeText,children:e})},t))})]})}function DetailsSection({render:e,rendersPerSec:t}){const r=e.testID||e.nativeID||e.accessibilityLabel,s=e.measurements;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.detailsSection,children:[r&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.detailsCard,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.detailsCardTitle,children:"Identifiers"}),e.testID&&(0,_jsxRuntime.jsx)(DetailRow,{label:"testID",value:e.testID}),e.nativeID&&(0,_jsxRuntime.jsx)(DetailRow,{label:"nativeID",value:e.nativeID}),e.accessibilityLabel&&(0,_jsxRuntime.jsx)(DetailRow,{label:"a11y",value:e.accessibilityLabel})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.statsRow,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.statItem,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.statValue,{color:e.color}],children:e.renderCount}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.statLabel,children:"renders"})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.statDivider}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.statItem,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.statValue,children:t}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.statLabel,children:"/sec"})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.statDivider}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.statItem,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.statValue,children:e.nativeTag}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.statLabel,children:"tag"})]})]}),s&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.measurementsRow,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.measurementItem,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.measurementLabel,children:"x"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.measurementValue,children:Math.round(e.measurements.x)})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.measurementItem,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.measurementLabel,children:"y"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.measurementValue,children:Math.round(e.measurements.y)})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.measurementItem,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.measurementLabel,children:"w"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.measurementValue,children:Math.round(e.measurements.width)})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.measurementItem,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.measurementLabel,children:"h"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.measurementValue,children:Math.round(e.measurements.height)})]})]})]})}function DetailRow({label:e,value:t}){return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.detailRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.detailLabel,children:e}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.detailValue,numberOfLines:1,children:t})]})}function QuickActionsSection({render:e,onAddFilter:t}){const[r,s]=(0,_react.useState)(null),i=(0,_react.useMemo)(()=>{const t=[];return e.nativeID&&t.push({type:"nativeID",value:e.nativeID,label:"nativeID"}),e.testID&&t.push({type:"testID",value:e.testID,label:"testID"}),e.accessibilityLabel&&t.push({type:"accessibilityLabel",value:e.accessibilityLabel,label:"a11y"}),e.componentName&&t.push({type:"component",value:e.componentName,label:"component"}),t.push({type:"viewType",value:e.viewType,label:"viewType"}),t},[e]),o=null!==r?i[r]:null,a=(0,_react.useCallback)(e=>{s(t=>t===e?null:e)},[]),n=(0,_react.useCallback)(()=>{o&&(t({type:o.type,value:o.value},"include"),s(null))},[o,t]),l=(0,_react.useCallback)(()=>{o&&(t({type:o.type,value:o.value},"exclude"),s(null))},[o,t]);return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.quickActionsSection,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.quickActionsTitle,children:"Quick Filters"}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.filterOptionsList,children:i.map((e,t)=>(0,_jsxRuntime.jsx)(FilterOptionCard,{label:e.label,value:e.value,isSelected:r===t,onSelect:()=>a(t)},e.type))}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.filterActionButtons,children:[(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:[styles.filterActionButton,styles.filterActionButtonInclude,!o&&styles.filterActionButtonDisabled],onPress:n,disabled:!o,activeOpacity:.7,children:[(0,_jsxRuntime.jsx)(_sharedUi.PlusIcon,{size:14,color:o?_sharedUi.buoyColors.success:_sharedUi.buoyColors.textMuted}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.filterActionButtonText,{color:o?_sharedUi.buoyColors.success:_sharedUi.buoyColors.textMuted}],children:"Only Show This"})]}),(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:[styles.filterActionButton,styles.filterActionButtonExclude,!o&&styles.filterActionButtonDisabled],onPress:l,disabled:!o,activeOpacity:.7,children:[(0,_jsxRuntime.jsx)(_sharedUi.MinusIcon,{size:14,color:o?_sharedUi.buoyColors.error:_sharedUi.buoyColors.textMuted}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.filterActionButtonText,{color:o?_sharedUi.buoyColors.error:_sharedUi.buoyColors.textMuted}],children:"Hide This"})]})]})]})}function FilterOptionCard({label:e,value:t,isSelected:r,onSelect:s}){return(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:[styles.filterOptionCard,r&&styles.filterOptionCardSelected],onPress:s,activeOpacity:.7,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.filterOptionLabel,r&&styles.filterOptionLabelSelected],children:e}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.filterOptionValue,r&&styles.filterOptionValueSelected],numberOfLines:1,children:t})]})}const styles=_reactNative.StyleSheet.create({container:{flex:1,backgroundColor:_sharedUi.buoyColors.base},header:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:12,padding:16,paddingBottom:0},scrollView:{flex:1},scrollContent:{padding:16,paddingTop:12,paddingBottom:80,gap:12},headerLeft:{flex:1,flexDirection:"row",alignItems:"center",justifyContent:"center",gap:10},componentName:{fontSize:18,fontWeight:"700",color:_sharedUi.buoyColors.text,flexShrink:1},nativeTypeBadge:{backgroundColor:_sharedUi.buoyColors.input,paddingVertical:3,paddingHorizontal:8,borderRadius:4},nativeTypeText:{fontSize:11,fontWeight:"600",color:_sharedUi.buoyColors.textMuted,fontFamily:"monospace"},answerCard:{backgroundColor:_sharedUi.buoyColors.card,borderRadius:8,borderWidth:1,borderColor:_sharedUi.buoyColors.border,padding:12,gap:6},causeBadgeRow:{flexDirection:"row",alignItems:"center",gap:8},causeBadgeLarge:{paddingVertical:4,paddingHorizontal:10,borderRadius:4},causeBadgeLargeText:{fontSize:11,fontWeight:"700",letterSpacing:.5},causeLabel:{fontSize:12,color:_sharedUi.buoyColors.textSecondary,fontWeight:"500"},hookChangesContainer:{gap:6},hookDiffContainer:{backgroundColor:_sharedUi.buoyColors.input,borderRadius:6,overflow:"hidden"},propsChangesContainer:{flexDirection:"row",flexWrap:"wrap",gap:4},propChangeChip:{backgroundColor:_sharedUi.buoyColors.input,paddingVertical:2,paddingHorizontal:6,borderRadius:4},propChangeText:{fontSize:11,color:_sharedUi.buoyColors.text,fontFamily:"monospace"},detailsSection:{gap:10},detailsCard:{backgroundColor:_sharedUi.buoyColors.card,borderRadius:8,borderWidth:1,borderColor:_sharedUi.buoyColors.border,padding:12,gap:6},detailsCardTitle:{fontSize:10,fontWeight:"600",color:_sharedUi.buoyColors.textMuted,letterSpacing:.5,textTransform:"uppercase",marginBottom:4},detailRow:{flexDirection:"row",alignItems:"center",gap:8},detailLabel:{fontSize:11,fontWeight:"600",color:_sharedUi.buoyColors.textSecondary,minWidth:55},detailValue:{fontSize:12,color:_sharedUi.buoyColors.text,fontFamily:"monospace",flex:1},statsRow:{flexDirection:"row",alignItems:"center",justifyContent:"center",backgroundColor:_sharedUi.buoyColors.card,borderRadius:8,borderWidth:1,borderColor:_sharedUi.buoyColors.border,paddingVertical:10,paddingHorizontal:16},statItem:{flex:1,alignItems:"center"},statValue:{fontSize:16,fontWeight:"700",color:_sharedUi.buoyColors.text,fontFamily:"monospace"},statLabel:{fontSize:10,color:_sharedUi.buoyColors.textMuted,marginTop:2},statDivider:{width:1,height:24,backgroundColor:_sharedUi.buoyColors.border,marginHorizontal:12},measurementsRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-around",backgroundColor:_sharedUi.buoyColors.card,borderRadius:8,borderWidth:1,borderColor:_sharedUi.buoyColors.border,paddingVertical:8,paddingHorizontal:12},measurementItem:{flexDirection:"row",alignItems:"baseline",gap:4},measurementLabel:{fontSize:10,fontWeight:"600",color:_sharedUi.buoyColors.textMuted,textTransform:"uppercase"},measurementValue:{fontSize:12,fontWeight:"600",color:_sharedUi.buoyColors.text,fontFamily:"monospace"},quickActionsSection:{backgroundColor:_sharedUi.buoyColors.card,borderRadius:8,borderWidth:1,borderColor:_sharedUi.buoyColors.border,padding:12,gap:10},quickActionsTitle:{fontSize:10,fontWeight:"600",color:_sharedUi.buoyColors.textMuted,letterSpacing:.5,textTransform:"uppercase",marginBottom:2},filterOptionsList:{gap:6},filterOptionCard:{flexDirection:"row",alignItems:"center",backgroundColor:_sharedUi.buoyColors.input,borderRadius:6,paddingVertical:10,paddingHorizontal:12,borderWidth:1,borderColor:"transparent",gap:10},filterOptionCardSelected:{borderColor:_sharedUi.buoyColors.success,backgroundColor:_sharedUi.buoyColors.success+"15"},filterOptionLabel:{fontSize:10,fontWeight:"600",color:_sharedUi.buoyColors.textMuted,minWidth:70},filterOptionLabelSelected:{color:_sharedUi.buoyColors.success},filterOptionValue:{fontSize:12,color:_sharedUi.buoyColors.text,fontFamily:"monospace",flex:1},filterOptionValueSelected:{color:_sharedUi.buoyColors.text},filterActionButtons:{flexDirection:"row",gap:8,marginTop:12},filterActionButton:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:4,paddingVertical:8,paddingHorizontal:10,borderRadius:6,borderWidth:1},filterActionButtonInclude:{backgroundColor:_sharedUi.buoyColors.success+"15",borderColor:_sharedUi.buoyColors.success+"40"},filterActionButtonExclude:{backgroundColor:_sharedUi.buoyColors.error+"15",borderColor:_sharedUi.buoyColors.error+"40"},filterActionButtonDisabled:{backgroundColor:_sharedUi.buoyColors.input,borderColor:_sharedUi.buoyColors.border,opacity:.5},filterActionButtonText:{fontSize:11,fontWeight:"600"},lockedBanner:{flexDirection:"row",alignItems:"center",justifyContent:"center",backgroundColor:_sharedUi.buoyColors.card,borderRadius:8,borderWidth:1,borderColor:_sharedUi.buoyColors.warning+"40",paddingVertical:12,paddingHorizontal:16,gap:8},lockedBannerText:{color:_sharedUi.buoyColors.warning,fontSize:13,fontWeight:"600"},lockedBannerSubtext:{color:_sharedUi.buoyColors.textMuted,fontSize:12}});var _default=exports.default=RenderDetailView;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.RenderHistoryFooter=RenderHistoryFooter,exports.RenderHistoryViewer=RenderHistoryViewer,exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_sharedUi=require("@buoy-gg/shared-ui"),_dataViewer=require("@buoy-gg/shared-ui/dataViewer"),_RenderCauseBadge=require("./RenderCauseBadge"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,i=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var o,s,a={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return a;if(o=t?i:r){if(o.has(e))return o.get(e);o.set(e,a)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((s=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(s.get||s.set)?o(a,t,s):a[t]=e[t]);return a})(e,t)}const FREE_TIER_EVENT_LIMIT=3;function formatTimeWithMs(e){const t=new Date(e);return t.toLocaleTimeString([],{hour:"2-digit",minute:"2-digit",second:"2-digit"})+`.${t.getMilliseconds().toString().padStart(3,"0")}`}function RenderHistoryViewer({render:e,disableInternalFooter:t=!1,selectedEventIndex:r,onEventIndexChange:i,isPro:o=!1}){const[s,a]=(0,_react.useState)(0),n=r??s,l=i??a,[d,c]=(0,_react.useState)("current"),u=(0,_react.useMemo)(()=>e.renderHistory&&0!==e.renderHistory.length?[...e.renderHistory].sort((e,t)=>e.timestamp-t.timestamp):[],[e.renderHistory]),x=(0,_react.useMemo)(()=>o?u:u.slice(-FREE_TIER_EVENT_LIMIT),[u,o]),y=(0,_react.useMemo)(()=>o?0:Math.max(0,u.length-FREE_TIER_EVENT_LIMIT),[u.length,o]),_=x.length,m=x[n],h=n>0?x[n-1]:null,f=(0,_react.useCallback)(()=>{n>0&&l(n-1)},[n,l]),g=(0,_react.useCallback)(()=>{n<_-1&&l(n+1)},[n,_,l]);return 0===_?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.emptyContainer,children:[(0,_jsxRuntime.jsx)(_sharedUi.Clock,{size:32,color:_sharedUi.buoyColors.textMuted}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.emptyTitle,children:"No Render History"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.emptyText,children:"Enable render history tracking in settings to see render events here."})]}):(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.container,{paddingBottom:!t&&_>1?80:0}],children:[y>0&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.lockedBanner,children:[(0,_jsxRuntime.jsx)(_sharedUi.Lock,{size:14,color:_sharedUi.buoyColors.warning}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.lockedBannerText,children:[y," older ",1===y?"render":"renders"," locked"]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.lockedBannerSubtext,children:"Upgrade to Pro"})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.viewToggleContainer,children:[(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:[styles.viewToggleCard,"current"===d&&styles.viewToggleCardActive],onPress:()=>c("current"),activeOpacity:.8,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.viewToggleContent,children:[(0,_jsxRuntime.jsx)(_sharedUi.Database,{size:16,color:"current"===d?_sharedUi.buoyColors.primary:_sharedUi.buoyColors.textSecondary}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.viewToggleLabel,"current"===d&&styles.viewToggleLabelActive],children:"CURRENT STATE"})]}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:[styles.viewToggleDescription,"current"===d&&{color:_sharedUi.buoyColors.text}],children:["View render #",m?.renderNumber??0," details"]})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.viewToggleCard,styles.viewToggleCardDisabled],children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.viewToggleContent,children:[(0,_jsxRuntime.jsx)(_sharedUi.GitBranch,{size:16,color:_sharedUi.buoyColors.textMuted}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.viewToggleLabel,styles.viewToggleLabelDisabled],children:"DIFF VIEW"}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.todoBadge,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.todoBadgeText,children:"TODO"})})]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.viewToggleDescription,{color:_sharedUi.buoyColors.textMuted}],children:"Compare renders side by side (coming soon)"})]})]}),(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{style:styles.contentScroll,contentContainerStyle:styles.contentContainer,showsVerticalScrollIndicator:!1,children:"current"===d?(0,_jsxRuntime.jsx)(CurrentStateView,{event:m,render:e}):(0,_jsxRuntime.jsx)(DiffView,{previousEvent:h,currentEvent:m,render:e})})]}),!t&&(0,_jsxRuntime.jsx)(_sharedUi.EventStepperFooter,{currentIndex:n,totalItems:_,onPrevious:f,onNext:g,itemLabel:"Render",subtitle:(0,_sharedUi.formatRelativeTime)(new Date(m?.timestamp??Date.now()))})]})}function CurrentStateView({event:e,render:t}){if(!e)return(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.noEventContainer,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.noEventText,children:"No event selected"})});const r=_RenderCauseBadge.CAUSE_CONFIG[e.cause.type];return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.currentStateContainer,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.eventHeader,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.eventHeaderLeft,children:[(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.eventTitle,children:["Render #",e.renderNumber]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.eventTime,children:formatTimeWithMs(e.timestamp)})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.eventBadge,{backgroundColor:t.color+"30"}],children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.eventBadgeDot,{backgroundColor:t.color}]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.eventBadgeText,{color:t.color}],children:e.cause.type.toUpperCase()})]})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.section,children:[(0,_jsxRuntime.jsxs)(_sharedUi.SectionHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon,{icon:_sharedUi.Clock,color:r.color,size:12}),(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Title,{children:"WHY DID THIS RENDER?"})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.sectionContent,children:(0,_jsxRuntime.jsx)(_RenderCauseBadge.EnhancedCauseDisplay,{cause:e.cause,nativeType:t.viewType})})]}),e.capturedProps&&Object.keys(e.capturedProps).length>0&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.section,children:[(0,_jsxRuntime.jsxs)(_sharedUi.SectionHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon,{icon:_sharedUi.Database,color:_sharedUi.buoyColors.primary,size:12}),(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Title,{children:"CAPTURED PROPS"})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.sectionContent,children:(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{horizontal:!0,showsHorizontalScrollIndicator:!1,style:styles.propsScrollView,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.propsJson,children:JSON.stringify(e.capturedProps,null,2)})})})]})]})}function DiffView({previousEvent:e,currentEvent:t,render:r}){const[i,o]=(0,_react.useState)("props");if(!e||!t)return(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.noEventContainer,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.noEventText,children:"Select an event with a previous event to compare"})});const s=_RenderCauseBadge.CAUSE_CONFIG[e.cause.type],a=_RenderCauseBadge.CAUSE_CONFIG[t.cause.type],n=e.capturedProps&&t.capturedProps,l=e.capturedState&&t.capturedState;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.diffContainer,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.compareBar,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.compareSide,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.compareLabelRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.compareLabel,{color:_sharedUi.buoyColors.warning}],children:"PREV"}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.compareActionBadge,{backgroundColor:`${s.color}20`}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.compareActionText,{color:s.color}],children:e.cause.type.toUpperCase()})})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.compareMeta,children:[(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.compareIndex,children:["#",e.renderNumber]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.compareTime,children:formatTimeWithMs(e.timestamp)})]})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.compareDivider,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.compareArrow,children:"→"})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.compareSide,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.compareLabelRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.compareLabel,{color:_sharedUi.buoyColors.success}],children:"CUR"}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.compareActionBadge,{backgroundColor:`${a.color}20`}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.compareActionText,{color:a.color}],children:t.cause.type.toUpperCase()})})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.compareMeta,children:[(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.compareIndex,children:["#",t.renderNumber]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.compareTime,children:formatTimeWithMs(t.timestamp)})]})]})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.diffModeTabs,children:[(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:[styles.diffModeTab,"cause"===i&&styles.diffModeTabActive],onPress:()=>o("cause"),activeOpacity:.7,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.diffModeTabText,"cause"===i&&styles.diffModeTabTextActive],children:"CAUSE"})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:[styles.diffModeTab,"props"===i&&styles.diffModeTabActive,!n&&styles.diffModeTabDisabled],onPress:()=>n&&o("props"),activeOpacity:n?.7:1,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.diffModeTabText,"props"===i&&styles.diffModeTabTextActive,!n&&styles.diffModeTabTextDisabled],children:"PROPS"})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:[styles.diffModeTab,"state"===i&&styles.diffModeTabActive,!l&&styles.diffModeTabDisabled],onPress:()=>l&&o("state"),activeOpacity:l?.7:1,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.diffModeTabText,"state"===i&&styles.diffModeTabTextActive,!l&&styles.diffModeTabTextDisabled],children:"STATE"})})]}),"cause"===i&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.diffSummary,children:(0,_jsxRuntime.jsx)(_RenderCauseBadge.EnhancedCauseDisplay,{cause:t.cause,nativeType:r.viewType})}),"props"===i&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.treeDiffContainer,children:n?(0,_jsxRuntime.jsx)(_dataViewer.TreeDiffViewer,{oldValue:e.capturedProps,newValue:t.capturedProps,theme:"dark",showUnchanged:!0}):(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.noDiffData,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.noDiffDataTitle,children:"Props Not Captured"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.noDiffDataText,children:'Enable "Capture Props on Render" in settings to see props diff.'})]})}),"state"===i&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.treeDiffContainer,children:l?(0,_jsxRuntime.jsx)(_dataViewer.TreeDiffViewer,{oldValue:e.capturedState,newValue:t.capturedState,theme:"dark",showUnchanged:!0}):(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.noDiffData,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.noDiffDataTitle,children:"State Not Captured"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.noDiffDataText,children:'Enable "Capture State on Render" in settings to see state diff.'})]})})]})}function RenderHistoryFooter({render:e,selectedEventIndex:t=0,onEventIndexChange:r=()=>{},isPro:i=!1}){const o=(0,_react.useMemo)(()=>e.renderHistory&&0!==e.renderHistory.length?[...e.renderHistory].sort((e,t)=>e.timestamp-t.timestamp):[],[e.renderHistory]),s=(0,_react.useMemo)(()=>i?o:o.slice(-FREE_TIER_EVENT_LIMIT),[o,i]),a=s.length,n=s[t],l=(0,_react.useCallback)(()=>{r(Math.max(0,t-1))},[t,r]),d=(0,_react.useCallback)(()=>{r(Math.min(a-1,t+1))},[t,a,r]);return a<=1?null:(0,_jsxRuntime.jsx)(_sharedUi.EventStepperFooter,{currentIndex:t,totalItems:a,onPrevious:l,onNext:d,itemLabel:"Render",subtitle:n?(0,_sharedUi.formatRelativeTime)(new Date(n.timestamp)):void 0})}const styles=_reactNative.StyleSheet.create({container:{flex:1,backgroundColor:_sharedUi.buoyColors.base},emptyContainer:{flex:1,alignItems:"center",justifyContent:"center",padding:32,gap:12},emptyTitle:{fontSize:16,fontWeight:"600",color:_sharedUi.buoyColors.text},emptyText:{fontSize:13,color:_sharedUi.buoyColors.textSecondary,textAlign:"center",lineHeight:18},viewToggleContainer:{flexDirection:"row",padding:12,gap:8},viewToggleCard:{flex:1,backgroundColor:_sharedUi.buoyColors.card,borderRadius:8,borderWidth:1,borderColor:_sharedUi.buoyColors.border,padding:10,gap:4},viewToggleCardActive:{borderColor:_sharedUi.buoyColors.primary,backgroundColor:_sharedUi.buoyColors.primary+"10"},viewToggleCardDisabled:{opacity:.5},todoBadge:{backgroundColor:_sharedUi.buoyColors.textMuted+"30",paddingHorizontal:6,paddingVertical:2,borderRadius:4,marginLeft:4},todoBadgeText:{fontSize:9,fontWeight:"700",color:_sharedUi.buoyColors.textMuted,letterSpacing:.3},viewToggleContent:{flexDirection:"row",alignItems:"center",gap:6},viewToggleLabel:{fontSize:10,fontWeight:"700",color:_sharedUi.buoyColors.textSecondary,letterSpacing:.5},viewToggleLabelActive:{color:_sharedUi.buoyColors.primary},viewToggleLabelDisabled:{color:_sharedUi.buoyColors.textMuted},viewToggleDescription:{fontSize:11,color:_sharedUi.buoyColors.textMuted,marginTop:2},contentScroll:{flex:1},contentContainer:{padding:12,paddingTop:0},noEventContainer:{padding:24,alignItems:"center"},noEventText:{fontSize:13,color:_sharedUi.buoyColors.textMuted},currentStateContainer:{gap:12},eventHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:_sharedUi.buoyColors.card,borderRadius:8,borderWidth:1,borderColor:_sharedUi.buoyColors.border,padding:12},eventHeaderLeft:{gap:2},eventTitle:{fontSize:15,fontWeight:"700",color:_sharedUi.buoyColors.text},eventTime:{fontSize:11,color:_sharedUi.buoyColors.textMuted,fontFamily:"monospace"},eventBadge:{flexDirection:"row",alignItems:"center",paddingHorizontal:10,paddingVertical:4,borderRadius:12,gap:6},eventBadgeDot:{width:6,height:6,borderRadius:3},eventBadgeText:{fontSize:10,fontWeight:"700",fontFamily:"monospace"},section:{backgroundColor:_sharedUi.buoyColors.card,borderRadius:8,borderWidth:1,borderColor:_sharedUi.buoyColors.border,overflow:"hidden"},sectionContent:{padding:12,paddingTop:8},causeContainer:{marginBottom:12},changedList:{marginBottom:12,paddingLeft:4},changedListTitle:{fontSize:11,fontWeight:"600",color:_sharedUi.buoyColors.textSecondary,marginBottom:6},changedItem:{fontSize:12,color:_sharedUi.buoyColors.text,fontFamily:"monospace",marginBottom:3,paddingLeft:8},propsScrollView:{maxHeight:150},propsJson:{fontSize:11,fontFamily:"monospace",color:_sharedUi.buoyColors.text,backgroundColor:_sharedUi.buoyColors.input,padding:10,borderRadius:6},diffContainer:{gap:12},compareBar:{flexDirection:"row",backgroundColor:_sharedUi.buoyColors.card,borderRadius:8,borderWidth:1,borderColor:_sharedUi.buoyColors.border,padding:10},compareSide:{flex:1,gap:4},compareLabelRow:{flexDirection:"row",alignItems:"center",gap:8},compareLabel:{fontSize:10,fontWeight:"700",letterSpacing:.5},compareActionBadge:{paddingHorizontal:6,paddingVertical:2,borderRadius:4},compareActionText:{fontSize:9,fontWeight:"600"},compareMeta:{flexDirection:"row",alignItems:"center",gap:6},compareIndex:{fontSize:12,fontWeight:"600",color:_sharedUi.buoyColors.text},compareTime:{fontSize:10,color:_sharedUi.buoyColors.textMuted,fontFamily:"monospace"},compareDivider:{width:30,alignItems:"center",justifyContent:"center"},compareArrow:{fontSize:16,color:_sharedUi.buoyColors.textMuted},diffSummary:{backgroundColor:_sharedUi.buoyColors.card,borderRadius:8,borderWidth:1,borderColor:_sharedUi.buoyColors.border,padding:12},diffSummaryTitle:{fontSize:11,fontWeight:"600",color:_sharedUi.buoyColors.textSecondary,marginBottom:8},diffChanges:{gap:4},diffChangeItem:{flexDirection:"row",alignItems:"center",gap:6},diffChangeIcon:{fontSize:12,fontWeight:"700",color:_sharedUi.buoyColors.warning,fontFamily:"monospace"},diffChangeKey:{fontSize:12,color:_sharedUi.buoyColors.text,fontFamily:"monospace"},diffNoChanges:{fontSize:12,color:_sharedUi.buoyColors.textMuted,fontStyle:"italic"},diffPlaceholder:{fontSize:12,color:_sharedUi.buoyColors.textMuted,fontStyle:"italic",textAlign:"center",padding:16},diffModeTabs:{flexDirection:"row",backgroundColor:_sharedUi.buoyColors.card,borderRadius:8,borderWidth:1,borderColor:_sharedUi.buoyColors.border,padding:4,gap:4},diffModeTab:{flex:1,paddingVertical:8,paddingHorizontal:12,borderRadius:6,alignItems:"center"},diffModeTabActive:{backgroundColor:_sharedUi.buoyColors.primary+"20"},diffModeTabDisabled:{opacity:.4},diffModeTabText:{fontSize:10,fontWeight:"600",color:_sharedUi.buoyColors.textSecondary,letterSpacing:.5},diffModeTabTextActive:{color:_sharedUi.buoyColors.primary},diffModeTabTextDisabled:{color:_sharedUi.buoyColors.textMuted},causeDiffContainer:{gap:8,marginBottom:12},causeDiffRow:{flexDirection:"row",alignItems:"center",gap:8},causeDiffLabel:{fontSize:11,fontWeight:"600",color:_sharedUi.buoyColors.textSecondary,minWidth:80},causeDiffValue:{fontSize:12,color:_sharedUi.buoyColors.text,fontFamily:"monospace",fontWeight:"500"},diffChangesTitle:{fontSize:11,fontWeight:"600",color:_sharedUi.buoyColors.textSecondary,marginBottom:6},treeDiffContainer:{backgroundColor:_sharedUi.buoyColors.card,borderRadius:8,borderWidth:1,borderColor:_sharedUi.buoyColors.border,overflow:"hidden",minHeight:150},noDiffData:{padding:24,alignItems:"center",gap:8},noDiffDataTitle:{fontSize:13,fontWeight:"600",color:_sharedUi.buoyColors.text},noDiffDataText:{fontSize:12,color:_sharedUi.buoyColors.textMuted,textAlign:"center",lineHeight:18},lockedBanner:{flexDirection:"row",alignItems:"center",justifyContent:"center",paddingVertical:10,paddingHorizontal:16,marginHorizontal:12,marginTop:8,backgroundColor:_sharedUi.buoyColors.warning+"15",borderRadius:8,borderWidth:1,borderColor:_sharedUi.buoyColors.warning+"30",gap:8},lockedBannerText:{color:_sharedUi.buoyColors.warning,fontSize:13,fontWeight:"500"},lockedBannerSubtext:{color:_sharedUi.buoyColors.textMuted,fontSize:12}});var _default=exports.default=RenderHistoryViewer;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.RenderListItem=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_sharedUi=require("@buoy-gg/shared-ui"),_IdentifierBadge=require("./IdentifierBadge"),_RenderCauseBadge=require("./RenderCauseBadge"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var i=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var a,n,s={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return s;if(a=t?r:i){if(a.has(e))return a.get(e);a.set(e,s)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((n=(a=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(n.get||n.set)?a(s,t,n):s[t]=e[t]);return s})(e,t)}function RenderListItemInner({render:e,onPress:t}){const i=(0,_react.useMemo)(()=>e.testID?{type:"testID",value:e.testID}:e.nativeID?{type:"nativeID",value:e.nativeID}:e.componentName?{type:"component",value:e.componentName}:e.accessibilityLabel?{type:"accessibilityLabel",value:e.accessibilityLabel}:{type:"nativeTag",value:String(e.nativeTag)},[e.testID,e.nativeID,e.componentName,e.accessibilityLabel,e.nativeTag]),r=(0,_react.useMemo)(()=>e.accessibilityLabel&&"accessibilityLabel"!==i.type?{type:"accessibilityLabel",value:e.accessibilityLabel}:null,[e.accessibilityLabel,i.type]),a=(0,_react.useMemo)(()=>{const t=Date.now()-e.lastRenderTime;return t<1e3?"just now":t<6e4?`${Math.floor(t/1e3)}s ago`:t<36e5?`${Math.floor(t/6e4)}m ago`:`${Math.floor(t/36e5)}h ago`},[e.lastRenderTime]);return(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:styles.container,onPress:()=>t(e),activeOpacity:.7,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.colorIndicator,{backgroundColor:e.color}]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.content,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.topRow,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.viewTypeContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.viewType,numberOfLines:1,children:e.displayName}),r?(0,_jsxRuntime.jsx)(_IdentifierBadge.IdentifierBadge,{type:r.type,value:r.value,compact:!0,shortLabel:!0}):e.displayName!==e.viewType?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.nativeType,numberOfLines:1,children:e.viewType}):null]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.renderCountBadge,{backgroundColor:e.color+"30"}],children:(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:[styles.renderCount,{color:e.color}],children:[e.renderCount,"x"]})})]}),e.lastRenderCause&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.causeRow,children:(0,_jsxRuntime.jsx)(_RenderCauseBadge.RenderCauseBadge,{cause:e.lastRenderCause,compact:!0,showKeys:!0,showTwoLevel:!0})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.bottomRow,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.identifierContainer,children:(0,_jsxRuntime.jsx)(_IdentifierBadge.IdentifierBadge,{type:i.type,value:i.value,compact:!0,shortLabel:!0})}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.timing,children:a})]})]}),(0,_jsxRuntime.jsx)(_sharedUi.ChevronRight,{size:16,color:_sharedUi.buoyColors.textMuted})]})}const RenderListItem=exports.RenderListItem=_react.default.memo(RenderListItemInner,(e,t)=>{const i=e.render,r=t.render;return i.id===r.id&&i.renderCount===r.renderCount&&i.color===r.color&&i.lastRenderTime===r.lastRenderTime&&i.lastRenderCause?.type===r.lastRenderCause?.type&&i.lastRenderCause?.componentCause===r.lastRenderCause?.componentCause&&e.onPress===t.onPress}),styles=_reactNative.StyleSheet.create({container:{flexDirection:"row",alignItems:"center",paddingVertical:10,paddingHorizontal:12,marginHorizontal:12,marginBottom:6,backgroundColor:_sharedUi.buoyColors.card,borderRadius:8,borderWidth:1,borderColor:_sharedUi.buoyColors.border},colorIndicator:{width:4,height:36,borderRadius:2,marginRight:10},content:{flex:1,marginRight:8},topRow:{flexDirection:"row",alignItems:"center",marginBottom:4},causeRow:{marginBottom:4},viewTypeContainer:{flex:1,marginRight:8},viewType:{fontSize:13,fontWeight:"600",color:_sharedUi.buoyColors.text},nativeType:{fontSize:10,color:_sharedUi.buoyColors.textMuted,fontFamily:"monospace",marginTop:1},accessibilityLabel:{fontSize:10,color:_sharedUi.buoyColors.primary,fontStyle:"italic",marginTop:1},renderCountBadge:{paddingHorizontal:8,paddingVertical:2,borderRadius:10},renderCount:{fontSize:11,fontWeight:"700",fontFamily:"monospace"},bottomRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:8},identifierContainer:{flex:1,flexShrink:1,overflow:"hidden"},timing:{fontSize:10,color:_sharedUi.buoyColors.textMuted,fontWeight:"500",flexShrink:0}});var _default=exports.default=RenderListItem;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.StatsDisplay=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_sharedUi=require("@buoy-gg/shared-ui"),_RenderTracker=require("../utils/RenderTracker"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,r){if("function"==typeof WeakMap)var t=new WeakMap,a=new WeakMap;return(_interopRequireWildcard=function(e,r){if(!r&&e&&e.__esModule)return e;var i,o,s={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return s;if(i=r?a:t){if(i.has(e))return i.get(e);i.set(e,s)}for(const r in e)"default"!==r&&{}.hasOwnProperty.call(e,r)&&((o=(i=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,r))&&(o.get||o.set)?i(s,r,o):s[r]=e[r]);return s})(e,r)}function StatsDisplayInner(){const[e,r]=(0,_react.useState)({totalComponents:0,totalRenders:0});return(0,_react.useEffect)(()=>_RenderTracker.RenderTracker.subscribe(()=>{r(_RenderTracker.RenderTracker.getStats())}),[]),(0,_jsxRuntime.jsxs)(_reactNative.View,{nativeID:"__rn_buoy__stats-row",style:styles.headerChip,children:[(0,_jsxRuntime.jsx)(_sharedUi.Activity,{size:12,color:_sharedUi.buoyColors.primary}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.headerChipValue,{color:_sharedUi.buoyColors.primary}],children:e.totalComponents})]})}const StatsDisplay=exports.StatsDisplay=(0,_react.memo)(StatsDisplayInner),styles=_reactNative.StyleSheet.create({headerChip:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:_sharedUi.buoyColors.hover,paddingHorizontal:8,paddingVertical:5,borderRadius:12,borderWidth:1,borderColor:_sharedUi.buoyColors.border},headerChipValue:{fontSize:12,fontWeight:"600",fontFamily:"monospace"}});var _default=exports.default=StatsDisplay;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"CategoryBadge",{enumerable:!0,get:function(){return _IdentifierBadge.CategoryBadge}}),Object.defineProperty(exports,"DetailViewHeader",{enumerable:!0,get:function(){return _ModalHeaderContent.DetailViewHeader}}),Object.defineProperty(exports,"FilterViewHeader",{enumerable:!0,get:function(){return _ModalHeaderContent.FilterViewHeader}}),Object.defineProperty(exports,"HeaderActions",{enumerable:!0,get:function(){return _ModalHeaderContent.HeaderActions}}),Object.defineProperty(exports,"HighlightFilterView",{enumerable:!0,get:function(){return _HighlightFilterView.HighlightFilterView}}),Object.defineProperty(exports,"HighlightUpdatesModal",{enumerable:!0,get:function(){return _HighlightUpdatesModal.HighlightUpdatesModal}}),Object.defineProperty(exports,"IDENTIFIER_CONFIG",{enumerable:!0,get:function(){return _IdentifierBadge.IDENTIFIER_CONFIG}}),Object.defineProperty(exports,"IdentifierBadge",{enumerable:!0,get:function(){return _IdentifierBadge.IdentifierBadge}}),Object.defineProperty(exports,"IsolatedRenderList",{enumerable:!0,get:function(){return _IsolatedRenderList.IsolatedRenderList}}),Object.defineProperty(exports,"MainListHeader",{enumerable:!0,get:function(){return _ModalHeaderContent.MainListHeader}}),Object.defineProperty(exports,"RenderDetailView",{enumerable:!0,get:function(){return _RenderDetailView.RenderDetailView}}),Object.defineProperty(exports,"RenderListItem",{enumerable:!0,get:function(){return _RenderListItem.RenderListItem}}),Object.defineProperty(exports,"SearchSection",{enumerable:!0,get:function(){return _ModalHeaderContent.SearchSection}}),Object.defineProperty(exports,"StatsDisplay",{enumerable:!0,get:function(){return _StatsDisplay.StatsDisplay}});var _HighlightUpdatesModal=require("./HighlightUpdatesModal"),_RenderListItem=require("./RenderListItem"),_RenderDetailView=require("./RenderDetailView"),_HighlightFilterView=require("./HighlightFilterView"),_IdentifierBadge=require("./IdentifierBadge"),_IsolatedRenderList=require("./IsolatedRenderList"),_StatsDisplay=require("./StatsDisplay"),_ModalHeaderContent=require("./ModalHeaderContent");

package/lib/commonjs/highlight-updates/utils/HighlightUpdatesController.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _ProfilerInterceptor=require("./ProfilerInterceptor"),_RenderTracker=require("./RenderTracker"),_PerformanceLogger=require("./PerformanceLogger"),_RenderCauseDetector=require("./RenderCauseDetector");let globalEnabled=!1,initialized=!1,hook=null,highlightCallback=null,badgePressCallback=null,traceUpdatesUnsubscribe=null,isProcessing=!1,isFrozen=!1;const freezeListeners=new Set,stateListeners=new Set,nodeRenderCounts=new Map,COLORS=["#37afa9","#63b19e","#80b393","#97b488","#abb67d","#beb771","#cfb965","#dfba57","#efbb49","#febc38"],DEBUG=!1;function debugLog(e,t){}function getPublicInstance(e){if(!e)return null;const t=e;return t.canonical?.publicInstance?t.canonical.publicInstance:t.canonical&&"function"==typeof t.canonical.measure?t.canonical:"function"==typeof t.measure?t:null}function getNativeTag(e){const t=e;if(null!=t.__nativeTag)return t.__nativeTag;if(null!=t._nativeTag)return t._nativeTag;if(null!=t.nativeTag)return t.nativeTag;if(t.canonical){if(null!=t.canonical.__nativeTag)return t.canonical.__nativeTag;if(null!=t.canonical._nativeTag)return t.canonical._nativeTag}return null}function extractComponentInfo(e){const t=e,n={viewType:"Unknown"};t?.canonical?.viewConfig?.uiViewClassName?n.viewType=t.canonical.viewConfig.uiViewClassName:t?.viewConfig?.uiViewClassName&&(n.viewType=t.viewConfig.uiViewClassName);const r=t?.canonical?.internalInstanceHandle,i=t?.canonical?.currentProps,a=t?.canonical?.pendingProps,o=r?.pendingProps,s=r?.memoizedProps;return n.testID=i?.testID||a?.testID||o?.testID||s?.testID||void 0,n.nativeID=i?.nativeID||a?.nativeID||o?.nativeID||s?.nativeID||void 0,n.accessibilityLabel=i?.accessibilityLabel||a?.accessibilityLabel||o?.accessibilityLabel||s?.accessibilityLabel||void 0,n.componentName=getOwningComponentName(r)||void 0,n}function describeNodeForLog(e){const t=e,n=getPublicInstance(e),r={nativeTag:(getNativeTag(e)||getNativeTag(n))??"unknown",type:t?.canonical?"Fabric":"Legacy",hasMeasure:"function"==typeof n?.measure};if(t){if(r.stateNodeKeys=Object.keys(t).slice(0,20),t.node&&(r.nodeKeys=Object.keys(t.node).slice(0,20)),t.viewConfig&&(r.viewConfig={uiViewClassName:t.viewConfig.uiViewClassName,validAttributes:t.viewConfig.validAttributes?Object.keys(t.viewConfig.validAttributes).slice(0,10):void 0}),t.canonical){const e=t.canonical;if(r.canonicalKeys=Object.keys(e).slice(0,20),e.viewConfig&&(r.canonicalViewConfig={uiViewClassName:e.viewConfig.uiViewClassName}),null!=e.nativeTag&&(r.canonicalNativeTag=e.nativeTag),e.internalInstanceHandle){const t=e.internalInstanceHandle;if(r.fiberKeys=Object.keys(t).slice(0,30),t.type&&(r.fiberType="function"==typeof t.type?t.type.name||t.type.displayName||"function":t.type),t.elementType&&(r.fiberElementType="function"==typeof t.elementType?t.elementType.name||t.elementType.displayName||"function":t.elementType),t._debugOwner){const e=t._debugOwner;r.fiberDebugOwner=e.type?.name||e.type?.displayName||e.elementType?.name||"unknown"}t._debugSource&&(r.fiberDebugSource=t._debugSource),null!=t.tag&&(r.fiberTag=t.tag),t.pendingProps&&(t.pendingProps.nativeID&&(r.fiberPendingNativeID=t.pendingProps.nativeID),t.pendingProps.testID&&(r.fiberPendingTestID=t.pendingProps.testID)),t.memoizedProps&&(t.memoizedProps.nativeID&&(r.fiberMemoizedNativeID=t.memoizedProps.nativeID),t.memoizedProps.testID&&(r.fiberMemoizedTestID=t.memoizedProps.testID))}if(e.publicInstance){const t=e.publicInstance;r.publicInstanceKeys=Object.keys(t).slice(0,20),null!=t.nativeID&&(r.nativeID=t.nativeID),null!=t._nativeID&&(r._nativeID=t._nativeID),t.props&&(r.publicInstanceProps=Object.keys(t.props).slice(0,15),t.props.nativeID&&(r.propsNativeID=t.props.nativeID),t.props.testID&&(r.propsTestID=t.props.testID),t.props.accessibilityLabel&&(r.accessibilityLabel=t.props.accessibilityLabel))}e.currentProps&&(r.currentPropsKeys=Object.keys(e.currentProps).slice(0,15),null!=e.currentProps.nativeID&&(r.currentPropsNativeID=e.currentProps.nativeID),null!=e.currentProps.testID&&(r.currentPropsTestID=e.currentProps.testID),null!=e.currentProps.accessibilityLabel&&(r.currentPropsAccessLabel=e.currentProps.accessibilityLabel)),e.pendingProps&&(r.pendingPropsKeys=Object.keys(e.pendingProps).slice(0,15),null!=e.pendingProps.nativeID&&(r.pendingPropsNativeID=e.pendingProps.nativeID),null!=e.pendingProps.testID&&(r.pendingPropsTestID=e.pendingProps.testID))}if(t._debugOwner){const e=t._debugOwner;r.debugOwnerType=e.type?.name||e.type?.displayName||typeof e.type}t._debugSource&&(r.debugSource=t._debugSource)}return r}const DEBUG_LOGGING=!1;let renderingLock=!1,renderingLockTimeout=null;const RENDER_LOCK_DURATION=350,renderedOverlayTags=new Set;function isOurOverlayTag(e){return null!=e&&renderedOverlayTags.has(e)}const DEV_TOOLS_COMPONENT_NAMES=new Set(["JsModalComponent","JsModal","HighlightUpdatesModal","HighlightFilterView","RenderDetailView","RenderListItem","RenderListItemInner","TypePicker","PatternInput","PatternChip","DetectedItemsSection","DetectedCategoryBadge","IdentifierBadge","CategoryBadge","AppRenderer","AppOverlay","FloatingTools","DialDevTools","HighlightUpdatesOverlay","DevToolsVisibilityProvider","AppHostProvider","MinimizedToolsProvider","ModalHeader","TabSelector","SectionHeader","DraggableHeader","WindowControls","LogBox","LogBoxLog","LogBoxLogNotification","LogBoxNotificationContainer","_LogBoxNotificationContainer","LogBoxInspector","LogBoxInspectorContainer","LogBoxInspectorHeader","LogBoxInspectorBody","LogBoxInspectorFooter","LogBoxInspectorMessageHeader","LogBoxInspectorStackFrame","LogBoxInspectorSection","LogBoxButton","LogBoxMessage"]),DEV_TOOLS_COMPONENT_PREFIXES=["JsModal","HighlightUpdates","RenderList","RenderDetail"],DEV_TOOLS_NATIVE_IDS=new Set(["highlight-updates-overlay","jsmodal-root","__rn_buoy__highlight-modal","logbox_inspector","logbox"]),devToolsNodeCache=new Map,CACHE_MAX_SIZE=500;function isDevToolsNativeID(e){if(!e)return!1;if(DEV_TOOLS_NATIVE_IDS.has(e))return!0;const t=e.charCodeAt(0);return!(95!==t||!e.startsWith("__highlight_")&&!e.startsWith("__rn_buoy__"))||!(108!==t||!e.startsWith("logbox"))}function getComponentName(e){if(!e)return null;const t=e.type;if(t){if("string"==typeof t)return t;if(t.name)return t.name;if(t.displayName)return t.displayName}const n=e.elementType;if(n){if(n.name)return n.name;if(n.displayName)return n.displayName}return null}const INTERNAL_COMPONENT_NAMES=new Set(["View","Text","TextImpl","Image","ScrollView","FlatList","SectionList","TouchableOpacity","TouchableHighlight","TouchableWithoutFeedback","Pressable","TextInput","Switch","ActivityIndicator","Modal","StatusBar","KeyboardAvoidingView","AnimatedComponent","AnimatedComponentWrapper","ScreenContainer","ScreenStack","Screen","ScreenContentWrapper","Svg","G","Path","Rect","Circle","Line","Polygon","Polyline","Ellipse","Text as SVGText","TSpan","TextPath","Use","Symbol","Defs","ClipPath","LinearGradient","RadialGradient","Stop","Mask","Pattern","Image as SVGImage","SafeAreaProvider","SafeAreaView","SafeAreaListener","GestureHandlerRootView","GestureDetector","ReanimatedView","ReanimatedText","ReanimatedImage","ReanimatedScrollView","Fragment","Suspense","Provider","Consumer","Context","ForwardRef"]);function isInternalComponent(e){return!e||!!INTERNAL_COMPONENT_NAMES.has(e)||"Unknown"===e||"Component"===e||!!e.startsWith("Animated")}function getOwningComponentName(e){if(!e)return null;let t=e._debugOwner||e.return,n=0,r=null;for(;t&&n<30;){const e=getComponentName(t);if(e&&"string"!=typeof t.type&&(r||(r=e),!isInternalComponent(e)))return e;t=t.return,n++}return r}function isOurOverlayNode(e){const t=e,n=t?.canonical?.internalInstanceHandle,r=getNativeTag(e)||getNativeTag(t?.canonical?.publicInstance);if(null!=r){const e=devToolsNodeCache.get(r);if(void 0!==e)return e}let i=!1;if(isDevToolsNativeID(n?.pendingProps?.nativeID||n?.memoizedProps?.nativeID||t?.canonical?.currentProps?.nativeID||null))i=!0;else if(n){let e=n,t=0;for(;e&&t<30;){const n=getComponentName(e);if(n){if(DEV_TOOLS_COMPONENT_NAMES.has(n)){i=!0;break}for(const e of DEV_TOOLS_COMPONENT_PREFIXES)if(n.startsWith(e)){i=!0;break}if(i)break}if(isDevToolsNativeID(e.pendingProps?.nativeID||e.memoizedProps?.nativeID)){i=!0;break}e=e.return,t++}}if(i&&null!=r){if(devToolsNodeCache.size>=500){const e=Array.from(devToolsNodeCache.keys());for(let t=0;t<250;t++)devToolsNodeCache.delete(e[t])}devToolsNodeCache.set(r,i)}return i}function getColorForRenderCount(e){const t=Math.min(e-1,COLORS.length-1);return COLORS[Math.max(0,t)]}function handleTraceUpdates(e){if(0===e.size)return;if(!globalEnabled)return;if(_RenderTracker.RenderTracker.getState().isPaused)return;_PerformanceLogger.PerformanceLogger.isEnabled()&&(0,_PerformanceLogger.markEventReceived)();const t=_RenderTracker.RenderTracker.getBatchSize(),n=_PerformanceLogger.PerformanceLogger.startBatch(e.size,t),r=[];let i=0,a=0;const o=_RenderTracker.RenderTracker.hasActiveFilters();for(const t of e)if(t&&"object"==typeof t){if(isOurOverlayNode(t)){i++;continue}const e=getPublicInstance(t),n=getNativeTag(t)||getNativeTag(e);if(null==n)continue;const s=extractComponentInfo(t);if(o&&!_RenderTracker.RenderTracker.passesFilters(s)){a++;continue}let l,c;_RenderTracker.RenderTracker.getSettings().showRenderCount?(l=(nodeRenderCounts.get(n)||0)+1,nodeRenderCounts.set(n,l),c=getColorForRenderCount(l)):(l=0,c=COLORS[0]),r.push({node:t,color:c,count:l})}if(n.markFilteringComplete(i+a,r.length),0===r.length)return void n.finish();if(!highlightCallback)return void(isProcessing=!1);n.markMeasurementStart();const s=r.slice(0,t).map(({node:e,color:t,count:n})=>new Promise(r=>{const i=getPublicInstance(e);if(!i)return void r({rect:null,stateNode:e,color:t,count:n});const a=getNativeTag(e)||getNativeTag(i);if(null!=a)try{i.measure((i,o,s,l,c,d)=>{r(null!=c&&null!=d&&null!=s&&null!=l?{rect:{id:a,x:c,y:d,width:s,height:l,color:t,count:n},stateNode:e,color:t,count:n}:{rect:null,stateNode:e,color:t,count:n})})}catch(i){r({rect:null,stateNode:e,color:t,count:n})}else r({rect:null,stateNode:e,color:t,count:n})}));Promise.all(s).then(e=>{const t=e.filter(e=>null!==e.rect),r=t.map(e=>e.rect);n.markMeasurementComplete(t.length,e.length-t.length),_RenderTracker.RenderTracker.startBatch();const i=_RenderTracker.RenderTracker.getSettings(),a=i.trackRenderCauses&&i.showRenderCount;let o=null;if(a){o=new Set;for(const{rect:e}of t)e&&o.add(e.id)}for(const{rect:e,stateNode:n,color:r,count:s}of t)if(e){const t=extractComponentInfo(n);let l;if(a&&o){const t=n,r=t?.canonical?.internalInstanceHandle,a="off"!==i.debugLogLevel?i.debugLogLevel:i.debugRawFiberLogging?"all":"off";l=(0,_RenderCauseDetector.detectRenderCause)(e.id,r,o,a)}_RenderTracker.RenderTracker.trackRender({nativeTag:e.id,viewType:t.viewType,testID:t.testID,nativeID:t.nativeID,accessibilityLabel:t.accessibilityLabel,componentName:t.componentName,measurements:{x:e.x,y:e.y,width:e.width,height:e.height},color:r,count:s,renderCause:l})}_RenderTracker.RenderTracker.endBatch(),n.markTrackingComplete(),r.length>0&&highlightCallback&&highlightCallback(r),n.markCallbackComplete(),n.finish()}).catch(e=>{console.error("[HighlightUpdates] Error in measurement pipeline:",e),n.finish()})}function setTraceUpdatesOnRenderers(e){if(!hook?.rendererInterfaces)return void debugLog("No rendererInterfaces available");let t=0;if(hook.rendererInterfaces.forEach((n,r)=>{if("function"==typeof n.setTraceUpdatesEnabled)try{n.setTraceUpdatesEnabled(e),t++,debugLog(`Renderer ${r}: setTraceUpdatesEnabled(${e})`)}catch(e){debugLog(`Renderer ${r}: error setting trace updates`,e)}else debugLog(`Renderer ${r}: no setTraceUpdatesEnabled method`)}),debugLog(`Set trace updates ${e?"enabled":"disabled"} on ${t} renderer(s)`),hook.reactDevtoolsAgent?.setTraceUpdatesEnabled)try{hook.reactDevtoolsAgent.setTraceUpdatesEnabled(e),debugLog("Also set trace updates on agent")}catch(e){debugLog("Error setting trace updates on agent",e)}}function subscribeToTraceUpdates(){hook&&(traceUpdatesUnsubscribe||(debugLog("Subscribing to traceUpdates event"),"function"==typeof hook.sub?(traceUpdatesUnsubscribe=hook.sub("traceUpdates",handleTraceUpdates),debugLog("Subscribed using hook.sub()")):debugLog("hook.sub not available, traceUpdates may not work"),setTraceUpdatesOnRenderers(!0)))}function unsubscribeFromTraceUpdates(){setTraceUpdatesOnRenderers(!1),traceUpdatesUnsubscribe&&(traceUpdatesUnsubscribe(),traceUpdatesUnsubscribe=null,debugLog("Unsubscribed from traceUpdates event"))}function setHighlightCallback(e){highlightCallback=e,debugLog("Highlight callback "+(e?"set":"cleared"))}function setBadgePressCallback(e){badgePressCallback=e,debugLog("Badge press callback "+(e?"set":"cleared"))}function getBadgePressCallback(){return badgePressCallback}function handleBadgePress(e){badgePressCallback&&badgePressCallback(e)}let spotlightCallback=null,currentSpotlightTag=null;function setSpotlightCallback(e){spotlightCallback=e,e&&null!==currentSpotlightTag&&e(currentSpotlightTag)}function setSpotlight(e){currentSpotlightTag=e,spotlightCallback&&spotlightCallback(e)}function getSpotlight(){return currentSpotlightTag}function notifyStateListeners(){stateListeners.forEach(e=>{try{e(globalEnabled)}catch(e){console.error("[HighlightUpdates] Error in state listener:",e)}})}function subscribe(e){return stateListeners.add(e),e(globalEnabled),()=>{stateListeners.delete(e)}}function initialize(){if("undefined"!=typeof __DEV__&&!__DEV__)return debugLog("Only available in development builds"),!1;if(initialized)return!0;if(hook=window?.__REACT_DEVTOOLS_GLOBAL_HOOK__||null,!hook)return debugLog("React DevTools hook not found"),!1;if(debugLog("Hook found"),debugLog(`Hook has sub: ${"function"==typeof hook.sub}`),debugLog(`Hook has on: ${"function"==typeof hook.on}`),debugLog(`Hook has emit: ${"function"==typeof hook.emit}`),(0,_ProfilerInterceptor.installProfilerInterceptor)(),hook.rendererInterfaces&&hook.rendererInterfaces.size>0)return initialized=!0,debugLog(`Initialized with ${hook.rendererInterfaces.size} renderer(s)`),exposeGlobally(),!0;const e=setInterval(()=>{hook?.rendererInterfaces&&hook.rendererInterfaces.size>0&&(clearInterval(e),initialized=!0,debugLog(`Initialized with ${hook.rendererInterfaces.size} renderer(s) (delayed)`),exposeGlobally())},100);return setTimeout(()=>clearInterval(e),1e4),!1}function exposeGlobally(){"undefined"!=typeof window&&(window.__HIGHLIGHT_UPDATES_CONTROLLER__={enable:enable,disable:disable,toggle:toggle,isEnabled:isEnabled,setEnabled:setEnabled,subscribe:subscribe,initialize:initialize,destroy:destroy,isInitialized:()=>initialized,setHighlightCallback:setHighlightCallback})}function enable(){("undefined"==typeof __DEV__||__DEV__)&&(initialized||initialize(),globalEnabled||(debugLog("Enabling highlights"),subscribeToTraceUpdates(),_RenderTracker.RenderTracker.start(),globalEnabled=!0,notifyStateListeners()))}function disable(){("undefined"==typeof __DEV__||__DEV__)&&globalEnabled&&(debugLog("Disabling highlights"),renderingLock=!1,isProcessing=!1,renderingLockTimeout&&(clearTimeout(renderingLockTimeout),renderingLockTimeout=null),renderedOverlayTags.clear(),devToolsNodeCache.clear(),(0,_RenderCauseDetector.clearRenderCauseState)(),unsubscribeFromTraceUpdates(),_RenderTracker.RenderTracker.stop(),globalEnabled=!1,notifyStateListeners())}function toggle(){("undefined"==typeof __DEV__||__DEV__)&&(globalEnabled?disable():enable())}function clearRenderCounts(){nodeRenderCounts.clear(),_RenderTracker.RenderTracker.clear(),debugLog("Cleared render counts")}function isEnabled(){return globalEnabled}function setEnabled(e){e?enable():disable()}function isInitialized(){return initialized}function notifyFreezeListeners(){freezeListeners.forEach(e=>{try{e(isFrozen)}catch(e){console.error("[HighlightUpdates] Error in freeze listener:",e)}})}function subscribeToFreeze(e){return freezeListeners.add(e),e(isFrozen),()=>{freezeListeners.delete(e)}}function freeze(){("undefined"==typeof __DEV__||__DEV__)&&(isFrozen||(isFrozen=!0,debugLog("Freeze mode enabled"),notifyFreezeListeners()))}function unfreeze(){("undefined"==typeof __DEV__||__DEV__)&&isFrozen&&(isFrozen=!1,debugLog("Freeze mode disabled"),highlightCallback&&highlightCallback([]),notifyFreezeListeners())}function toggleFreeze(){isFrozen?unfreeze():freeze()}function getFrozen(){return isFrozen}function destroy(){initialized&&(unsubscribeFromTraceUpdates(),(0,_ProfilerInterceptor.uninstallProfilerInterceptor)(),(0,_ProfilerInterceptor.setComparisonCallback)(null),isFrozen=!1,freezeListeners.clear(),globalEnabled=!1,hook=null,highlightCallback=null,initialized=!1,"undefined"!=typeof window&&delete window.__HIGHLIGHT_UPDATES_CONTROLLER__,debugLog("Destroyed"))}const HighlightUpdatesController={subscribe:subscribe,enable:enable,disable:disable,toggle:toggle,isEnabled:isEnabled,setEnabled:setEnabled,initialize:initialize,destroy:destroy,isInitialized:isInitialized,setHighlightCallback:setHighlightCallback,clearRenderCounts:clearRenderCounts,freeze:freeze,unfreeze:unfreeze,toggleFreeze:toggleFreeze,getFrozen:getFrozen,subscribeToFreeze:subscribeToFreeze,setBadgePressCallback:setBadgePressCallback,getBadgePressCallback:getBadgePressCallback,handleBadgePress:handleBadgePress,setSpotlightCallback:setSpotlightCallback,setSpotlight:setSpotlight,getSpotlight:getSpotlight};var _default=exports.default=HighlightUpdatesController;

package/lib/commonjs/highlight-updates/utils/PerformanceLogger.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.PerformanceLogger=void 0,exports.markEventReceived=markEventReceived,exports.markOverlayRendered=markOverlayRendered;let lastEventTimestamp=0,pendingBatchId=null;function markEventReceived(){return lastEventTimestamp=performance.now(),lastEventTimestamp}function markOverlayRendered(e,t){lastEventTimestamp>0&&e>0&&(lastEventTimestamp=0)}class PerformanceLoggerSingleton{enabled=!1;batchCounter=0;listeners=new Set;rollingStats={batchCount:0,totalNodes:0,totalFiltered:0,totalProcessed:0,totalTime:0,maxTime:0,minTime:1/0,avgMeasurementTime:0};recentBatches=[];MAX_HISTORY=100;summaryInterval=null;SUMMARY_INTERVAL_MS=1e4;setEnabled(e){const t=this.enabled;this.enabled=e,e&&!t?this.resetStats():!e&&t&&this.stopSummaryInterval()}isEnabled(){return this.enabled}startBatch(e,t){const a="batch_"+ ++this.batchCounter,n=performance.now();let r,i=null,s=null,o=null,l=null,m=null,c=0,h=0,d=0,g=0;return{markFilteringComplete:(e,t)=>{i=performance.now(),c=e,h=t},markMeasurementStart:()=>{s=performance.now()},markMeasurementComplete:(e,t)=>{o=performance.now(),d=e,g=t},markTrackingComplete:()=>{l=performance.now()},markCallbackComplete:()=>{m=performance.now()},setOverlayRenderTime:e=>{r=e},getBatchId:()=>a,finish:()=>{const u=performance.now(),T={batchId:a,timestamp:Date.now(),nodesReceived:e,nodesFiltered:c,nodesToProcess:h,batchSize:t,nodesInBatch:Math.min(h,t),filteringTime:i?i-n:0,measurementTime:s&&o?o-s:0,trackingTime:o&&l?l-o:0,callbackTime:l&&m?m-l:0,totalTime:u-n,measurementSuccessCount:d,measurementFailCount:g,overlayRenderTime:r};return this.enabled&&this.recordMetrics(T),T}}}recordMetrics(e){this.rollingStats.batchCount++,this.rollingStats.totalNodes+=e.nodesReceived,this.rollingStats.totalFiltered+=e.nodesFiltered,this.rollingStats.totalProcessed+=e.nodesInBatch,this.rollingStats.totalTime+=e.totalTime,this.rollingStats.maxTime=Math.max(this.rollingStats.maxTime,e.totalTime),this.rollingStats.minTime=Math.min(this.rollingStats.minTime,e.totalTime);const t=this.rollingStats.avgMeasurementTime,a=this.rollingStats.batchCount;this.rollingStats.avgMeasurementTime=t+(e.measurementTime-t)/a,this.recentBatches.push(e),this.recentBatches.length>this.MAX_HISTORY&&this.recentBatches.shift(),this.notifyListeners(e)}logBatch(e){const{batchId:t,nodesReceived:a,nodesFiltered:n,nodesInBatch:r,batchSize:i,filteringTime:s,measurementTime:o,trackingTime:l,callbackTime:m,totalTime:c,measurementSuccessCount:h,measurementFailCount:d,overlayRenderTime:g}=e;console.log(`[HighlightPerf] ${t} | In:${a} Filt:${n} Proc:${r}/${i} | Filter:${s.toFixed(1)}ms Measure:${o.toFixed(1)}ms Track:${l.toFixed(1)}ms Callback:${m.toFixed(1)}ms | Total:${c.toFixed(1)}ms`+(g?` Render:${g.toFixed(1)}ms`:"")+` | Success:${h} Fail:${d}`),c>100&&console.warn(`[HighlightPerf] ⚠️ SLOW BATCH: ${c.toFixed(1)}ms - Measurement phase: ${o.toFixed(1)}ms (${(o/c*100).toFixed(0)}%)`)}logSummary(){if(0===this.rollingStats.batchCount)return;const e=this.rollingStats,t=e.totalTime/e.batchCount,a=e.totalNodes/e.batchCount;console.log(`\n[HighlightPerf] ════════ SUMMARY (last ${this.SUMMARY_INTERVAL_MS/1e3}s) ════════\n  Batches: ${e.batchCount}\n  Avg nodes/batch: ${a.toFixed(1)} (filtered: ${(e.totalFiltered/e.batchCount).toFixed(1)})\n  Avg total time: ${t.toFixed(1)}ms\n  Avg measurement time: ${e.avgMeasurementTime.toFixed(1)}ms\n  Min/Max time: ${e.minTime.toFixed(1)}ms / ${e.maxTime.toFixed(1)}ms\n══════════════════════════════════════════════\n`),this.resetStats()}resetStats(){this.rollingStats={batchCount:0,totalNodes:0,totalFiltered:0,totalProcessed:0,totalTime:0,maxTime:0,minTime:1/0,avgMeasurementTime:0}}startSummaryInterval(){this.stopSummaryInterval(),this.summaryInterval=setInterval(()=>{this.logSummary()},this.SUMMARY_INTERVAL_MS)}stopSummaryInterval(){this.summaryInterval&&(clearInterval(this.summaryInterval),this.summaryInterval=null)}subscribe(e){return this.listeners.add(e),()=>{this.listeners.delete(e)}}notifyListeners(e){for(const t of this.listeners)try{t(e)}catch(e){console.error("[HighlightPerf] Error in metrics listener:",e)}}getRecentBatches(){return[...this.recentBatches]}getRollingStats(){return{...this.rollingStats}}clear(){this.recentBatches=[],this.resetStats(),this.batchCounter=0}generateReport(){const e=this.recentBatches;if(0===e.length)return"No performance data collected yet.";const t=e.reduce((e,t)=>e+t.totalTime,0)/e.length,a=e.reduce((e,t)=>e+t.measurementTime,0)/e.length,n=e.filter(e=>e.totalTime>100),r=e.filter(e=>e.totalTime<20);return`\n╔══════════════════════════════════════════════════════════════╗\n║              HIGHLIGHT UPDATES PERFORMANCE REPORT            ║\n╠══════════════════════════════════════════════════════════════╣\n║ Total batches analyzed: ${e.length.toString().padStart(5)}                              ║\n║ Average total time:     ${t.toFixed(1).padStart(5)}ms                             ║\n║ Average measure time:   ${a.toFixed(1).padStart(5)}ms (${(a/t*100).toFixed(0)}% of total)           ║\n╠══════════════════════════════════════════════════════════════╣\n║ Fast batches (<20ms):   ${r.length.toString().padStart(5)} (${(r.length/e.length*100).toFixed(0)}%)                          ║\n║ Slow batches (>100ms):  ${n.length.toString().padStart(5)} (${(n.length/e.length*100).toFixed(0)}%)                          ║\n╠══════════════════════════════════════════════════════════════╣\n║ Time breakdown (avg):                                        ║\n║   Filtering:    ${e.reduce((e,t)=>e+t.filteringTime,0/e.length).toFixed(1).padStart(6)}ms                                    ║\n║   Measurement:  ${a.toFixed(1).padStart(6)}ms  ← Primary bottleneck              ║\n║   Tracking:     ${(e.reduce((e,t)=>e+t.trackingTime,0)/e.length).toFixed(1).padStart(6)}ms                                    ║\n║   Callback:     ${(e.reduce((e,t)=>e+t.callbackTime,0)/e.length).toFixed(1).padStart(6)}ms                                    ║\n╚══════════════════════════════════════════════════════════════╝\n`}}const PerformanceLogger=exports.PerformanceLogger=new PerformanceLoggerSingleton;var _default=exports.default=PerformanceLogger;