@buoy-gg/highlight-updates 7.0.77 → 7.0.78

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/lib/commonjs/highlight-updates/components/HighlightFilterView.js +1 -1
  2. package/lib/commonjs/highlight-updates/components/IsolatedRenderList.js +1 -1
  3. package/lib/commonjs/highlight-updates/components/RenderDetailView.js +1 -1
  4. package/lib/commonjs/highlight-updates/components/RenderHistoryViewer.js +1 -1
  5. package/lib/commonjs/highlight-updates/components/RendersCopySettingsView.js +1 -1
  6. package/lib/module/highlight-updates/components/HighlightFilterView.js +1 -1
  7. package/lib/module/highlight-updates/components/IsolatedRenderList.js +1 -1
  8. package/lib/module/highlight-updates/components/RenderDetailView.js +1 -1
  9. package/lib/module/highlight-updates/components/RenderHistoryViewer.js +1 -1
  10. package/lib/module/highlight-updates/components/RendersCopySettingsView.js +1 -1
  11. package/lib/web/index.mjs +7 -7
  12. package/package.json +6 -6
package/lib/commonjs/highlight-updates/components/HighlightFilterView.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.HighlightFilterView=HighlightFilterView;exports.default=void 0;var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _sharedUi=require("@buoy-gg/shared-ui");var _IdentifierBadge=require("./IdentifierBadge");var _testIDs=require("../utils/testIDs");var _jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(n,l){if("function"==typeof WeakMap)var i=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(t,a){if(!a&&t&&t.__esModule)return t;var s,d,g={__proto__:null,default:t};if(null===t||"object"!=typeof t&&"function"!=typeof t)return g;if(s=a?r:i){if(s.has(t))return s.get(t);s.set(t,g)}for(const u in t)"default"!==u&&{}.hasOwnProperty.call(t,u)&&((d=(s=Object.defineProperty)&&Object.getOwnPropertyDescriptor(t,u))&&(d.get||d.set)?s(g,u,d):g[u]=t[u]);return g})(n,l)}const getFilterConfig=n=>_IdentifierBadge.IDENTIFIER_CONFIG[n];const FILTER_TYPES=["any","viewType","testID","nativeID","component","accessibilityLabel"];function TypePicker({mode:n,onSelect:l,onCancel:i}){return(0,_jsxRuntime.jsxs)(_reactNative.View,{nativeID:"__rn_buoy__type-picker",testID:`buoy-highlight-${n}-types`,style:styles.typePicker,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.typePickerRow,children:FILTER_TYPES.map(r=>{const t=getFilterConfig(r);const a=t.icon;return(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{testID:`buoy-highlight-${n}-type-${r.toLowerCase()}`,accessibilityRole:"button",accessibilityLabel:t.label,style:[styles.typeOption,{backgroundColor:t.color+"15",borderColor:t.color+"40"}],onPress:()=>l(r),children:[(0,_jsxRuntime.jsx)(a,{size:14,color:t.color}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.typeOptionText,{color:t.color}],children:t.label})]},r)})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{testID:`buoy-highlight-${n}-types-cancel`,accessibilityRole:"button",accessibilityLabel:"Cancel",onPress:i,style:styles.typePickerCancel,children:(0,_jsxRuntime.jsx)(_sharedUi.X,{size:16,color:_sharedUi.night.color.textTertiary})})]})}function PatternInput({mode:n,type:l,onSubmit:i,onCancel:r}){const[t,a]=(0,_react.useState)("");const s=getFilterConfig(l);const d=()=>{if(t.trim()){i(t.trim())}};return(0,_jsxRuntime.jsxs)(_reactNative.View,{nativeID:"__rn_buoy__pattern-input",testID:`buoy-highlight-${n}-input-row`,style:styles.patternInputContainer,children:[(0,_jsxRuntime.jsx)(_IdentifierBadge.IdentifierBadge,{type:l,value:"",badgeOnly:true,compact:true}),(0,_jsxRuntime.jsx)(_reactNative.TextInput,{testID:`buoy-highlight-${n}-input`,value:t,onChangeText:a,onSubmitEditing:d,placeholder:"Enter pattern...",placeholderTextColor:_sharedUi.night.color.placeholder,style:styles.patternInput,autoFocus:true,returnKeyType:"done",autoCorrect:false,autoCapitalize:"none"}),t.trim()&&(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{testID:`buoy-highlight-${n}-submit`,accessibilityRole:"button",accessibilityLabel:"Add pattern",onPress:d,style:[styles.addPatternButton,{backgroundColor:s.color+"20"}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.addPatternButtonText,{color:s.color}],children:"Add"})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{testID:`buoy-highlight-${n}-input-cancel`,accessibilityRole:"button",accessibilityLabel:"Cancel",onPress:r,style:styles.cancelButton,children:(0,_jsxRuntime.jsx)(_sharedUi.X,{size:16,color:_sharedUi.night.color.textTertiary})})]})}function PatternChip({mode:n,pattern:l,onRemove:i}){const r=getFilterConfig(l.type);return(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{testID:(0,_testIDs.patternChipTestID)(n,l.type,l.value),accessibilityRole:"button",accessibilityLabel:`${r.label} ${l.value}, tap to remove`,style:[styles.patternChip,{borderColor:r.color+"40"}],onPress:i,activeOpacity:.7,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.patternChipBadge,{backgroundColor:r.color+"20"}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.patternChipBadgeText,{color:r.color}],children:r.shortLabel})}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.patternChipValue,numberOfLines:1,children:l.value}),(0,_jsxRuntime.jsx)(_sharedUi.X,{size:12,color:_sharedUi.night.color.textTertiary,style:styles.patternChipX})]})}const ALL_CATEGORY_CONFIG={label:"All",shortLabel:"All",color:_sharedUi.night.color.textSecondary,icon:_sharedUi.Box};function DetectedCategoryBadge({filterType:n,count:l,isSelected:i,onPress:r}){const t=n==="all"?ALL_CATEGORY_CONFIG:getFilterConfig(n);const a=`buoy-highlight-detected-cat-${String(n).toLowerCase()}`;return(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{testID:a,accessibilityRole:"button",accessibilityLabel:`${t.label}, ${l}`,style:[styles.categoryBadge,{backgroundColor:t.color+"15",borderColor:i?t.color:t.color+"40",borderWidth:i?2:1}],onPress:r,children:[(0,_jsxRuntime.jsx)(t.icon,{size:12,color:t.color}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.categoryBadgeText,{color:t.color}],children:t.label}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.categoryBadgeCountBubble,{backgroundColor:t.color+"25"}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:`${a}-count`,style:[styles.categoryBadgeCount,{color:t.color}],children:l})})]})}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"}];const 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:n,onFilterChange:l,settings:i,onSettingsChange:r,availableProps:t,activeTab:a}){const[s,d]=(0,_react.useState)(false);const[g,u]=(0,_react.useState)(false);const[b,T]=(0,_react.useState)(null);const[f,m]=(0,_react.useState)(null);const[h,p]=(0,_react.useState)("all");const[c,y]=(0,_react.useState)(null);const v=e=>{switch(e){case"viewType":return t.viewTypes.map(o=>({value:o,type:"viewType"}));case"testID":return t.testIDs.map(o=>({value:o,type:"testID"}));case"nativeID":return t.nativeIDs.map(o=>({value:o,type:"nativeID"}));case"component":return t.componentNames.map(o=>({value:o,type:"component"}));case"accessibilityLabel":return t.accessibilityLabels.map(o=>({value:o,type:"accessibilityLabel"}));case"all":default:return[...t.viewTypes.map(o=>({value:o,type:"viewType"})),...t.testIDs.map(o=>({value:o,type:"testID"})),...t.nativeIDs.map(o=>({value:o,type:"nativeID"})),...t.componentNames.map(o=>({value:o,type:"component"})),...t.accessibilityLabels.map(o=>({value:o,type:"accessibilityLabel"}))]}};const w=v(h);const S=t.viewTypes.length+t.testIDs.length+t.nativeIDs.length+t.componentNames.length+t.accessibilityLabels.length;const I=(0,_react.useCallback)((e,o)=>{const x=[...n.includePatterns,{type:e,value:o}];l({includePatterns:x});T(null)},[n.includePatterns,l]);const j=(0,_react.useCallback)((e,o)=>{const x=[...n.excludePatterns,{type:e,value:o}];l({excludePatterns:x});m(null)},[n.excludePatterns,l]);const D=(0,_react.useCallback)(e=>{const o=n.includePatterns.filter((x,C)=>C!==e);l({includePatterns:o})},[n.includePatterns,l]);const R=(0,_react.useCallback)(e=>{const o=n.excludePatterns.filter((x,C)=>C!==e);l({excludePatterns:o})},[n.excludePatterns,l]);const P=(0,_react.useCallback)((e,o)=>{y({type:e,value:o})},[]);const V=(0,_react.useCallback)(()=>{if(c){I(c.type,c.value);y(null)}},[c,I]);const z=(0,_react.useCallback)(()=>{if(c){j(c.type,c.value);y(null)}},[c,j]);return(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.container,children:(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{nativeID:"__rn_buoy__filter-view",testID:"buoy-highlight-filter-scroll",style:styles.scrollView,contentContainerStyle:styles.scrollContent,showsVerticalScrollIndicator:false,children:a==="filters"?(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.night.color.accent,size:12}),(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Title,{children:"INCLUDE ONLY"}),n.includePatterns.length>0&&(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Badge,{testID:"buoy-highlight-include-count",count:n.includePatterns.length,color:_sharedUi.night.color.accent})]}),(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."}),n.includePatterns.length>0&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.patternChips,children:n.includePatterns.map((e,o)=>(0,_jsxRuntime.jsx)(PatternChip,{mode:"include",pattern:e,onRemove:()=>D(o)},`${e.type}-${e.value}-${o}`))}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.addPatternRow,children:s?(0,_jsxRuntime.jsx)(TypePicker,{mode:"include",onSelect:e=>{d(false);T(e)},onCancel:()=>d(false)}):b?(0,_jsxRuntime.jsx)(PatternInput,{mode:"include",type:b,onSubmit:e=>I(b,e),onCancel:()=>T(null)}):(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{testID:"buoy-highlight-include-add",accessibilityRole:"button",accessibilityLabel:"Add include pattern",style:[styles.addButton,{borderColor:_sharedUi.night.color.accentBorderStrong}],onPress:()=>d(true),children:[(0,_jsxRuntime.jsx)(_sharedUi.Plus,{size:14,color:_sharedUi.night.color.accent}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.addButtonText,{color:_sharedUi.night.color.accent}],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.night.color.accent,size:12}),(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Title,{children:"EXCLUDE"}),n.excludePatterns.length>0&&(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Badge,{testID:"buoy-highlight-exclude-count",count:n.excludePatterns.length,color:_sharedUi.night.color.accent})]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.sectionDescription,children:"Hide components matching these patterns from the list."}),n.excludePatterns.length>0&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.patternChips,children:n.excludePatterns.map((e,o)=>(0,_jsxRuntime.jsx)(PatternChip,{mode:"exclude",pattern:e,onRemove:()=>R(o)},`${e.type}-${e.value}-${o}`))}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.addPatternRow,children:g?(0,_jsxRuntime.jsx)(TypePicker,{mode:"exclude",onSelect:e=>{u(false);m(e)},onCancel:()=>u(false)}):f?(0,_jsxRuntime.jsx)(PatternInput,{mode:"exclude",type:f,onSubmit:e=>j(f,e),onCancel:()=>m(null)}):(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{testID:"buoy-highlight-exclude-add",accessibilityRole:"button",accessibilityLabel:"Add exclude pattern",style:[styles.addButton,{borderColor:_sharedUi.night.color.accentBorderStrong}],onPress:()=>u(true),children:[(0,_jsxRuntime.jsx)(_sharedUi.Plus,{size:14,color:_sharedUi.night.color.accent}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.addButtonText,{color:_sharedUi.night.color.accent}],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.night.color.warning,size:12}),(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Title,{children:"RENDER COUNT RANGE"}),(n.minRenderCount!==void 0||n.maxRenderCount!==void 0)&&(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Badge,{count:1,color:_sharedUi.night.color.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",testID:"buoy-highlight-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:n.minRenderCount!==void 0?String(n.minRenderCount):"",onChangeText:e=>{const o=parseInt(e,10);if(e===""||e===void 0){l({minRenderCount:void 0})}else if(!isNaN(o)&&o>=0){l({minRenderCount:o})}},testID:"buoy-highlight-range-min",placeholder:"0",placeholderTextColor:_sharedUi.night.color.placeholder,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:n.maxRenderCount!==void 0?String(n.maxRenderCount):"",onChangeText:e=>{const o=parseInt(e,10);if(e===""||e===void 0){l({maxRenderCount:void 0})}else if(!isNaN(o)&&o>=0){l({maxRenderCount:o})}},testID:"buoy-highlight-range-max",placeholder:"\u221E",placeholderTextColor:_sharedUi.night.color.placeholder,style:styles.renderCountInput,keyboardType:"number-pad",returnKeyType:"done"})]})]}),(n.minRenderCount!==void 0||n.maxRenderCount!==void 0)&&(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{testID:"buoy-highlight-range-clear",accessibilityRole:"button",accessibilityLabel:"Clear range",style:styles.clearRangeButton,onPress:()=>l({minRenderCount:void 0,maxRenderCount:void 0}),children:[(0,_jsxRuntime.jsx)(_sharedUi.X,{size:12,color:_sharedUi.night.color.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.night.color.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:true,showsHorizontalScrollIndicator:false,style:styles.categoryBadgeScroll,contentContainerStyle:styles.categoryBadgeScrollContent,children:[S>0&&(0,_jsxRuntime.jsx)(DetectedCategoryBadge,{filterType:"all",count:S,isSelected:h==="all",onPress:()=>p("all")}),t.viewTypes.length>0&&(0,_jsxRuntime.jsx)(DetectedCategoryBadge,{filterType:"viewType",count:t.viewTypes.length,isSelected:h==="viewType",onPress:()=>p("viewType")}),t.testIDs.length>0&&(0,_jsxRuntime.jsx)(DetectedCategoryBadge,{filterType:"testID",count:t.testIDs.length,isSelected:h==="testID",onPress:()=>p("testID")}),t.nativeIDs.length>0&&(0,_jsxRuntime.jsx)(DetectedCategoryBadge,{filterType:"nativeID",count:t.nativeIDs.length,isSelected:h==="nativeID",onPress:()=>p("nativeID")}),t.componentNames.length>0&&(0,_jsxRuntime.jsx)(DetectedCategoryBadge,{filterType:"component",count:t.componentNames.length,isSelected:h==="component",onPress:()=>p("component")}),t.accessibilityLabels.length>0&&(0,_jsxRuntime.jsx)(DetectedCategoryBadge,{filterType:"accessibilityLabel",count:t.accessibilityLabels.length,isSelected:h==="accessibilityLabel",onPress:()=>p("accessibilityLabel")})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{nativeID:"__rn_buoy__detected-items",testID:"buoy-highlight-detected",style:styles.detectedItemsContainer,children:w.length>0?(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{testID:"buoy-highlight-detected-scroll",style:styles.detectedItemsScroll,contentContainerStyle:styles.detectedItems,nestedScrollEnabled:true,showsVerticalScrollIndicator:true,children:w.map(e=>{const o=getFilterConfig(e.type);return(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{testID:(0,_testIDs.detectedItemTestID)(e.type,e.value),accessibilityRole:"button",accessibilityLabel:`${o.label} ${e.value}`,style:[styles.detectedItem,{borderColor:o.color+"40"}],onPress:()=>P(e.type,e.value),children:h==="all"?(0,_jsxRuntime.jsx)(_IdentifierBadge.IdentifierBadge,{type:e.type,value:e.value,compact:true,shortLabel:true}):(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.detectedItemText,numberOfLines:1,children:e.value})},`${e.type}-${e.value}`)})}):(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:"buoy-highlight-detected-empty",style:styles.emptyText,children:"No items detected yet. Start tracking to see components here."})})]}),(0,_jsxRuntime.jsx)(_reactNative.Modal,{visible:c!==null,transparent:true,animationType:"fade",onRequestClose:()=>y(null),children:(0,_jsxRuntime.jsx)(_reactNative.Pressable,{accessible:false,testID:"buoy-highlight-detected-popup-backdrop",style:styles.modalOverlay,onPress:()=>y(null),children:(0,_jsxRuntime.jsx)(_reactNative.View,{accessible:false,testID:"buoy-highlight-detected-popup",style:styles.actionPopup,children:c&&(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.actionPopupHeader,children:(0,_jsxRuntime.jsx)(_IdentifierBadge.IdentifierBadge,{type:c.type,value:c.value,compact:true,shortLabel:true})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.actionPopupButtons,children:[(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{testID:"buoy-highlight-detected-popup-include",accessibilityRole:"button",accessibilityLabel:"Include only",style:[styles.actionPopupButton,styles.actionPopupInclude],onPress:V,children:[(0,_jsxRuntime.jsx)(_sharedUi.Eye,{size:16,color:_sharedUi.night.color.accent}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.actionPopupButtonText,{color:_sharedUi.night.color.accent}],children:"Include Only"})]}),(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{testID:"buoy-highlight-detected-popup-exclude",accessibilityRole:"button",accessibilityLabel:"Exclude",style:[styles.actionPopupButton,styles.actionPopupExclude],onPress:z,children:[(0,_jsxRuntime.jsx)(_sharedUi.Filter,{size:16,color:_sharedUi.night.color.accent}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.actionPopupButtonText,{color:_sharedUi.night.color.accent}],children:"Exclude"})]})]}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{testID:"buoy-highlight-detected-popup-cancel",accessibilityRole:"button",accessibilityLabel:"Cancel",style:styles.actionPopupCancel,onPress:()=>y(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.night.color.textTertiary,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.night.color.textTertiary,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,{testID:(0,_testIDs.settingTestID)("showRenderCount"),value:i.showRenderCount,onValueChange:e=>{r({showRenderCount:e});if(!e&&i.trackRenderCauses){r({trackRenderCauses:false})}},trackColor:{false:_sharedUi.night.color.surfaceElevated,true:_sharedUi.night.color.accent+"80"},thumbColor:i.showRenderCount?_sharedUi.night.color.accent:_sharedUi.night.color.knob})]}),(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,!i.showRenderCount&&styles.settingLabelDisabled],children:"Track Render Causes"}),(0,_jsxRuntime.jsx)(_reactNative.Switch,{testID:(0,_testIDs.settingTestID)("trackRenderCauses"),value:i.trackRenderCauses,onValueChange:e=>r({trackRenderCauses:e}),trackColor:{false:_sharedUi.night.color.surfaceElevated,true:_sharedUi.night.color.warning+"80"},thumbColor:i.trackRenderCauses?_sharedUi.night.color.warning:_sharedUi.night.color.knob,disabled:!i.showRenderCount})]}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.settingDescription,children:["Detect WHY components render (props, hooks, parent re-render).",!i.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,!i.trackRenderCauses&&styles.settingLabelDisabled],children:"Enable Render History"}),(0,_jsxRuntime.jsx)(_reactNative.Switch,{testID:(0,_testIDs.settingTestID)("enableRenderHistory"),value:i.enableRenderHistory,onValueChange:e=>r({enableRenderHistory:e}),trackColor:{false:_sharedUi.night.color.surfaceElevated,true:_sharedUi.night.color.accent+"80"},thumbColor:i.enableRenderHistory?_sharedUi.night.color.accent:_sharedUi.night.color.knob,disabled:!i.trackRenderCauses})]}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.settingDescription,children:["Store render events for each component to view in the History tab.",!i.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,{testID:"buoy-highlight-setting-debugLogLevel-value",style:[styles.settingValueText,i.debugLogLevel!=="off"&&{color:_sharedUi.night.color.warning}],children:DEBUG_LOG_LEVEL_PRESETS.find(e=>e.value===i.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,i.debugLogLevel===e.value&&styles.batchSizePresetActive,e.value!=="off"&&i.debugLogLevel===e.value&&{backgroundColor:_sharedUi.night.color.warningSoft,borderColor:_sharedUi.night.color.warning}],onPress:()=>r({debugLogLevel:e.value}),testID:`buoy-highlight-preset-log-${e.value}`,accessibilityRole:"button",accessibilityLabel:`Debug log level ${e.label}`,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.batchSizePresetText,i.debugLogLevel===e.value&&styles.batchSizePresetTextActive,e.value!=="off"&&i.debugLogLevel===e.value&&{color:_sharedUi.night.color.warning}],children:e.label})},e.value))}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.settingDescriptionMuted,children:[DEBUG_LOG_LEVEL_PRESETS.find(e=>e.value===i.debugLogLevel)?.description,i.debugLogLevel!=="off"&&" \u2022 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,{testID:"buoy-highlight-setting-batchSize-value",style:styles.settingValueText,children:i.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,i.batchSize===e.value&&styles.batchSizePresetActive],onPress:()=>r({batchSize:e.value}),testID:`buoy-highlight-preset-batch-${e.value}`,accessibilityRole:"button",accessibilityLabel:`Batch size ${e.label}`,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.batchSizePresetText,i.batchSize===e.value&&styles.batchSizePresetTextActive],children:e.label})},e.value))})]}),(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:"Show host views"}),(0,_jsxRuntime.jsx)(_reactNative.Switch,{testID:(0,_testIDs.settingTestID)("showHostViews"),value:!!i.showHostViews,onValueChange:e=>r({showHostViews:e}),trackColor:{false:_sharedUi.night.color.surfaceElevated,true:_sharedUi.night.color.accent+"80"},thumbColor:i.showHostViews?_sharedUi.night.color.accent:_sharedUi.night.color.knob})]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.settingDescription,children:"Include anonymous View / RCTView / Text hosts. Off by default so the list is named composites (what actually re-rendered)."})]}),(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:"Highlight Dev Tools"}),(0,_jsxRuntime.jsx)(_reactNative.Switch,{testID:(0,_testIDs.settingTestID)("excludeDevTools"),value:!i.excludeDevTools,onValueChange:e=>r({excludeDevTools:!e}),trackColor:{false:_sharedUi.night.color.surfaceElevated,true:_sharedUi.night.color.accent+"80"},thumbColor:!i.excludeDevTools?_sharedUi.night.color.accent:_sharedUi.night.color.knob})]}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.settingDescription,children:["Show re-render highlights on Buoy dev tools (floating menu, modals, etc.). Useful for optimizing the dev tools themselves.",!i.excludeDevTools&&(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.settingWarning,children:["\n","The highlight overlay is always excluded to prevent infinite loops."]})]})]})]})]})})})})}const styles=_reactNative.StyleSheet.create({container:{flex:1,backgroundColor:"transparent"},scrollView:{flex:1},scrollContent:{paddingHorizontal:16,paddingTop:12,paddingBottom:32},section:{backgroundColor:_sharedUi.night.color.surface,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.border,marginBottom:12,overflow:"hidden"},sectionDescription:{fontSize:11,color:_sharedUi.night.color.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.night.color.surfaceElevated,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.night.color.text,fontFamily:_sharedUi.monoFont,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.night.color.surfaceElevated,gap:6},typeOptionText:{fontSize:11,fontWeight:"600"},typePickerCancel:{padding:8},patternInputContainer:{flexDirection:"row",alignItems:"center",backgroundColor:_sharedUi.night.color.surfaceElevated,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.border,paddingLeft:4,paddingRight:8,paddingVertical:4,gap:4},patternInput:{flex:1,fontSize:12,color:_sharedUi.night.color.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.night.color.surfaceElevated,borderRadius:6,borderWidth:1,paddingVertical:6,paddingHorizontal:10,gap:6},detectedItemText:{fontSize:11,color:_sharedUi.night.color.text,fontFamily:_sharedUi.monoFont},emptyText:{fontSize:11,color:_sharedUi.night.color.textTertiary,fontStyle:"italic",textAlign:"center",paddingVertical:16,paddingHorizontal:16},howItWorks:{paddingHorizontal:16,paddingVertical:12},howItWorksText:{fontSize:11,color:_sharedUi.night.color.textTertiary,lineHeight:18,fontFamily:_sharedUi.monoFont},howItWorksBold:{fontWeight:"700",color:_sharedUi.night.color.textSecondary},modalOverlay:{flex:1,backgroundColor:"rgba(0, 0, 0, 0.5)",justifyContent:"center",alignItems:"center",padding:32},actionPopup:{backgroundColor:_sharedUi.night.color.surface,borderRadius:12,borderWidth:1,borderColor:_sharedUi.night.color.border,width:"100%",maxWidth:300,overflow:"hidden"},actionPopupHeader:{padding:16,borderBottomWidth:1,borderBottomColor:_sharedUi.night.color.separator,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.night.color.accentSoft},actionPopupExclude:{backgroundColor:_sharedUi.night.color.accentSoft},actionPopupButtonText:{fontSize:13,fontWeight:"600"},actionPopupCancel:{padding:12,borderTopWidth:1,borderTopColor:_sharedUi.night.color.separator,alignItems:"center"},actionPopupCancelText:{fontSize:13,color:_sharedUi.night.color.textTertiary,fontWeight:"500"},settingsSection:{paddingHorizontal:16,paddingTop:8,paddingBottom:16},settingItem:{gap:8},settingItemSpaced:{marginTop:16,paddingTop:16,borderTopWidth:1,borderTopColor:_sharedUi.night.color.separator},settingHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},settingLabel:{fontSize:13,fontWeight:"600",color:_sharedUi.night.color.text},settingValue:{backgroundColor:_sharedUi.night.color.fillSecondary,paddingHorizontal:10,paddingVertical:4,borderRadius:6},settingValueText:{fontSize:12,fontWeight:"700",color:_sharedUi.night.color.textTertiary,fontFamily:_sharedUi.monoFont},settingDescription:{fontSize:11,color:_sharedUi.night.color.textSecondary,lineHeight:16},settingDescriptionMuted:{fontSize:10,color:_sharedUi.night.color.textTertiary,lineHeight:14,marginTop:4,fontStyle:"italic"},settingLabelDisabled:{color:_sharedUi.night.color.textTertiary},settingWarning:{color:_sharedUi.night.color.warning,fontWeight:"500"},batchSizePresets:{flexDirection:"row",flexWrap:"wrap",gap:8,marginTop:4},batchSizePreset:{paddingVertical:8,paddingHorizontal:14,borderRadius:6,backgroundColor:_sharedUi.night.color.surfaceElevated,borderWidth:1,borderColor:_sharedUi.night.color.border},batchSizePresetActive:{backgroundColor:_sharedUi.night.color.fillSecondary,borderColor:_sharedUi.night.color.fillTertiary},batchSizePresetText:{fontSize:12,fontWeight:"500",color:_sharedUi.night.color.textSecondary,fontFamily:_sharedUi.monoFont},batchSizePresetTextActive:{color:_sharedUi.night.color.textTertiary,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.night.color.textTertiary,textTransform:"uppercase",letterSpacing:.5},renderCountInput:{backgroundColor:_sharedUi.night.color.surfaceElevated,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.border,paddingVertical:10,paddingHorizontal:12,fontSize:14,fontWeight:"600",color:_sharedUi.night.color.text,fontFamily:_sharedUi.monoFont,textAlign:"center"},renderCountSeparator:{fontSize:12,color:_sharedUi.night.color.textTertiary,marginTop:18},clearRangeButton:{flexDirection:"row",alignItems:"center",justifyContent:"center",paddingVertical:8,paddingHorizontal:12,borderRadius:6,backgroundColor:_sharedUi.night.color.warningSoft,borderWidth:1,borderColor:_sharedUi.night.color.warning+"40",gap:6,alignSelf:"center"},clearRangeButtonText:{fontSize:11,fontWeight:"600",color:_sharedUi.night.color.warning}});var _default=exports.default=HighlightFilterView;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.HighlightFilterView=HighlightFilterView;exports.default=void 0;var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _sharedUi=require("@buoy-gg/shared-ui");var _IdentifierBadge=require("./IdentifierBadge");var _testIDs=require("../utils/testIDs");var _jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(n,l){if("function"==typeof WeakMap)var i=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(t,a){if(!a&&t&&t.__esModule)return t;var s,d,g={__proto__:null,default:t};if(null===t||"object"!=typeof t&&"function"!=typeof t)return g;if(s=a?r:i){if(s.has(t))return s.get(t);s.set(t,g)}for(const u in t)"default"!==u&&{}.hasOwnProperty.call(t,u)&&((d=(s=Object.defineProperty)&&Object.getOwnPropertyDescriptor(t,u))&&(d.get||d.set)?s(g,u,d):g[u]=t[u]);return g})(n,l)}const getFilterConfig=n=>_IdentifierBadge.IDENTIFIER_CONFIG[n];const FILTER_TYPES=["any","viewType","testID","nativeID","component","accessibilityLabel"];function TypePicker({mode:n,onSelect:l,onCancel:i}){return(0,_jsxRuntime.jsxs)(_reactNative.View,{nativeID:"__rn_buoy__type-picker",testID:`buoy-highlight-${n}-types`,style:styles.typePicker,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.typePickerRow,children:FILTER_TYPES.map(r=>{const t=getFilterConfig(r);const a=t.icon;return(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{testID:`buoy-highlight-${n}-type-${r.toLowerCase()}`,accessibilityRole:"button",accessibilityLabel:t.label,style:[styles.typeOption,{backgroundColor:t.color+"15",borderColor:t.color+"40"}],onPress:()=>l(r),children:[(0,_jsxRuntime.jsx)(a,{size:14,color:t.color}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.typeOptionText,{color:t.color}],children:t.label})]},r)})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{testID:`buoy-highlight-${n}-types-cancel`,accessibilityRole:"button",accessibilityLabel:"Cancel",onPress:i,style:styles.typePickerCancel,children:(0,_jsxRuntime.jsx)(_sharedUi.X,{size:16,color:_sharedUi.night.color.textTertiary})})]})}function PatternInput({mode:n,type:l,onSubmit:i,onCancel:r}){const[t,a]=(0,_react.useState)("");const s=getFilterConfig(l);const d=()=>{if(t.trim()){i(t.trim())}};return(0,_jsxRuntime.jsxs)(_reactNative.View,{nativeID:"__rn_buoy__pattern-input",testID:`buoy-highlight-${n}-input-row`,style:styles.patternInputContainer,children:[(0,_jsxRuntime.jsx)(_IdentifierBadge.IdentifierBadge,{type:l,value:"",badgeOnly:true,compact:true}),(0,_jsxRuntime.jsx)(_reactNative.TextInput,{testID:`buoy-highlight-${n}-input`,value:t,onChangeText:a,onSubmitEditing:d,placeholder:"Enter pattern...",placeholderTextColor:_sharedUi.night.color.placeholder,style:styles.patternInput,autoFocus:true,returnKeyType:"done",autoCorrect:false,autoCapitalize:"none"}),t.trim()&&(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{testID:`buoy-highlight-${n}-submit`,accessibilityRole:"button",accessibilityLabel:"Add pattern",onPress:d,style:[styles.addPatternButton,{backgroundColor:s.color+"20"}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.addPatternButtonText,{color:s.color}],children:"Add"})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{testID:`buoy-highlight-${n}-input-cancel`,accessibilityRole:"button",accessibilityLabel:"Cancel",onPress:r,style:styles.cancelButton,children:(0,_jsxRuntime.jsx)(_sharedUi.X,{size:16,color:_sharedUi.night.color.textTertiary})})]})}function PatternChip({mode:n,pattern:l,onRemove:i}){const r=getFilterConfig(l.type);return(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{testID:(0,_testIDs.patternChipTestID)(n,l.type,l.value),accessibilityRole:"button",accessibilityLabel:`${r.label} ${l.value}, tap to remove`,style:[styles.patternChip,{borderColor:r.color+"40"}],onPress:i,activeOpacity:.7,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.patternChipBadge,{backgroundColor:r.color+"20"}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.patternChipBadgeText,{color:r.color}],children:r.shortLabel})}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.patternChipValue,numberOfLines:1,children:l.value}),(0,_jsxRuntime.jsx)(_sharedUi.X,{size:12,color:_sharedUi.night.color.textTertiary,style:styles.patternChipX})]})}const ALL_CATEGORY_CONFIG={label:"All",shortLabel:"All",color:_sharedUi.night.color.textSecondary,icon:_sharedUi.Box};function DetectedCategoryBadge({filterType:n,count:l,isSelected:i,onPress:r}){const t=n==="all"?ALL_CATEGORY_CONFIG:getFilterConfig(n);const a=`buoy-highlight-detected-cat-${String(n).toLowerCase()}`;return(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{testID:a,accessibilityRole:"button",accessibilityLabel:`${t.label}, ${l}`,style:[styles.categoryBadge,{backgroundColor:t.color+"15",borderColor:i?t.color:t.color+"40",borderWidth:i?2:1}],onPress:r,children:[(0,_jsxRuntime.jsx)(t.icon,{size:12,color:t.color}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.categoryBadgeText,{color:t.color}],children:t.label}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.categoryBadgeCountBubble,{backgroundColor:t.color+"25"}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:`${a}-count`,style:[styles.categoryBadgeCount,{color:t.color}],children:l})})]})}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"}];const 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:n,onFilterChange:l,settings:i,onSettingsChange:r,availableProps:t,activeTab:a}){const[s,d]=(0,_react.useState)(false);const[g,u]=(0,_react.useState)(false);const[b,T]=(0,_react.useState)(null);const[f,m]=(0,_react.useState)(null);const[h,p]=(0,_react.useState)("all");const[c,y]=(0,_react.useState)(null);const v=e=>{switch(e){case"viewType":return t.viewTypes.map(o=>({value:o,type:"viewType"}));case"testID":return t.testIDs.map(o=>({value:o,type:"testID"}));case"nativeID":return t.nativeIDs.map(o=>({value:o,type:"nativeID"}));case"component":return t.componentNames.map(o=>({value:o,type:"component"}));case"accessibilityLabel":return t.accessibilityLabels.map(o=>({value:o,type:"accessibilityLabel"}));case"all":default:return[...t.viewTypes.map(o=>({value:o,type:"viewType"})),...t.testIDs.map(o=>({value:o,type:"testID"})),...t.nativeIDs.map(o=>({value:o,type:"nativeID"})),...t.componentNames.map(o=>({value:o,type:"component"})),...t.accessibilityLabels.map(o=>({value:o,type:"accessibilityLabel"}))]}};const w=v(h);const S=t.viewTypes.length+t.testIDs.length+t.nativeIDs.length+t.componentNames.length+t.accessibilityLabels.length;const I=(0,_react.useCallback)((e,o)=>{const x=[...n.includePatterns,{type:e,value:o}];l({includePatterns:x});T(null)},[n.includePatterns,l]);const j=(0,_react.useCallback)((e,o)=>{const x=[...n.excludePatterns,{type:e,value:o}];l({excludePatterns:x});m(null)},[n.excludePatterns,l]);const D=(0,_react.useCallback)(e=>{const o=n.includePatterns.filter((x,C)=>C!==e);l({includePatterns:o})},[n.includePatterns,l]);const R=(0,_react.useCallback)(e=>{const o=n.excludePatterns.filter((x,C)=>C!==e);l({excludePatterns:o})},[n.excludePatterns,l]);const P=(0,_react.useCallback)((e,o)=>{y({type:e,value:o})},[]);const V=(0,_react.useCallback)(()=>{if(c){I(c.type,c.value);y(null)}},[c,I]);const z=(0,_react.useCallback)(()=>{if(c){j(c.type,c.value);y(null)}},[c,j]);return(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.container,children:(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{keyboardShouldPersistTaps:"handled",nativeID:"__rn_buoy__filter-view",testID:"buoy-highlight-filter-scroll",style:styles.scrollView,contentContainerStyle:styles.scrollContent,showsVerticalScrollIndicator:false,children:a==="filters"?(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.night.color.accent,size:12}),(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Title,{children:"INCLUDE ONLY"}),n.includePatterns.length>0&&(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Badge,{testID:"buoy-highlight-include-count",count:n.includePatterns.length,color:_sharedUi.night.color.accent})]}),(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."}),n.includePatterns.length>0&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.patternChips,children:n.includePatterns.map((e,o)=>(0,_jsxRuntime.jsx)(PatternChip,{mode:"include",pattern:e,onRemove:()=>D(o)},`${e.type}-${e.value}-${o}`))}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.addPatternRow,children:s?(0,_jsxRuntime.jsx)(TypePicker,{mode:"include",onSelect:e=>{d(false);T(e)},onCancel:()=>d(false)}):b?(0,_jsxRuntime.jsx)(PatternInput,{mode:"include",type:b,onSubmit:e=>I(b,e),onCancel:()=>T(null)}):(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{testID:"buoy-highlight-include-add",accessibilityRole:"button",accessibilityLabel:"Add include pattern",style:[styles.addButton,{borderColor:_sharedUi.night.color.accentBorderStrong}],onPress:()=>d(true),children:[(0,_jsxRuntime.jsx)(_sharedUi.Plus,{size:14,color:_sharedUi.night.color.accent}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.addButtonText,{color:_sharedUi.night.color.accent}],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.night.color.accent,size:12}),(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Title,{children:"EXCLUDE"}),n.excludePatterns.length>0&&(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Badge,{testID:"buoy-highlight-exclude-count",count:n.excludePatterns.length,color:_sharedUi.night.color.accent})]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.sectionDescription,children:"Hide components matching these patterns from the list."}),n.excludePatterns.length>0&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.patternChips,children:n.excludePatterns.map((e,o)=>(0,_jsxRuntime.jsx)(PatternChip,{mode:"exclude",pattern:e,onRemove:()=>R(o)},`${e.type}-${e.value}-${o}`))}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.addPatternRow,children:g?(0,_jsxRuntime.jsx)(TypePicker,{mode:"exclude",onSelect:e=>{u(false);m(e)},onCancel:()=>u(false)}):f?(0,_jsxRuntime.jsx)(PatternInput,{mode:"exclude",type:f,onSubmit:e=>j(f,e),onCancel:()=>m(null)}):(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{testID:"buoy-highlight-exclude-add",accessibilityRole:"button",accessibilityLabel:"Add exclude pattern",style:[styles.addButton,{borderColor:_sharedUi.night.color.accentBorderStrong}],onPress:()=>u(true),children:[(0,_jsxRuntime.jsx)(_sharedUi.Plus,{size:14,color:_sharedUi.night.color.accent}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.addButtonText,{color:_sharedUi.night.color.accent}],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.night.color.warning,size:12}),(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Title,{children:"RENDER COUNT RANGE"}),(n.minRenderCount!==void 0||n.maxRenderCount!==void 0)&&(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Badge,{count:1,color:_sharedUi.night.color.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",testID:"buoy-highlight-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:n.minRenderCount!==void 0?String(n.minRenderCount):"",onChangeText:e=>{const o=parseInt(e,10);if(e===""||e===void 0){l({minRenderCount:void 0})}else if(!isNaN(o)&&o>=0){l({minRenderCount:o})}},testID:"buoy-highlight-range-min",placeholder:"0",placeholderTextColor:_sharedUi.night.color.placeholder,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:n.maxRenderCount!==void 0?String(n.maxRenderCount):"",onChangeText:e=>{const o=parseInt(e,10);if(e===""||e===void 0){l({maxRenderCount:void 0})}else if(!isNaN(o)&&o>=0){l({maxRenderCount:o})}},testID:"buoy-highlight-range-max",placeholder:"\u221E",placeholderTextColor:_sharedUi.night.color.placeholder,style:styles.renderCountInput,keyboardType:"number-pad",returnKeyType:"done"})]})]}),(n.minRenderCount!==void 0||n.maxRenderCount!==void 0)&&(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{testID:"buoy-highlight-range-clear",accessibilityRole:"button",accessibilityLabel:"Clear range",style:styles.clearRangeButton,onPress:()=>l({minRenderCount:void 0,maxRenderCount:void 0}),children:[(0,_jsxRuntime.jsx)(_sharedUi.X,{size:12,color:_sharedUi.night.color.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.night.color.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:true,showsHorizontalScrollIndicator:false,style:styles.categoryBadgeScroll,contentContainerStyle:styles.categoryBadgeScrollContent,children:[S>0&&(0,_jsxRuntime.jsx)(DetectedCategoryBadge,{filterType:"all",count:S,isSelected:h==="all",onPress:()=>p("all")}),t.viewTypes.length>0&&(0,_jsxRuntime.jsx)(DetectedCategoryBadge,{filterType:"viewType",count:t.viewTypes.length,isSelected:h==="viewType",onPress:()=>p("viewType")}),t.testIDs.length>0&&(0,_jsxRuntime.jsx)(DetectedCategoryBadge,{filterType:"testID",count:t.testIDs.length,isSelected:h==="testID",onPress:()=>p("testID")}),t.nativeIDs.length>0&&(0,_jsxRuntime.jsx)(DetectedCategoryBadge,{filterType:"nativeID",count:t.nativeIDs.length,isSelected:h==="nativeID",onPress:()=>p("nativeID")}),t.componentNames.length>0&&(0,_jsxRuntime.jsx)(DetectedCategoryBadge,{filterType:"component",count:t.componentNames.length,isSelected:h==="component",onPress:()=>p("component")}),t.accessibilityLabels.length>0&&(0,_jsxRuntime.jsx)(DetectedCategoryBadge,{filterType:"accessibilityLabel",count:t.accessibilityLabels.length,isSelected:h==="accessibilityLabel",onPress:()=>p("accessibilityLabel")})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{nativeID:"__rn_buoy__detected-items",testID:"buoy-highlight-detected",style:styles.detectedItemsContainer,children:w.length>0?(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{keyboardShouldPersistTaps:"handled",testID:"buoy-highlight-detected-scroll",style:styles.detectedItemsScroll,contentContainerStyle:styles.detectedItems,nestedScrollEnabled:true,showsVerticalScrollIndicator:true,children:w.map(e=>{const o=getFilterConfig(e.type);return(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{testID:(0,_testIDs.detectedItemTestID)(e.type,e.value),accessibilityRole:"button",accessibilityLabel:`${o.label} ${e.value}`,style:[styles.detectedItem,{borderColor:o.color+"40"}],onPress:()=>P(e.type,e.value),children:h==="all"?(0,_jsxRuntime.jsx)(_IdentifierBadge.IdentifierBadge,{type:e.type,value:e.value,compact:true,shortLabel:true}):(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.detectedItemText,numberOfLines:1,children:e.value})},`${e.type}-${e.value}`)})}):(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:"buoy-highlight-detected-empty",style:styles.emptyText,children:"No items detected yet. Start tracking to see components here."})})]}),(0,_jsxRuntime.jsx)(_reactNative.Modal,{visible:c!==null,transparent:true,animationType:"fade",onRequestClose:()=>y(null),children:(0,_jsxRuntime.jsx)(_reactNative.Pressable,{accessible:false,testID:"buoy-highlight-detected-popup-backdrop",style:styles.modalOverlay,onPress:()=>y(null),children:(0,_jsxRuntime.jsx)(_reactNative.View,{accessible:false,testID:"buoy-highlight-detected-popup",style:styles.actionPopup,children:c&&(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.actionPopupHeader,children:(0,_jsxRuntime.jsx)(_IdentifierBadge.IdentifierBadge,{type:c.type,value:c.value,compact:true,shortLabel:true})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.actionPopupButtons,children:[(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{testID:"buoy-highlight-detected-popup-include",accessibilityRole:"button",accessibilityLabel:"Include only",style:[styles.actionPopupButton,styles.actionPopupInclude],onPress:V,children:[(0,_jsxRuntime.jsx)(_sharedUi.Eye,{size:16,color:_sharedUi.night.color.accent}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.actionPopupButtonText,{color:_sharedUi.night.color.accent}],children:"Include Only"})]}),(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{testID:"buoy-highlight-detected-popup-exclude",accessibilityRole:"button",accessibilityLabel:"Exclude",style:[styles.actionPopupButton,styles.actionPopupExclude],onPress:z,children:[(0,_jsxRuntime.jsx)(_sharedUi.Filter,{size:16,color:_sharedUi.night.color.accent}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.actionPopupButtonText,{color:_sharedUi.night.color.accent}],children:"Exclude"})]})]}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{testID:"buoy-highlight-detected-popup-cancel",accessibilityRole:"button",accessibilityLabel:"Cancel",style:styles.actionPopupCancel,onPress:()=>y(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.night.color.textTertiary,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.night.color.textTertiary,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,{testID:(0,_testIDs.settingTestID)("showRenderCount"),value:i.showRenderCount,onValueChange:e=>{r({showRenderCount:e});if(!e&&i.trackRenderCauses){r({trackRenderCauses:false})}},trackColor:{false:_sharedUi.night.color.surfaceElevated,true:_sharedUi.night.color.accent+"80"},thumbColor:i.showRenderCount?_sharedUi.night.color.accent:_sharedUi.night.color.knob})]}),(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,!i.showRenderCount&&styles.settingLabelDisabled],children:"Track Render Causes"}),(0,_jsxRuntime.jsx)(_reactNative.Switch,{testID:(0,_testIDs.settingTestID)("trackRenderCauses"),value:i.trackRenderCauses,onValueChange:e=>r({trackRenderCauses:e}),trackColor:{false:_sharedUi.night.color.surfaceElevated,true:_sharedUi.night.color.warning+"80"},thumbColor:i.trackRenderCauses?_sharedUi.night.color.warning:_sharedUi.night.color.knob,disabled:!i.showRenderCount})]}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.settingDescription,children:["Detect WHY components render (props, hooks, parent re-render).",!i.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,!i.trackRenderCauses&&styles.settingLabelDisabled],children:"Enable Render History"}),(0,_jsxRuntime.jsx)(_reactNative.Switch,{testID:(0,_testIDs.settingTestID)("enableRenderHistory"),value:i.enableRenderHistory,onValueChange:e=>r({enableRenderHistory:e}),trackColor:{false:_sharedUi.night.color.surfaceElevated,true:_sharedUi.night.color.accent+"80"},thumbColor:i.enableRenderHistory?_sharedUi.night.color.accent:_sharedUi.night.color.knob,disabled:!i.trackRenderCauses})]}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.settingDescription,children:["Store render events for each component to view in the History tab.",!i.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,{testID:"buoy-highlight-setting-debugLogLevel-value",style:[styles.settingValueText,i.debugLogLevel!=="off"&&{color:_sharedUi.night.color.warning}],children:DEBUG_LOG_LEVEL_PRESETS.find(e=>e.value===i.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,i.debugLogLevel===e.value&&styles.batchSizePresetActive,e.value!=="off"&&i.debugLogLevel===e.value&&{backgroundColor:_sharedUi.night.color.warningSoft,borderColor:_sharedUi.night.color.warning}],onPress:()=>r({debugLogLevel:e.value}),testID:`buoy-highlight-preset-log-${e.value}`,accessibilityRole:"button",accessibilityLabel:`Debug log level ${e.label}`,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.batchSizePresetText,i.debugLogLevel===e.value&&styles.batchSizePresetTextActive,e.value!=="off"&&i.debugLogLevel===e.value&&{color:_sharedUi.night.color.warning}],children:e.label})},e.value))}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.settingDescriptionMuted,children:[DEBUG_LOG_LEVEL_PRESETS.find(e=>e.value===i.debugLogLevel)?.description,i.debugLogLevel!=="off"&&" \u2022 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,{testID:"buoy-highlight-setting-batchSize-value",style:styles.settingValueText,children:i.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,i.batchSize===e.value&&styles.batchSizePresetActive],onPress:()=>r({batchSize:e.value}),testID:`buoy-highlight-preset-batch-${e.value}`,accessibilityRole:"button",accessibilityLabel:`Batch size ${e.label}`,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.batchSizePresetText,i.batchSize===e.value&&styles.batchSizePresetTextActive],children:e.label})},e.value))})]}),(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:"Show host views"}),(0,_jsxRuntime.jsx)(_reactNative.Switch,{testID:(0,_testIDs.settingTestID)("showHostViews"),value:!!i.showHostViews,onValueChange:e=>r({showHostViews:e}),trackColor:{false:_sharedUi.night.color.surfaceElevated,true:_sharedUi.night.color.accent+"80"},thumbColor:i.showHostViews?_sharedUi.night.color.accent:_sharedUi.night.color.knob})]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.settingDescription,children:"Include anonymous View / RCTView / Text hosts. Off by default so the list is named composites (what actually re-rendered)."})]}),(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:"Highlight Dev Tools"}),(0,_jsxRuntime.jsx)(_reactNative.Switch,{testID:(0,_testIDs.settingTestID)("excludeDevTools"),value:!i.excludeDevTools,onValueChange:e=>r({excludeDevTools:!e}),trackColor:{false:_sharedUi.night.color.surfaceElevated,true:_sharedUi.night.color.accent+"80"},thumbColor:!i.excludeDevTools?_sharedUi.night.color.accent:_sharedUi.night.color.knob})]}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.settingDescription,children:["Show re-render highlights on Buoy dev tools (floating menu, modals, etc.). Useful for optimizing the dev tools themselves.",!i.excludeDevTools&&(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.settingWarning,children:["\n","The highlight overlay is always excluded to prevent infinite loops."]})]})]})]})]})})})})}const styles=_reactNative.StyleSheet.create({container:{flex:1,backgroundColor:"transparent"},scrollView:{flex:1},scrollContent:{paddingHorizontal:16,paddingTop:12,paddingBottom:32},section:{backgroundColor:_sharedUi.night.color.surface,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.border,marginBottom:12,overflow:"hidden"},sectionDescription:{fontSize:11,color:_sharedUi.night.color.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.night.color.surfaceElevated,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.night.color.text,fontFamily:_sharedUi.monoFont,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.night.color.surfaceElevated,gap:6},typeOptionText:{fontSize:11,fontWeight:"600"},typePickerCancel:{padding:8},patternInputContainer:{flexDirection:"row",alignItems:"center",backgroundColor:_sharedUi.night.color.surfaceElevated,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.border,paddingLeft:4,paddingRight:8,paddingVertical:4,gap:4},patternInput:{flex:1,fontSize:12,color:_sharedUi.night.color.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.night.color.surfaceElevated,borderRadius:6,borderWidth:1,paddingVertical:6,paddingHorizontal:10,gap:6},detectedItemText:{fontSize:11,color:_sharedUi.night.color.text,fontFamily:_sharedUi.monoFont},emptyText:{fontSize:11,color:_sharedUi.night.color.textTertiary,fontStyle:"italic",textAlign:"center",paddingVertical:16,paddingHorizontal:16},howItWorks:{paddingHorizontal:16,paddingVertical:12},howItWorksText:{fontSize:11,color:_sharedUi.night.color.textTertiary,lineHeight:18,fontFamily:_sharedUi.monoFont},howItWorksBold:{fontWeight:"700",color:_sharedUi.night.color.textSecondary},modalOverlay:{flex:1,backgroundColor:"rgba(0, 0, 0, 0.5)",justifyContent:"center",alignItems:"center",padding:32},actionPopup:{backgroundColor:_sharedUi.night.color.surface,borderRadius:12,borderWidth:1,borderColor:_sharedUi.night.color.border,width:"100%",maxWidth:300,overflow:"hidden"},actionPopupHeader:{padding:16,borderBottomWidth:1,borderBottomColor:_sharedUi.night.color.separator,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.night.color.accentSoft},actionPopupExclude:{backgroundColor:_sharedUi.night.color.accentSoft},actionPopupButtonText:{fontSize:13,fontWeight:"600"},actionPopupCancel:{padding:12,borderTopWidth:1,borderTopColor:_sharedUi.night.color.separator,alignItems:"center"},actionPopupCancelText:{fontSize:13,color:_sharedUi.night.color.textTertiary,fontWeight:"500"},settingsSection:{paddingHorizontal:16,paddingTop:8,paddingBottom:16},settingItem:{gap:8},settingItemSpaced:{marginTop:16,paddingTop:16,borderTopWidth:1,borderTopColor:_sharedUi.night.color.separator},settingHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},settingLabel:{fontSize:13,fontWeight:"600",color:_sharedUi.night.color.text},settingValue:{backgroundColor:_sharedUi.night.color.fillSecondary,paddingHorizontal:10,paddingVertical:4,borderRadius:6},settingValueText:{fontSize:12,fontWeight:"700",color:_sharedUi.night.color.textTertiary,fontFamily:_sharedUi.monoFont},settingDescription:{fontSize:11,color:_sharedUi.night.color.textSecondary,lineHeight:16},settingDescriptionMuted:{fontSize:10,color:_sharedUi.night.color.textTertiary,lineHeight:14,marginTop:4,fontStyle:"italic"},settingLabelDisabled:{color:_sharedUi.night.color.textTertiary},settingWarning:{color:_sharedUi.night.color.warning,fontWeight:"500"},batchSizePresets:{flexDirection:"row",flexWrap:"wrap",gap:8,marginTop:4},batchSizePreset:{paddingVertical:8,paddingHorizontal:14,borderRadius:6,backgroundColor:_sharedUi.night.color.surfaceElevated,borderWidth:1,borderColor:_sharedUi.night.color.border},batchSizePresetActive:{backgroundColor:_sharedUi.night.color.fillSecondary,borderColor:_sharedUi.night.color.fillTertiary},batchSizePresetText:{fontSize:12,fontWeight:"500",color:_sharedUi.night.color.textSecondary,fontFamily:_sharedUi.monoFont},batchSizePresetTextActive:{color:_sharedUi.night.color.textTertiary,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.night.color.textTertiary,textTransform:"uppercase",letterSpacing:.5},renderCountInput:{backgroundColor:_sharedUi.night.color.surfaceElevated,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.border,paddingVertical:10,paddingHorizontal:12,fontSize:14,fontWeight:"600",color:_sharedUi.night.color.text,fontFamily:_sharedUi.monoFont,textAlign:"center"},renderCountSeparator:{fontSize:12,color:_sharedUi.night.color.textTertiary,marginTop:18},clearRangeButton:{flexDirection:"row",alignItems:"center",justifyContent:"center",paddingVertical:8,paddingHorizontal:12,borderRadius:6,backgroundColor:_sharedUi.night.color.warningSoft,borderWidth:1,borderColor:_sharedUi.night.color.warning+"40",gap:6,alignSelf:"center"},clearRangeButtonText:{fontSize:11,fontWeight:"600",color:_sharedUi.night.color.warning}});var _default=exports.default=HighlightFilterView;
package/lib/commonjs/highlight-updates/components/IsolatedRenderList.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default=exports.IsolatedRenderList=void 0;var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _RenderTracker=require("../utils/RenderTracker");var _RenderListItem=require("./RenderListItem");var _sharedUi=require("@buoy-gg/shared-ui");var _jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(n,f){if("function"==typeof WeakMap)var c=new WeakMap,l=new WeakMap;return(_interopRequireWildcard=function(e,d){if(!d&&e&&e.__esModule)return e;var o,r,i={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return i;if(o=d?l:c){if(o.has(e))return o.get(e);o.set(e,i)}for(const s in e)"default"!==s&&{}.hasOwnProperty.call(e,s)&&((r=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,s))&&(r.get||r.set)?o(i,s,r):i[s]=e[s]);return i})(n,f)}function IsolatedRenderListInner({searchText:n,filters:f,onSelectRender:c,onStatsChange:l,onRendersChange:e,isTracking:d,isPro:o=false}){const[r,i]=(0,_react.useState)(()=>_RenderTracker.RenderTracker.getFilteredRenders(n));const s=(0,_react.useRef)(null);(0,_react.useEffect)(()=>{const t=_RenderTracker.RenderTracker.subscribe(()=>{const a=_RenderTracker.RenderTracker.getFilteredRenders(n);i(a);l(_RenderTracker.RenderTracker.getStats());e?.(a)});return t},[n,l,e]);(0,_react.useEffect)(()=>{const t=_RenderTracker.RenderTracker.getFilteredRenders(n);i(t);e?.(t)},[n,f,e]);const m=(0,_sharedUi.useLimit)("highlightUpdates.components");const u=o?Infinity:m;const g=(0,_react.useMemo)(()=>{return r.slice(0,u)},[r,u]);const p=(0,_react.useMemo)(()=>{return Math.max(0,r.length-u)},[r.length,u]);const h=(0,_react.useCallback)(t=>t.id,[]);const y=(0,_react.useCallback)(({item:t,index:a})=>(0,_jsxRuntime.jsx)(_RenderListItem.RenderListItem,{render:t,onPress:()=>c(t,a,g)}),[c,g]);const R=(0,_react.useCallback)(()=>{if(p<=0)return null;return(0,_jsxRuntime.jsxs)(_reactNative.View,{testID:"buoy-highlight-locked",style:styles.lockedBanner,children:[(0,_jsxRuntime.jsx)(_sharedUi.Lock,{size:14,color:_sharedUi.night.color.warning}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{testID:"buoy-highlight-locked-text",style:styles.lockedBannerText,children:[p," more ",p===1?"component":"components"," locked"]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.lockedBannerSubtext,children:"Upgrade to Pro"})]})},[p]);if(r.length===0){const t=n.trim();const a=_RenderTracker.RenderTracker.getStats().totalComponents;const k=t?_RenderTracker.RenderTracker.getFilteredRenders("").length:0;const b=(0,_sharedUi.resolveListEmptyState)({subject:"components",verb:"tracked",search:n,total:t?k:a,capturing:d,blocked:t&&k===0&&a>0?"The active filters hide everything tracked, so there is nothing to search.":void 0,waiting:{otto:"stare",title:"No renders tracked",message:"Component renders will appear here"},paused:{title:"No renders tracked",message:"Enable tracking to start capturing"}});return(0,_jsxRuntime.jsx)(_sharedUi.ToolEmptyState,{...b,testID:"buoy-highlight-empty"})}return(0,_jsxRuntime.jsx)(_reactNative.FlatList,{testID:"buoy-highlight-list",ref:s,data:g,renderItem:y,keyExtractor:h,contentContainerStyle:styles.listContent,showsVerticalScrollIndicator:true,initialNumToRender:10,maxToRenderPerBatch:10,windowSize:10,scrollEnabled:false,ListFooterComponent:R})}const IsolatedRenderList=exports.IsolatedRenderList=(0,_react.memo)(IsolatedRenderListInner);const styles=_reactNative.StyleSheet.create({listContent:{paddingTop:8},lockedBanner:{flexDirection:"row",alignItems:"center",justifyContent:"center",paddingVertical:12,paddingHorizontal:16,marginTop:8,gap:8},lockedBannerText:{color:_sharedUi.night.color.warning,fontSize:13,fontWeight:"500"},lockedBannerSubtext:{color:_sharedUi.night.color.textTertiary,fontSize:12}});var _default=exports.default=IsolatedRenderList;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default=exports.IsolatedRenderList=void 0;var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _RenderTracker=require("../utils/RenderTracker");var _RenderListItem=require("./RenderListItem");var _sharedUi=require("@buoy-gg/shared-ui");var _jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(n,f){if("function"==typeof WeakMap)var l=new WeakMap,c=new WeakMap;return(_interopRequireWildcard=function(e,d){if(!d&&e&&e.__esModule)return e;var o,r,s={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return s;if(o=d?c:l){if(o.has(e))return o.get(e);o.set(e,s)}for(const i in e)"default"!==i&&{}.hasOwnProperty.call(e,i)&&((r=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,i))&&(r.get||r.set)?o(s,i,r):s[i]=e[i]);return s})(n,f)}function IsolatedRenderListInner({searchText:n,filters:f,onSelectRender:l,onStatsChange:c,onRendersChange:e,isTracking:d,isPro:o=false}){const[r,s]=(0,_react.useState)(()=>_RenderTracker.RenderTracker.getFilteredRenders(n));const i=(0,_react.useRef)(null);(0,_react.useEffect)(()=>{const t=_RenderTracker.RenderTracker.subscribe(()=>{const a=_RenderTracker.RenderTracker.getFilteredRenders(n);s(a);c(_RenderTracker.RenderTracker.getStats());e?.(a)});return t},[n,c,e]);(0,_react.useEffect)(()=>{const t=_RenderTracker.RenderTracker.getFilteredRenders(n);s(t);e?.(t)},[n,f,e]);const h=(0,_sharedUi.useLimit)("highlightUpdates.components");const u=o?Infinity:h;const g=(0,_react.useMemo)(()=>{return r.slice(0,u)},[r,u]);const p=(0,_react.useMemo)(()=>{return Math.max(0,r.length-u)},[r.length,u]);const m=(0,_react.useCallback)(t=>t.id,[]);const y=(0,_react.useCallback)(({item:t,index:a})=>(0,_jsxRuntime.jsx)(_RenderListItem.RenderListItem,{render:t,onPress:()=>l(t,a,g)}),[l,g]);const R=(0,_react.useCallback)(()=>{if(p<=0)return null;return(0,_jsxRuntime.jsxs)(_reactNative.View,{testID:"buoy-highlight-locked",style:styles.lockedBanner,children:[(0,_jsxRuntime.jsx)(_sharedUi.Lock,{size:14,color:_sharedUi.night.color.warning}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{testID:"buoy-highlight-locked-text",style:styles.lockedBannerText,children:[p," more ",p===1?"component":"components"," locked"]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.lockedBannerSubtext,children:"Upgrade to Pro"})]})},[p]);if(r.length===0){const t=n.trim();const a=_RenderTracker.RenderTracker.getStats().totalComponents;const k=t?_RenderTracker.RenderTracker.getFilteredRenders("").length:0;const b=(0,_sharedUi.resolveListEmptyState)({subject:"components",verb:"tracked",search:n,total:t?k:a,capturing:d,blocked:t&&k===0&&a>0?"The active filters hide everything tracked, so there is nothing to search.":void 0,waiting:{otto:"stare",title:"No renders tracked",message:"Component renders will appear here"},paused:{title:"No renders tracked",message:"Enable tracking to start capturing"}});return(0,_jsxRuntime.jsx)(_sharedUi.ToolEmptyState,{...b,testID:"buoy-highlight-empty"})}return(0,_jsxRuntime.jsx)(_reactNative.FlatList,{keyboardShouldPersistTaps:"handled",testID:"buoy-highlight-list",ref:i,data:g,renderItem:y,keyExtractor:m,contentContainerStyle:styles.listContent,showsVerticalScrollIndicator:true,initialNumToRender:10,maxToRenderPerBatch:10,windowSize:10,scrollEnabled:false,ListFooterComponent:R})}const IsolatedRenderList=exports.IsolatedRenderList=(0,_react.memo)(IsolatedRenderListInner);const styles=_reactNative.StyleSheet.create({listContent:{paddingTop:8},lockedBanner:{flexDirection:"row",alignItems:"center",justifyContent:"center",paddingVertical:12,paddingHorizontal:16,marginTop:8,gap:8},lockedBannerText:{color:_sharedUi.night.color.warning,fontSize:13,fontWeight:"500"},lockedBannerSubtext:{color:_sharedUi.night.color.textTertiary,fontSize:12}});var _default=exports.default=IsolatedRenderList;
package/lib/commonjs/highlight-updates/components/RenderDetailView.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.RenderDetailView=RenderDetailView;exports.default=void 0;var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _sharedUi=require("@buoy-gg/shared-ui");var _dataViewer=require("@buoy-gg/shared-ui/dataViewer");var _RenderCauseBadge=require("./RenderCauseBadge");var _rendersExportFormatter=require("../utils/rendersExportFormatter");var _jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,s){if("function"==typeof WeakMap)var r=new WeakMap,l=new WeakMap;return(_interopRequireWildcard=function(i,o){if(!o&&i&&i.__esModule)return i;var c,a,n={__proto__:null,default:i};if(null===i||"object"!=typeof i&&"function"!=typeof i)return n;if(c=o?l:r){if(c.has(i))return c.get(i);c.set(i,n)}for(const t in i)"default"!==t&&{}.hasOwnProperty.call(i,t)&&((a=(c=Object.defineProperty)&&Object.getOwnPropertyDescriptor(i,t))&&(a.get||a.set)?c(n,t,a):n[t]=i[t]);return n})(e,s)}function RenderDetailView({render:e,disableInternalFooter:s=false,selectedEventIndex:r,onEventIndexChange:l,onAddFilter:i,isPro:o=false}){const[c,a]=(0,_react.useState)(0);const n=r??c;const t=l??a;const d=(0,_react.useMemo)(()=>{if(!e.renderHistory||e.renderHistory.length===0){return[]}return[...e.renderHistory].sort((x,D)=>x.timestamp-D.timestamp)},[e.renderHistory]);const h=d.length;const u=d[n];const m=(0,_sharedUi.useLimit)("highlightUpdates.detailEvents");const g=o?Infinity:m;const y=(0,_react.useMemo)(()=>Math.max(0,h-g),[g,h]);const p=u?.cause||e.lastRenderCause;const C=(0,_react.useCallback)(()=>{if(n>0){t(n-1)}},[n,t]);const I=(0,_react.useCallback)(()=>{const x=Math.min(g-1,h-1);if(n<x){t(n+1)}},[n,h,t,g]);const w=(0,_react.useMemo)(()=>(0,_rendersExportFormatter.generateSingleComponentExport)(e),[e]);const j=e.componentName||e.displayName;const T=e.viewType;const f=e.lastRenderTime-e.firstRenderTime;const v=f>0?(e.renderCount/(f/1e3)).toFixed(1):e.renderCount.toString();const b=!s&&h>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,{testID:"buoy-highlight-detail-name",style:styles.componentName,numberOfLines:1,children:j}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.nativeTypeBadge,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:"buoy-highlight-detail-type",style:styles.nativeTypeText,children:T})})]}),(0,_jsxRuntime.jsx)(_sharedUi.CopyButton,{value:w,size:14,testID:"buoy-highlight-detail-copy"})]}),(0,_jsxRuntime.jsxs)(_reactNative.ScrollView,{testID:"buoy-highlight-detail-scroll",style:styles.scrollView,contentContainerStyle:[styles.scrollContent,b&&{paddingBottom:100}],showsVerticalScrollIndicator:false,children:[p&&(0,_jsxRuntime.jsx)(AnswerCard,{cause:p,renderNumber:u?.renderNumber}),(0,_jsxRuntime.jsx)(DetailsSection,{render:e,rendersPerSec:v}),y>0&&(0,_jsxRuntime.jsxs)(_reactNative.View,{testID:"buoy-highlight-detail-locked",style:styles.lockedBanner,children:[(0,_jsxRuntime.jsx)(_sharedUi.Lock,{size:14,color:_sharedUi.night.color.warning}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{testID:"buoy-highlight-detail-locked-text",style:styles.lockedBannerText,children:[y," ",y===1?"event":"events"," hidden"]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.lockedBannerSubtext,children:"Upgrade to Pro"})]}),i&&(0,_jsxRuntime.jsx)(QuickActionsSection,{render:e,onAddFilter:i})]}),b&&(0,_jsxRuntime.jsx)(_sharedUi.EventStepperFooter,{currentIndex:n,totalItems:h,onPrevious:C,onNext:I,itemLabel:"Render",subtitle:u?.timestamp?(0,_sharedUi.formatRelativeTime)(new Date(u.timestamp)):void 0,applySafeAreaInset:false,absolute:true})]})}function AnswerCard({cause:e,renderNumber:s}){const r=e.componentCause||e.type;const l=e.componentCause?_RenderCauseBadge.COMPONENT_CAUSE_CONFIG[e.componentCause]:_RenderCauseBadge.CAUSE_CONFIG[e.type];const i=e.hookChanges&&e.hookChanges.length>0;const o=e.changedKeys&&e.changedKeys.length>0;const c=()=>{if(e.type==="mount")return"First render";if(r==="parent")return"Triggered by";return"Changed:"};return(0,_jsxRuntime.jsxs)(_reactNative.View,{testID:"buoy-highlight-detail-cause",style:styles.answerCard,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.causeBadgeRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:"buoy-highlight-detail-cause-label",style:styles.causeLabel,children:c()}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.causeBadgeLarge,{backgroundColor:l.color+"20"}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:"buoy-highlight-detail-cause-badge",style:[styles.causeBadgeLargeText,{color:l.color}],children:l.label.toUpperCase()})})]}),i&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.hookChangesContainer,children:e.hookChanges.map((a,n)=>{const t=`${a.type}[${a.index}]`;const d={[t]:a.previousValue};const h={[t]:a.currentValue};return(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.hookDiffContainer,children:(0,_jsxRuntime.jsx)(_dataViewer.TreeDiffViewer,{oldValue:d,newValue:h,theme:"dark",showUnchanged:false})},n)})}),!i&&o&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.propsChangesContainer,children:e.changedKeys.filter(a=>!a.includes("(ref only)")).slice(0,5).map((a,n)=>(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.propChangeChip,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:`buoy-highlight-detail-changed-${n}`,style:styles.propChangeText,children:a})},n))})]})}function DetailsSection({render:e,rendersPerSec:s}){const r=e.testID||e.nativeID||e.accessibilityLabel;const l=e.measurements;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.detailsSection,children:[r&&(0,_jsxRuntime.jsxs)(_reactNative.View,{testID:"buoy-highlight-detail-identifiers",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,{testID:"buoy-highlight-detail-stats",style:styles.statsRow,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{testID:"buoy-highlight-detail-stat-renders",style:styles.statItem,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:"buoy-highlight-detail-stat-renders-value",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,{testID:"buoy-highlight-detail-stat-rate",style:styles.statItem,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:"buoy-highlight-detail-stat-rate-value",style:styles.statValue,children:s}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.statLabel,children:"/sec"})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.statDivider}),(0,_jsxRuntime.jsxs)(_reactNative.View,{testID:"buoy-highlight-detail-stat-tag",style:styles.statItem,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:"buoy-highlight-detail-stat-tag-value",style:styles.statValue,children:e.nativeTag}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.statLabel,children:"tag"})]})]}),l&&(0,_jsxRuntime.jsxs)(_reactNative.View,{testID:"buoy-highlight-detail-measure",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,{testID:"buoy-highlight-detail-measure-x",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,{testID:"buoy-highlight-detail-measure-y",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,{testID:"buoy-highlight-detail-measure-w",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,{testID:"buoy-highlight-detail-measure-h",style:styles.measurementValue,children:Math.round(e.measurements.height)})]})]})]})}function DetailRow({label:e,value:s}){const r=`buoy-highlight-detail-id-${e.toLowerCase()}`;return(0,_jsxRuntime.jsxs)(_reactNative.View,{testID:r,style:styles.detailRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.detailLabel,children:e}),(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:`${r}-value`,style:styles.detailValue,numberOfLines:1,children:s})]})}function QuickActionsSection({render:e,onAddFilter:s}){const[r,l]=(0,_react.useState)(null);const i=(0,_react.useMemo)(()=>{const t=[];if(e.nativeID){t.push({type:"nativeID",value:e.nativeID,label:"nativeID"})}if(e.testID){t.push({type:"testID",value:e.testID,label:"testID"})}if(e.accessibilityLabel){t.push({type:"accessibilityLabel",value:e.accessibilityLabel,label:"a11y"})}if(e.componentName){t.push({type:"component",value:e.componentName,label:"component"})}t.push({type:"viewType",value:e.viewType,label:"viewType"});return t},[e]);const o=r!==null?i[r]:null;const c=(0,_react.useCallback)(t=>{l(d=>d===t?null:t)},[]);const a=(0,_react.useCallback)(()=>{if(o){s({type:o.type,value:o.value},"include");l(null)}},[o,s]);const n=(0,_react.useCallback)(()=>{if(o){s({type:o.type,value:o.value},"exclude");l(null)}},[o,s]);return(0,_jsxRuntime.jsxs)(_reactNative.View,{testID:"buoy-highlight-quick",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((t,d)=>(0,_jsxRuntime.jsx)(FilterOptionCard,{testID:`buoy-highlight-quick-${t.type.toLowerCase()}`,label:t.label,value:t.value,isSelected:r===d,onSelect:()=>c(d)},t.type))}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.filterActionButtons,children:[(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{testID:"buoy-highlight-quick-include",accessibilityRole:"button",accessibilityLabel:"Only show this",style:[styles.filterActionButton,styles.filterActionButtonInclude,!o&&styles.filterActionButtonDisabled],onPress:a,disabled:!o,activeOpacity:.7,children:[(0,_jsxRuntime.jsx)(_sharedUi.PlusIcon,{size:14,color:o?_sharedUi.night.color.accent:_sharedUi.night.color.textTertiary}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.filterActionButtonText,{color:o?_sharedUi.night.color.accent:_sharedUi.night.color.textTertiary}],children:"Only Show This"})]}),(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{testID:"buoy-highlight-quick-exclude",accessibilityRole:"button",accessibilityLabel:"Hide this",style:[styles.filterActionButton,styles.filterActionButtonExclude,!o&&styles.filterActionButtonDisabled],onPress:n,disabled:!o,activeOpacity:.7,children:[(0,_jsxRuntime.jsx)(_sharedUi.MinusIcon,{size:14,color:o?_sharedUi.night.color.danger:_sharedUi.night.color.textTertiary}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.filterActionButtonText,{color:o?_sharedUi.night.color.danger:_sharedUi.night.color.textTertiary}],children:"Hide This"})]})]})]})}function FilterOptionCard({testID:e,label:s,value:r,isSelected:l,onSelect:i}){return(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{testID:e,accessibilityRole:"button",accessibilityLabel:`${s}, ${r}`,style:[styles.filterOptionCard,l&&styles.filterOptionCardSelected],onPress:i,activeOpacity:.7,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.filterOptionLabel,l&&styles.filterOptionLabelSelected],children:s}),(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:e?`${e}-value`:void 0,style:[styles.filterOptionValue,l&&styles.filterOptionValueSelected],numberOfLines:1,children:r})]})}const styles=_reactNative.StyleSheet.create({container:{flex:1,backgroundColor:"transparent"},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.night.color.text,flexShrink:1},nativeTypeBadge:{backgroundColor:_sharedUi.night.color.bg,paddingVertical:3,paddingHorizontal:8,borderRadius:4},nativeTypeText:{fontSize:11,fontWeight:"600",color:_sharedUi.night.color.textTertiary,fontFamily:_sharedUi.monoFont},answerCard:{backgroundColor:_sharedUi.night.color.surface,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.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.night.color.textSecondary,fontWeight:"500"},hookChangesContainer:{gap:6},hookDiffContainer:{backgroundColor:_sharedUi.night.color.bg,borderRadius:6,overflow:"hidden"},propsChangesContainer:{flexDirection:"row",flexWrap:"wrap",gap:4},propChangeChip:{backgroundColor:_sharedUi.night.color.bg,paddingVertical:2,paddingHorizontal:6,borderRadius:4},propChangeText:{fontSize:11,color:_sharedUi.night.color.text,fontFamily:_sharedUi.monoFont},detailsSection:{gap:10},detailsCard:{backgroundColor:_sharedUi.night.color.surface,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.border,padding:12,gap:6},detailsCardTitle:{fontSize:10,fontWeight:"600",color:_sharedUi.night.color.textTertiary,letterSpacing:.5,textTransform:"uppercase",marginBottom:4},detailRow:{flexDirection:"row",alignItems:"center",gap:8},detailLabel:{fontSize:11,fontWeight:"600",color:_sharedUi.night.color.textSecondary,minWidth:55},detailValue:{fontSize:12,color:_sharedUi.night.color.text,fontFamily:_sharedUi.monoFont,flex:1},statsRow:{flexDirection:"row",alignItems:"center",justifyContent:"center",backgroundColor:_sharedUi.night.color.surface,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.border,paddingVertical:10,paddingHorizontal:16},statItem:{flex:1,alignItems:"center"},statValue:{fontSize:16,fontWeight:"700",color:_sharedUi.night.color.text,fontFamily:_sharedUi.monoFont},statLabel:{fontSize:10,color:_sharedUi.night.color.textTertiary,marginTop:2},statDivider:{width:1,height:24,backgroundColor:_sharedUi.night.color.border,marginHorizontal:12},measurementsRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-around",backgroundColor:_sharedUi.night.color.surface,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.border,paddingVertical:8,paddingHorizontal:12},measurementItem:{flexDirection:"row",alignItems:"baseline",gap:4},measurementLabel:{fontSize:10,fontWeight:"600",color:_sharedUi.night.color.textTertiary,textTransform:"uppercase"},measurementValue:{fontSize:12,fontWeight:"600",color:_sharedUi.night.color.text,fontFamily:_sharedUi.monoFont},quickActionsSection:{backgroundColor:_sharedUi.night.color.surface,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.border,padding:12,gap:10},quickActionsTitle:{fontSize:10,fontWeight:"600",color:_sharedUi.night.color.textTertiary,letterSpacing:.5,textTransform:"uppercase",marginBottom:2},filterOptionsList:{gap:6},filterOptionCard:{flexDirection:"row",alignItems:"center",backgroundColor:_sharedUi.night.color.surfaceElevated,borderRadius:6,paddingVertical:10,paddingHorizontal:12,borderWidth:1,borderColor:"transparent",gap:10},filterOptionCardSelected:{borderColor:_sharedUi.night.color.accentBorderStrong,backgroundColor:_sharedUi.night.color.accentSoft},filterOptionLabel:{fontSize:10,fontWeight:"600",color:_sharedUi.night.color.textTertiary,minWidth:70},filterOptionLabelSelected:{color:_sharedUi.night.color.accent},filterOptionValue:{fontSize:12,color:_sharedUi.night.color.text,fontFamily:_sharedUi.monoFont,flex:1},filterOptionValueSelected:{color:_sharedUi.night.color.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.night.color.accentSoft,borderColor:_sharedUi.night.color.accentBorderStrong},filterActionButtonExclude:{backgroundColor:_sharedUi.night.color.dangerSoft,borderColor:_sharedUi.night.color.danger+"40"},filterActionButtonDisabled:{backgroundColor:_sharedUi.night.color.surfaceElevated,borderColor:_sharedUi.night.color.border,opacity:.5},filterActionButtonText:{fontSize:11,fontWeight:"600"},lockedBanner:{flexDirection:"row",alignItems:"center",justifyContent:"center",backgroundColor:_sharedUi.night.color.surface,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.warning+"40",paddingVertical:12,paddingHorizontal:16,gap:8},lockedBannerText:{color:_sharedUi.night.color.warning,fontSize:13,fontWeight:"600"},lockedBannerSubtext:{color:_sharedUi.night.color.textTertiary,fontSize:12}});var _default=exports.default=RenderDetailView;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.RenderDetailView=RenderDetailView;exports.default=void 0;var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _sharedUi=require("@buoy-gg/shared-ui");var _dataViewer=require("@buoy-gg/shared-ui/dataViewer");var _RenderCauseBadge=require("./RenderCauseBadge");var _rendersExportFormatter=require("../utils/rendersExportFormatter");var _jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,s){if("function"==typeof WeakMap)var r=new WeakMap,l=new WeakMap;return(_interopRequireWildcard=function(i,o){if(!o&&i&&i.__esModule)return i;var c,a,n={__proto__:null,default:i};if(null===i||"object"!=typeof i&&"function"!=typeof i)return n;if(c=o?l:r){if(c.has(i))return c.get(i);c.set(i,n)}for(const t in i)"default"!==t&&{}.hasOwnProperty.call(i,t)&&((a=(c=Object.defineProperty)&&Object.getOwnPropertyDescriptor(i,t))&&(a.get||a.set)?c(n,t,a):n[t]=i[t]);return n})(e,s)}function RenderDetailView({render:e,disableInternalFooter:s=false,selectedEventIndex:r,onEventIndexChange:l,onAddFilter:i,isPro:o=false}){const[c,a]=(0,_react.useState)(0);const n=r??c;const t=l??a;const d=(0,_react.useMemo)(()=>{if(!e.renderHistory||e.renderHistory.length===0){return[]}return[...e.renderHistory].sort((x,D)=>x.timestamp-D.timestamp)},[e.renderHistory]);const h=d.length;const u=d[n];const m=(0,_sharedUi.useLimit)("highlightUpdates.detailEvents");const g=o?Infinity:m;const y=(0,_react.useMemo)(()=>Math.max(0,h-g),[g,h]);const p=u?.cause||e.lastRenderCause;const C=(0,_react.useCallback)(()=>{if(n>0){t(n-1)}},[n,t]);const I=(0,_react.useCallback)(()=>{const x=Math.min(g-1,h-1);if(n<x){t(n+1)}},[n,h,t,g]);const w=(0,_react.useMemo)(()=>(0,_rendersExportFormatter.generateSingleComponentExport)(e),[e]);const j=e.componentName||e.displayName;const T=e.viewType;const f=e.lastRenderTime-e.firstRenderTime;const v=f>0?(e.renderCount/(f/1e3)).toFixed(1):e.renderCount.toString();const b=!s&&h>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,{testID:"buoy-highlight-detail-name",style:styles.componentName,numberOfLines:1,children:j}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.nativeTypeBadge,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:"buoy-highlight-detail-type",style:styles.nativeTypeText,children:T})})]}),(0,_jsxRuntime.jsx)(_sharedUi.CopyButton,{value:w,size:14,testID:"buoy-highlight-detail-copy"})]}),(0,_jsxRuntime.jsxs)(_reactNative.ScrollView,{keyboardShouldPersistTaps:"handled",testID:"buoy-highlight-detail-scroll",style:styles.scrollView,contentContainerStyle:[styles.scrollContent,b&&{paddingBottom:100}],showsVerticalScrollIndicator:false,children:[p&&(0,_jsxRuntime.jsx)(AnswerCard,{cause:p,renderNumber:u?.renderNumber}),(0,_jsxRuntime.jsx)(DetailsSection,{render:e,rendersPerSec:v}),y>0&&(0,_jsxRuntime.jsxs)(_reactNative.View,{testID:"buoy-highlight-detail-locked",style:styles.lockedBanner,children:[(0,_jsxRuntime.jsx)(_sharedUi.Lock,{size:14,color:_sharedUi.night.color.warning}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{testID:"buoy-highlight-detail-locked-text",style:styles.lockedBannerText,children:[y," ",y===1?"event":"events"," hidden"]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.lockedBannerSubtext,children:"Upgrade to Pro"})]}),i&&(0,_jsxRuntime.jsx)(QuickActionsSection,{render:e,onAddFilter:i})]}),b&&(0,_jsxRuntime.jsx)(_sharedUi.EventStepperFooter,{currentIndex:n,totalItems:h,onPrevious:C,onNext:I,itemLabel:"Render",subtitle:u?.timestamp?(0,_sharedUi.formatRelativeTime)(new Date(u.timestamp)):void 0,applySafeAreaInset:false,absolute:true})]})}function AnswerCard({cause:e,renderNumber:s}){const r=e.componentCause||e.type;const l=e.componentCause?_RenderCauseBadge.COMPONENT_CAUSE_CONFIG[e.componentCause]:_RenderCauseBadge.CAUSE_CONFIG[e.type];const i=e.hookChanges&&e.hookChanges.length>0;const o=e.changedKeys&&e.changedKeys.length>0;const c=()=>{if(e.type==="mount")return"First render";if(r==="parent")return"Triggered by";return"Changed:"};return(0,_jsxRuntime.jsxs)(_reactNative.View,{testID:"buoy-highlight-detail-cause",style:styles.answerCard,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.causeBadgeRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:"buoy-highlight-detail-cause-label",style:styles.causeLabel,children:c()}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.causeBadgeLarge,{backgroundColor:l.color+"20"}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:"buoy-highlight-detail-cause-badge",style:[styles.causeBadgeLargeText,{color:l.color}],children:l.label.toUpperCase()})})]}),i&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.hookChangesContainer,children:e.hookChanges.map((a,n)=>{const t=`${a.type}[${a.index}]`;const d={[t]:a.previousValue};const h={[t]:a.currentValue};return(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.hookDiffContainer,children:(0,_jsxRuntime.jsx)(_dataViewer.TreeDiffViewer,{oldValue:d,newValue:h,theme:"dark",showUnchanged:false})},n)})}),!i&&o&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.propsChangesContainer,children:e.changedKeys.filter(a=>!a.includes("(ref only)")).slice(0,5).map((a,n)=>(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.propChangeChip,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:`buoy-highlight-detail-changed-${n}`,style:styles.propChangeText,children:a})},n))})]})}function DetailsSection({render:e,rendersPerSec:s}){const r=e.testID||e.nativeID||e.accessibilityLabel;const l=e.measurements;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.detailsSection,children:[r&&(0,_jsxRuntime.jsxs)(_reactNative.View,{testID:"buoy-highlight-detail-identifiers",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,{testID:"buoy-highlight-detail-stats",style:styles.statsRow,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{testID:"buoy-highlight-detail-stat-renders",style:styles.statItem,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:"buoy-highlight-detail-stat-renders-value",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,{testID:"buoy-highlight-detail-stat-rate",style:styles.statItem,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:"buoy-highlight-detail-stat-rate-value",style:styles.statValue,children:s}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.statLabel,children:"/sec"})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.statDivider}),(0,_jsxRuntime.jsxs)(_reactNative.View,{testID:"buoy-highlight-detail-stat-tag",style:styles.statItem,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:"buoy-highlight-detail-stat-tag-value",style:styles.statValue,children:e.nativeTag}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.statLabel,children:"tag"})]})]}),l&&(0,_jsxRuntime.jsxs)(_reactNative.View,{testID:"buoy-highlight-detail-measure",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,{testID:"buoy-highlight-detail-measure-x",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,{testID:"buoy-highlight-detail-measure-y",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,{testID:"buoy-highlight-detail-measure-w",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,{testID:"buoy-highlight-detail-measure-h",style:styles.measurementValue,children:Math.round(e.measurements.height)})]})]})]})}function DetailRow({label:e,value:s}){const r=`buoy-highlight-detail-id-${e.toLowerCase()}`;return(0,_jsxRuntime.jsxs)(_reactNative.View,{testID:r,style:styles.detailRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.detailLabel,children:e}),(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:`${r}-value`,style:styles.detailValue,numberOfLines:1,children:s})]})}function QuickActionsSection({render:e,onAddFilter:s}){const[r,l]=(0,_react.useState)(null);const i=(0,_react.useMemo)(()=>{const t=[];if(e.nativeID){t.push({type:"nativeID",value:e.nativeID,label:"nativeID"})}if(e.testID){t.push({type:"testID",value:e.testID,label:"testID"})}if(e.accessibilityLabel){t.push({type:"accessibilityLabel",value:e.accessibilityLabel,label:"a11y"})}if(e.componentName){t.push({type:"component",value:e.componentName,label:"component"})}t.push({type:"viewType",value:e.viewType,label:"viewType"});return t},[e]);const o=r!==null?i[r]:null;const c=(0,_react.useCallback)(t=>{l(d=>d===t?null:t)},[]);const a=(0,_react.useCallback)(()=>{if(o){s({type:o.type,value:o.value},"include");l(null)}},[o,s]);const n=(0,_react.useCallback)(()=>{if(o){s({type:o.type,value:o.value},"exclude");l(null)}},[o,s]);return(0,_jsxRuntime.jsxs)(_reactNative.View,{testID:"buoy-highlight-quick",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((t,d)=>(0,_jsxRuntime.jsx)(FilterOptionCard,{testID:`buoy-highlight-quick-${t.type.toLowerCase()}`,label:t.label,value:t.value,isSelected:r===d,onSelect:()=>c(d)},t.type))}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.filterActionButtons,children:[(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{testID:"buoy-highlight-quick-include",accessibilityRole:"button",accessibilityLabel:"Only show this",style:[styles.filterActionButton,styles.filterActionButtonInclude,!o&&styles.filterActionButtonDisabled],onPress:a,disabled:!o,activeOpacity:.7,children:[(0,_jsxRuntime.jsx)(_sharedUi.PlusIcon,{size:14,color:o?_sharedUi.night.color.accent:_sharedUi.night.color.textTertiary}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.filterActionButtonText,{color:o?_sharedUi.night.color.accent:_sharedUi.night.color.textTertiary}],children:"Only Show This"})]}),(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{testID:"buoy-highlight-quick-exclude",accessibilityRole:"button",accessibilityLabel:"Hide this",style:[styles.filterActionButton,styles.filterActionButtonExclude,!o&&styles.filterActionButtonDisabled],onPress:n,disabled:!o,activeOpacity:.7,children:[(0,_jsxRuntime.jsx)(_sharedUi.MinusIcon,{size:14,color:o?_sharedUi.night.color.danger:_sharedUi.night.color.textTertiary}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.filterActionButtonText,{color:o?_sharedUi.night.color.danger:_sharedUi.night.color.textTertiary}],children:"Hide This"})]})]})]})}function FilterOptionCard({testID:e,label:s,value:r,isSelected:l,onSelect:i}){return(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{testID:e,accessibilityRole:"button",accessibilityLabel:`${s}, ${r}`,style:[styles.filterOptionCard,l&&styles.filterOptionCardSelected],onPress:i,activeOpacity:.7,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.filterOptionLabel,l&&styles.filterOptionLabelSelected],children:s}),(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:e?`${e}-value`:void 0,style:[styles.filterOptionValue,l&&styles.filterOptionValueSelected],numberOfLines:1,children:r})]})}const styles=_reactNative.StyleSheet.create({container:{flex:1,backgroundColor:"transparent"},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.night.color.text,flexShrink:1},nativeTypeBadge:{backgroundColor:_sharedUi.night.color.bg,paddingVertical:3,paddingHorizontal:8,borderRadius:4},nativeTypeText:{fontSize:11,fontWeight:"600",color:_sharedUi.night.color.textTertiary,fontFamily:_sharedUi.monoFont},answerCard:{backgroundColor:_sharedUi.night.color.surface,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.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.night.color.textSecondary,fontWeight:"500"},hookChangesContainer:{gap:6},hookDiffContainer:{backgroundColor:_sharedUi.night.color.bg,borderRadius:6,overflow:"hidden"},propsChangesContainer:{flexDirection:"row",flexWrap:"wrap",gap:4},propChangeChip:{backgroundColor:_sharedUi.night.color.bg,paddingVertical:2,paddingHorizontal:6,borderRadius:4},propChangeText:{fontSize:11,color:_sharedUi.night.color.text,fontFamily:_sharedUi.monoFont},detailsSection:{gap:10},detailsCard:{backgroundColor:_sharedUi.night.color.surface,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.border,padding:12,gap:6},detailsCardTitle:{fontSize:10,fontWeight:"600",color:_sharedUi.night.color.textTertiary,letterSpacing:.5,textTransform:"uppercase",marginBottom:4},detailRow:{flexDirection:"row",alignItems:"center",gap:8},detailLabel:{fontSize:11,fontWeight:"600",color:_sharedUi.night.color.textSecondary,minWidth:55},detailValue:{fontSize:12,color:_sharedUi.night.color.text,fontFamily:_sharedUi.monoFont,flex:1},statsRow:{flexDirection:"row",alignItems:"center",justifyContent:"center",backgroundColor:_sharedUi.night.color.surface,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.border,paddingVertical:10,paddingHorizontal:16},statItem:{flex:1,alignItems:"center"},statValue:{fontSize:16,fontWeight:"700",color:_sharedUi.night.color.text,fontFamily:_sharedUi.monoFont},statLabel:{fontSize:10,color:_sharedUi.night.color.textTertiary,marginTop:2},statDivider:{width:1,height:24,backgroundColor:_sharedUi.night.color.border,marginHorizontal:12},measurementsRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-around",backgroundColor:_sharedUi.night.color.surface,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.border,paddingVertical:8,paddingHorizontal:12},measurementItem:{flexDirection:"row",alignItems:"baseline",gap:4},measurementLabel:{fontSize:10,fontWeight:"600",color:_sharedUi.night.color.textTertiary,textTransform:"uppercase"},measurementValue:{fontSize:12,fontWeight:"600",color:_sharedUi.night.color.text,fontFamily:_sharedUi.monoFont},quickActionsSection:{backgroundColor:_sharedUi.night.color.surface,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.border,padding:12,gap:10},quickActionsTitle:{fontSize:10,fontWeight:"600",color:_sharedUi.night.color.textTertiary,letterSpacing:.5,textTransform:"uppercase",marginBottom:2},filterOptionsList:{gap:6},filterOptionCard:{flexDirection:"row",alignItems:"center",backgroundColor:_sharedUi.night.color.surfaceElevated,borderRadius:6,paddingVertical:10,paddingHorizontal:12,borderWidth:1,borderColor:"transparent",gap:10},filterOptionCardSelected:{borderColor:_sharedUi.night.color.accentBorderStrong,backgroundColor:_sharedUi.night.color.accentSoft},filterOptionLabel:{fontSize:10,fontWeight:"600",color:_sharedUi.night.color.textTertiary,minWidth:70},filterOptionLabelSelected:{color:_sharedUi.night.color.accent},filterOptionValue:{fontSize:12,color:_sharedUi.night.color.text,fontFamily:_sharedUi.monoFont,flex:1},filterOptionValueSelected:{color:_sharedUi.night.color.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.night.color.accentSoft,borderColor:_sharedUi.night.color.accentBorderStrong},filterActionButtonExclude:{backgroundColor:_sharedUi.night.color.dangerSoft,borderColor:_sharedUi.night.color.danger+"40"},filterActionButtonDisabled:{backgroundColor:_sharedUi.night.color.surfaceElevated,borderColor:_sharedUi.night.color.border,opacity:.5},filterActionButtonText:{fontSize:11,fontWeight:"600"},lockedBanner:{flexDirection:"row",alignItems:"center",justifyContent:"center",backgroundColor:_sharedUi.night.color.surface,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.warning+"40",paddingVertical:12,paddingHorizontal:16,gap:8},lockedBannerText:{color:_sharedUi.night.color.warning,fontSize:13,fontWeight:"600"},lockedBannerSubtext:{color:_sharedUi.night.color.textTertiary,fontSize:12}});var _default=exports.default=RenderDetailView;
package/lib/commonjs/highlight-updates/components/RenderHistoryViewer.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.RenderHistoryFooter=RenderHistoryFooter;exports.RenderHistoryViewer=RenderHistoryViewer;exports.default=void 0;var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _sharedUi=require("@buoy-gg/shared-ui");var _dataViewer=require("@buoy-gg/shared-ui/dataViewer");var _RenderTracker=require("../utils/RenderTracker");var _RenderCauseBadge=require("./RenderCauseBadge");var _jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var l=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(o,c){if(!c&&o&&o.__esModule)return o;var s,r,i={__proto__:null,default:o};if(null===o||"object"!=typeof o&&"function"!=typeof o)return i;if(s=c?n:l){if(s.has(o))return s.get(o);s.set(o,i)}for(const a in o)"default"!==a&&{}.hasOwnProperty.call(o,a)&&((r=(s=Object.defineProperty)&&Object.getOwnPropertyDescriptor(o,a))&&(r.get||r.set)?s(i,a,r):i[a]=o[a]);return i})(e,t)}function formatTimeWithMs(e){const t=new Date(e);const l=t.getHours().toString().padStart(2,"0");const n=t.getMinutes().toString().padStart(2,"0");const o=t.getSeconds().toString().padStart(2,"0");const c=t.getMilliseconds().toString().padStart(3,"0");return`${l}:${n}:${o}.${c}`}function RenderHistoryViewer({render:e,disableInternalFooter:t=false,selectedEventIndex:l,onEventIndexChange:n,isPro:o=false}){const[c,s]=(0,_react.useState)(0);const r=l??c;const i=n??s;const[a,p]=(0,_react.useState)("current");const d=(0,_react.useMemo)(()=>{if(!e.renderHistory||e.renderHistory.length===0){return[]}return[...e.renderHistory].sort((x,S)=>x.timestamp-S.timestamp)},[e.renderHistory]);const u=(0,_sharedUi.useLimit)("highlightUpdates.historyEvents");const g=o?Infinity:u;const y=(0,_react.useMemo)(()=>d.slice(-g),[d,g]);const T=(0,_react.useMemo)(()=>Math.max(0,d.length-g),[d.length,g]);const h=y.length;const f=y[r];const m=r>0?y[r-1]:null;const b=(0,_react.useCallback)(()=>{if(r>0){i(r-1)}},[r,i]);const w=(0,_react.useCallback)(()=>{if(r<h-1){i(r+1)}},[r,h,i]);if(h===0){const x=_RenderTracker.RenderTracker.getSettings().enableRenderHistory;return(0,_jsxRuntime.jsx)(_sharedUi.ToolEmptyState,{testID:"buoy-highlight-history-empty",otto:x?"stare":"paused",title:"No Render History",message:x?"History is on and armed \u2014 this component has not re-rendered since. Interact with the app to record one.":"Enable render history tracking in settings to see render events here."})}return(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.container,{paddingBottom:!t&&h>1?80:0}],children:[T>0&&(0,_jsxRuntime.jsxs)(_reactNative.View,{testID:"buoy-highlight-history-locked",style:styles.lockedBanner,children:[(0,_jsxRuntime.jsx)(_sharedUi.Lock,{size:14,color:_sharedUi.night.color.warning}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{testID:"buoy-highlight-history-locked-text",style:styles.lockedBannerText,children:[T," older ",T===1?"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,{testID:"buoy-highlight-history-mode-current",accessibilityRole:"button",accessibilityLabel:"Current state",style:[styles.viewToggleCard,a==="current"&&styles.viewToggleCardActive],onPress:()=>p("current"),activeOpacity:.8,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.viewToggleContent,children:[(0,_jsxRuntime.jsx)(_sharedUi.Database,{size:16,color:a==="current"?_sharedUi.night.color.accent:_sharedUi.night.color.textSecondary}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.viewToggleLabel,a==="current"&&styles.viewToggleLabelActive],children:"CURRENT STATE"})]}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:[styles.viewToggleDescription,a==="current"&&{color:_sharedUi.night.color.text}],children:["View render #",f?.renderNumber??0," details"]})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{testID:"buoy-highlight-history-mode-diff",accessibilityLabel:"Diff view, coming soon",style:[styles.viewToggleCard,styles.viewToggleCardDisabled],children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.viewToggleContent,children:[(0,_jsxRuntime.jsx)(_sharedUi.GitBranch,{size:16,color:_sharedUi.night.color.textTertiary}),(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.night.color.textTertiary}],children:"Compare renders side by side (coming soon)"})]})]}),(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{testID:"buoy-highlight-history-scroll",style:styles.contentScroll,contentContainerStyle:styles.contentContainer,showsVerticalScrollIndicator:false,children:a==="current"?(0,_jsxRuntime.jsx)(CurrentStateView,{event:f,render:e}):(0,_jsxRuntime.jsx)(DiffView,{previousEvent:m,currentEvent:f,render:e})})]}),!t&&(0,_jsxRuntime.jsx)(_sharedUi.EventStepperFooter,{currentIndex:r,totalItems:h,onPrevious:b,onNext:w,itemLabel:"Render",subtitle:(0,_sharedUi.formatRelativeTime)(new Date(f?.timestamp??Date.now()))})]})}function CurrentStateView({event:e,render:t}){if(!e){return(0,_jsxRuntime.jsx)(_reactNative.View,{testID:"buoy-highlight-history-no-event",style:styles.noEventContainer,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.noEventText,children:"No event selected"})})}const l=_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,{testID:"buoy-highlight-history-event-title",style:styles.eventTitle,children:["Render #",e.renderNumber]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:"buoy-highlight-history-event-time",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,{testID:"buoy-highlight-history-event-cause",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:l.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.night.color.accent,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:true,showsHorizontalScrollIndicator:false,style:styles.propsScrollView,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:"buoy-highlight-history-props",style:styles.propsJson,children:JSON.stringify(e.capturedProps,null,2)})})})]})]})}function DiffView({previousEvent:e,currentEvent:t,render:l}){const[n,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 c=_RenderCauseBadge.CAUSE_CONFIG[e.cause.type];const s=_RenderCauseBadge.CAUSE_CONFIG[t.cause.type];const r=e.capturedProps&&t.capturedProps;const i=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:`${c.color}20`}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.compareActionText,{color:c.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:"\u2192"})}),(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:`${s.color}20`}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.compareActionText,{color:s.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,n==="cause"&&styles.diffModeTabActive],onPress:()=>o("cause"),activeOpacity:.7,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.diffModeTabText,n==="cause"&&styles.diffModeTabTextActive],children:"CAUSE"})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:[styles.diffModeTab,n==="props"&&styles.diffModeTabActive,!r&&styles.diffModeTabDisabled],onPress:()=>r&&o("props"),activeOpacity:r?.7:1,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.diffModeTabText,n==="props"&&styles.diffModeTabTextActive,!r&&styles.diffModeTabTextDisabled],children:"PROPS"})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:[styles.diffModeTab,n==="state"&&styles.diffModeTabActive,!i&&styles.diffModeTabDisabled],onPress:()=>i&&o("state"),activeOpacity:i?.7:1,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.diffModeTabText,n==="state"&&styles.diffModeTabTextActive,!i&&styles.diffModeTabTextDisabled],children:"STATE"})})]}),n==="cause"&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.diffSummary,children:(0,_jsxRuntime.jsx)(_RenderCauseBadge.EnhancedCauseDisplay,{cause:t.cause,nativeType:l.viewType})}),n==="props"&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.treeDiffContainer,children:r?(0,_jsxRuntime.jsx)(_dataViewer.TreeDiffViewer,{oldValue:e.capturedProps,newValue:t.capturedProps,theme:"dark",showUnchanged:true}):(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.'})]})}),n==="state"&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.treeDiffContainer,children:i?(0,_jsxRuntime.jsx)(_dataViewer.TreeDiffViewer,{oldValue:e.capturedState,newValue:t.capturedState,theme:"dark",showUnchanged:true}):(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:l=()=>{},isPro:n=false}){const o=(0,_react.useMemo)(()=>{if(!e.renderHistory||e.renderHistory.length===0){return[]}return[...e.renderHistory].sort((u,g)=>u.timestamp-g.timestamp)},[e.renderHistory]);const c=(0,_sharedUi.useLimit)("highlightUpdates.historyEvents");const s=n?Infinity:c;const r=(0,_react.useMemo)(()=>o.slice(-s),[o,s]);const i=r.length;const a=r[t];const p=(0,_react.useCallback)(()=>{l(Math.max(0,t-1))},[t,l]);const d=(0,_react.useCallback)(()=>{l(Math.min(i-1,t+1))},[t,i,l]);if(i<=1){return null}return(0,_jsxRuntime.jsx)(_sharedUi.EventStepperFooter,{currentIndex:t,totalItems:i,onPrevious:p,onNext:d,itemLabel:"Render",subtitle:a?(0,_sharedUi.formatRelativeTime)(new Date(a.timestamp)):void 0})}const styles=_reactNative.StyleSheet.create({container:{flex:1,backgroundColor:"transparent"},emptyContainer:{flex:1,alignItems:"center",justifyContent:"center",padding:32,gap:12},emptyTitle:{fontSize:16,fontWeight:"600",color:_sharedUi.night.color.text},emptyText:{fontSize:13,color:_sharedUi.night.color.textSecondary,textAlign:"center",lineHeight:18},viewToggleContainer:{flexDirection:"row",padding:12,gap:8},viewToggleCard:{flex:1,backgroundColor:_sharedUi.night.color.surface,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.border,padding:10,gap:4},viewToggleCardActive:{borderColor:_sharedUi.night.color.accentBorderStrong,backgroundColor:_sharedUi.night.color.accentSoft},viewToggleCardDisabled:{opacity:.5},todoBadge:{backgroundColor:_sharedUi.night.color.fillSecondary,paddingHorizontal:6,paddingVertical:2,borderRadius:4,marginLeft:4},todoBadgeText:{fontSize:9,fontWeight:"700",color:_sharedUi.night.color.textTertiary,letterSpacing:.3},viewToggleContent:{flexDirection:"row",alignItems:"center",gap:6},viewToggleLabel:{fontSize:10,fontWeight:"700",color:_sharedUi.night.color.textSecondary,letterSpacing:.5},viewToggleLabelActive:{color:_sharedUi.night.color.accent},viewToggleLabelDisabled:{color:_sharedUi.night.color.textTertiary},viewToggleDescription:{fontSize:11,color:_sharedUi.night.color.textTertiary,marginTop:2},contentScroll:{flex:1},contentContainer:{padding:12,paddingTop:0},noEventContainer:{padding:24,alignItems:"center"},noEventText:{fontSize:13,color:_sharedUi.night.color.textTertiary},currentStateContainer:{gap:12},eventHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:_sharedUi.night.color.surface,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.border,padding:12},eventHeaderLeft:{gap:2},eventTitle:{fontSize:15,fontWeight:"700",color:_sharedUi.night.color.text},eventTime:{fontSize:11,color:_sharedUi.night.color.textTertiary,fontFamily:_sharedUi.monoFont},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:_sharedUi.monoFont},section:{backgroundColor:_sharedUi.night.color.surface,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.border,overflow:"hidden"},sectionContent:{padding:12,paddingTop:8},causeContainer:{marginBottom:12},changedList:{marginBottom:12,paddingLeft:4},changedListTitle:{fontSize:11,fontWeight:"600",color:_sharedUi.night.color.textSecondary,marginBottom:6},changedItem:{fontSize:12,color:_sharedUi.night.color.text,fontFamily:_sharedUi.monoFont,marginBottom:3,paddingLeft:8},propsScrollView:{maxHeight:150},propsJson:{fontSize:11,fontFamily:_sharedUi.monoFont,color:_sharedUi.night.color.text,backgroundColor:_sharedUi.night.color.bg,padding:10,borderRadius:6},diffContainer:{gap:12},compareBar:{flexDirection:"row",backgroundColor:_sharedUi.night.color.surface,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.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.night.color.text},compareTime:{fontSize:10,color:_sharedUi.night.color.textTertiary,fontFamily:_sharedUi.monoFont},compareDivider:{width:30,alignItems:"center",justifyContent:"center"},compareArrow:{fontSize:16,color:_sharedUi.night.color.textTertiary},diffSummary:{backgroundColor:_sharedUi.night.color.surface,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.border,padding:12},diffSummaryTitle:{fontSize:11,fontWeight:"600",color:_sharedUi.night.color.textSecondary,marginBottom:8},diffChanges:{gap:4},diffChangeItem:{flexDirection:"row",alignItems:"center",gap:6},diffChangeIcon:{fontSize:12,fontWeight:"700",color:_sharedUi.night.color.warning,fontFamily:_sharedUi.monoFont},diffChangeKey:{fontSize:12,color:_sharedUi.night.color.text,fontFamily:_sharedUi.monoFont},diffNoChanges:{fontSize:12,color:_sharedUi.night.color.textTertiary,fontStyle:"italic"},diffPlaceholder:{fontSize:12,color:_sharedUi.night.color.textTertiary,fontStyle:"italic",textAlign:"center",padding:16},diffModeTabs:{flexDirection:"row",backgroundColor:_sharedUi.night.color.surface,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.border,padding:4,gap:4},diffModeTab:{flex:1,paddingVertical:8,paddingHorizontal:12,borderRadius:6,alignItems:"center"},diffModeTabActive:{backgroundColor:_sharedUi.night.color.accentSoft},diffModeTabDisabled:{opacity:.4},diffModeTabText:{fontSize:10,fontWeight:"600",color:_sharedUi.night.color.textSecondary,letterSpacing:.5},diffModeTabTextActive:{color:_sharedUi.night.color.accent},diffModeTabTextDisabled:{color:_sharedUi.night.color.textTertiary},causeDiffContainer:{gap:8,marginBottom:12},causeDiffRow:{flexDirection:"row",alignItems:"center",gap:8},causeDiffLabel:{fontSize:11,fontWeight:"600",color:_sharedUi.night.color.textSecondary,minWidth:80},causeDiffValue:{fontSize:12,color:_sharedUi.night.color.text,fontFamily:_sharedUi.monoFont,fontWeight:"500"},diffChangesTitle:{fontSize:11,fontWeight:"600",color:_sharedUi.night.color.textSecondary,marginBottom:6},treeDiffContainer:{backgroundColor:_sharedUi.night.color.surface,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.border,overflow:"hidden",minHeight:150},noDiffData:{padding:24,alignItems:"center",gap:8},noDiffDataTitle:{fontSize:13,fontWeight:"600",color:_sharedUi.night.color.text},noDiffDataText:{fontSize:12,color:_sharedUi.night.color.textTertiary,textAlign:"center",lineHeight:18},lockedBanner:{flexDirection:"row",alignItems:"center",justifyContent:"center",paddingVertical:10,paddingHorizontal:16,marginHorizontal:12,marginTop:8,backgroundColor:_sharedUi.night.color.warningSoft,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.warning+"30",gap:8},lockedBannerText:{color:_sharedUi.night.color.warning,fontSize:13,fontWeight:"500"},lockedBannerSubtext:{color:_sharedUi.night.color.textTertiary,fontSize:12}});var _default=exports.default=RenderHistoryViewer;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.RenderHistoryFooter=RenderHistoryFooter;exports.RenderHistoryViewer=RenderHistoryViewer;exports.default=void 0;var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _sharedUi=require("@buoy-gg/shared-ui");var _dataViewer=require("@buoy-gg/shared-ui/dataViewer");var _RenderTracker=require("../utils/RenderTracker");var _RenderCauseBadge=require("./RenderCauseBadge");var _jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var l=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(o,c){if(!c&&o&&o.__esModule)return o;var s,r,i={__proto__:null,default:o};if(null===o||"object"!=typeof o&&"function"!=typeof o)return i;if(s=c?n:l){if(s.has(o))return s.get(o);s.set(o,i)}for(const a in o)"default"!==a&&{}.hasOwnProperty.call(o,a)&&((r=(s=Object.defineProperty)&&Object.getOwnPropertyDescriptor(o,a))&&(r.get||r.set)?s(i,a,r):i[a]=o[a]);return i})(e,t)}function formatTimeWithMs(e){const t=new Date(e);const l=t.getHours().toString().padStart(2,"0");const n=t.getMinutes().toString().padStart(2,"0");const o=t.getSeconds().toString().padStart(2,"0");const c=t.getMilliseconds().toString().padStart(3,"0");return`${l}:${n}:${o}.${c}`}function RenderHistoryViewer({render:e,disableInternalFooter:t=false,selectedEventIndex:l,onEventIndexChange:n,isPro:o=false}){const[c,s]=(0,_react.useState)(0);const r=l??c;const i=n??s;const[a,p]=(0,_react.useState)("current");const d=(0,_react.useMemo)(()=>{if(!e.renderHistory||e.renderHistory.length===0){return[]}return[...e.renderHistory].sort((x,S)=>x.timestamp-S.timestamp)},[e.renderHistory]);const u=(0,_sharedUi.useLimit)("highlightUpdates.historyEvents");const g=o?Infinity:u;const y=(0,_react.useMemo)(()=>d.slice(-g),[d,g]);const T=(0,_react.useMemo)(()=>Math.max(0,d.length-g),[d.length,g]);const h=y.length;const f=y[r];const m=r>0?y[r-1]:null;const b=(0,_react.useCallback)(()=>{if(r>0){i(r-1)}},[r,i]);const w=(0,_react.useCallback)(()=>{if(r<h-1){i(r+1)}},[r,h,i]);if(h===0){const x=_RenderTracker.RenderTracker.getSettings().enableRenderHistory;return(0,_jsxRuntime.jsx)(_sharedUi.ToolEmptyState,{testID:"buoy-highlight-history-empty",otto:x?"stare":"paused",title:"No Render History",message:x?"History is on and armed \u2014 this component has not re-rendered since. Interact with the app to record one.":"Enable render history tracking in settings to see render events here."})}return(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.container,{paddingBottom:!t&&h>1?80:0}],children:[T>0&&(0,_jsxRuntime.jsxs)(_reactNative.View,{testID:"buoy-highlight-history-locked",style:styles.lockedBanner,children:[(0,_jsxRuntime.jsx)(_sharedUi.Lock,{size:14,color:_sharedUi.night.color.warning}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{testID:"buoy-highlight-history-locked-text",style:styles.lockedBannerText,children:[T," older ",T===1?"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,{testID:"buoy-highlight-history-mode-current",accessibilityRole:"button",accessibilityLabel:"Current state",style:[styles.viewToggleCard,a==="current"&&styles.viewToggleCardActive],onPress:()=>p("current"),activeOpacity:.8,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.viewToggleContent,children:[(0,_jsxRuntime.jsx)(_sharedUi.Database,{size:16,color:a==="current"?_sharedUi.night.color.accent:_sharedUi.night.color.textSecondary}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.viewToggleLabel,a==="current"&&styles.viewToggleLabelActive],children:"CURRENT STATE"})]}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:[styles.viewToggleDescription,a==="current"&&{color:_sharedUi.night.color.text}],children:["View render #",f?.renderNumber??0," details"]})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{testID:"buoy-highlight-history-mode-diff",accessibilityLabel:"Diff view, coming soon",style:[styles.viewToggleCard,styles.viewToggleCardDisabled],children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.viewToggleContent,children:[(0,_jsxRuntime.jsx)(_sharedUi.GitBranch,{size:16,color:_sharedUi.night.color.textTertiary}),(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.night.color.textTertiary}],children:"Compare renders side by side (coming soon)"})]})]}),(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{keyboardShouldPersistTaps:"handled",testID:"buoy-highlight-history-scroll",style:styles.contentScroll,contentContainerStyle:styles.contentContainer,showsVerticalScrollIndicator:false,children:a==="current"?(0,_jsxRuntime.jsx)(CurrentStateView,{event:f,render:e}):(0,_jsxRuntime.jsx)(DiffView,{previousEvent:m,currentEvent:f,render:e})})]}),!t&&(0,_jsxRuntime.jsx)(_sharedUi.EventStepperFooter,{currentIndex:r,totalItems:h,onPrevious:b,onNext:w,itemLabel:"Render",subtitle:(0,_sharedUi.formatRelativeTime)(new Date(f?.timestamp??Date.now()))})]})}function CurrentStateView({event:e,render:t}){if(!e){return(0,_jsxRuntime.jsx)(_reactNative.View,{testID:"buoy-highlight-history-no-event",style:styles.noEventContainer,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.noEventText,children:"No event selected"})})}const l=_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,{testID:"buoy-highlight-history-event-title",style:styles.eventTitle,children:["Render #",e.renderNumber]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:"buoy-highlight-history-event-time",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,{testID:"buoy-highlight-history-event-cause",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:l.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.night.color.accent,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:true,showsHorizontalScrollIndicator:false,style:styles.propsScrollView,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:"buoy-highlight-history-props",style:styles.propsJson,children:JSON.stringify(e.capturedProps,null,2)})})})]})]})}function DiffView({previousEvent:e,currentEvent:t,render:l}){const[n,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 c=_RenderCauseBadge.CAUSE_CONFIG[e.cause.type];const s=_RenderCauseBadge.CAUSE_CONFIG[t.cause.type];const r=e.capturedProps&&t.capturedProps;const i=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:`${c.color}20`}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.compareActionText,{color:c.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:"\u2192"})}),(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:`${s.color}20`}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.compareActionText,{color:s.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,n==="cause"&&styles.diffModeTabActive],onPress:()=>o("cause"),activeOpacity:.7,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.diffModeTabText,n==="cause"&&styles.diffModeTabTextActive],children:"CAUSE"})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:[styles.diffModeTab,n==="props"&&styles.diffModeTabActive,!r&&styles.diffModeTabDisabled],onPress:()=>r&&o("props"),activeOpacity:r?.7:1,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.diffModeTabText,n==="props"&&styles.diffModeTabTextActive,!r&&styles.diffModeTabTextDisabled],children:"PROPS"})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:[styles.diffModeTab,n==="state"&&styles.diffModeTabActive,!i&&styles.diffModeTabDisabled],onPress:()=>i&&o("state"),activeOpacity:i?.7:1,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.diffModeTabText,n==="state"&&styles.diffModeTabTextActive,!i&&styles.diffModeTabTextDisabled],children:"STATE"})})]}),n==="cause"&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.diffSummary,children:(0,_jsxRuntime.jsx)(_RenderCauseBadge.EnhancedCauseDisplay,{cause:t.cause,nativeType:l.viewType})}),n==="props"&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.treeDiffContainer,children:r?(0,_jsxRuntime.jsx)(_dataViewer.TreeDiffViewer,{oldValue:e.capturedProps,newValue:t.capturedProps,theme:"dark",showUnchanged:true}):(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.'})]})}),n==="state"&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.treeDiffContainer,children:i?(0,_jsxRuntime.jsx)(_dataViewer.TreeDiffViewer,{oldValue:e.capturedState,newValue:t.capturedState,theme:"dark",showUnchanged:true}):(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:l=()=>{},isPro:n=false}){const o=(0,_react.useMemo)(()=>{if(!e.renderHistory||e.renderHistory.length===0){return[]}return[...e.renderHistory].sort((u,g)=>u.timestamp-g.timestamp)},[e.renderHistory]);const c=(0,_sharedUi.useLimit)("highlightUpdates.historyEvents");const s=n?Infinity:c;const r=(0,_react.useMemo)(()=>o.slice(-s),[o,s]);const i=r.length;const a=r[t];const p=(0,_react.useCallback)(()=>{l(Math.max(0,t-1))},[t,l]);const d=(0,_react.useCallback)(()=>{l(Math.min(i-1,t+1))},[t,i,l]);if(i<=1){return null}return(0,_jsxRuntime.jsx)(_sharedUi.EventStepperFooter,{currentIndex:t,totalItems:i,onPrevious:p,onNext:d,itemLabel:"Render",subtitle:a?(0,_sharedUi.formatRelativeTime)(new Date(a.timestamp)):void 0})}const styles=_reactNative.StyleSheet.create({container:{flex:1,backgroundColor:"transparent"},emptyContainer:{flex:1,alignItems:"center",justifyContent:"center",padding:32,gap:12},emptyTitle:{fontSize:16,fontWeight:"600",color:_sharedUi.night.color.text},emptyText:{fontSize:13,color:_sharedUi.night.color.textSecondary,textAlign:"center",lineHeight:18},viewToggleContainer:{flexDirection:"row",padding:12,gap:8},viewToggleCard:{flex:1,backgroundColor:_sharedUi.night.color.surface,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.border,padding:10,gap:4},viewToggleCardActive:{borderColor:_sharedUi.night.color.accentBorderStrong,backgroundColor:_sharedUi.night.color.accentSoft},viewToggleCardDisabled:{opacity:.5},todoBadge:{backgroundColor:_sharedUi.night.color.fillSecondary,paddingHorizontal:6,paddingVertical:2,borderRadius:4,marginLeft:4},todoBadgeText:{fontSize:9,fontWeight:"700",color:_sharedUi.night.color.textTertiary,letterSpacing:.3},viewToggleContent:{flexDirection:"row",alignItems:"center",gap:6},viewToggleLabel:{fontSize:10,fontWeight:"700",color:_sharedUi.night.color.textSecondary,letterSpacing:.5},viewToggleLabelActive:{color:_sharedUi.night.color.accent},viewToggleLabelDisabled:{color:_sharedUi.night.color.textTertiary},viewToggleDescription:{fontSize:11,color:_sharedUi.night.color.textTertiary,marginTop:2},contentScroll:{flex:1},contentContainer:{padding:12,paddingTop:0},noEventContainer:{padding:24,alignItems:"center"},noEventText:{fontSize:13,color:_sharedUi.night.color.textTertiary},currentStateContainer:{gap:12},eventHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:_sharedUi.night.color.surface,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.border,padding:12},eventHeaderLeft:{gap:2},eventTitle:{fontSize:15,fontWeight:"700",color:_sharedUi.night.color.text},eventTime:{fontSize:11,color:_sharedUi.night.color.textTertiary,fontFamily:_sharedUi.monoFont},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:_sharedUi.monoFont},section:{backgroundColor:_sharedUi.night.color.surface,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.border,overflow:"hidden"},sectionContent:{padding:12,paddingTop:8},causeContainer:{marginBottom:12},changedList:{marginBottom:12,paddingLeft:4},changedListTitle:{fontSize:11,fontWeight:"600",color:_sharedUi.night.color.textSecondary,marginBottom:6},changedItem:{fontSize:12,color:_sharedUi.night.color.text,fontFamily:_sharedUi.monoFont,marginBottom:3,paddingLeft:8},propsScrollView:{maxHeight:150},propsJson:{fontSize:11,fontFamily:_sharedUi.monoFont,color:_sharedUi.night.color.text,backgroundColor:_sharedUi.night.color.bg,padding:10,borderRadius:6},diffContainer:{gap:12},compareBar:{flexDirection:"row",backgroundColor:_sharedUi.night.color.surface,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.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.night.color.text},compareTime:{fontSize:10,color:_sharedUi.night.color.textTertiary,fontFamily:_sharedUi.monoFont},compareDivider:{width:30,alignItems:"center",justifyContent:"center"},compareArrow:{fontSize:16,color:_sharedUi.night.color.textTertiary},diffSummary:{backgroundColor:_sharedUi.night.color.surface,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.border,padding:12},diffSummaryTitle:{fontSize:11,fontWeight:"600",color:_sharedUi.night.color.textSecondary,marginBottom:8},diffChanges:{gap:4},diffChangeItem:{flexDirection:"row",alignItems:"center",gap:6},diffChangeIcon:{fontSize:12,fontWeight:"700",color:_sharedUi.night.color.warning,fontFamily:_sharedUi.monoFont},diffChangeKey:{fontSize:12,color:_sharedUi.night.color.text,fontFamily:_sharedUi.monoFont},diffNoChanges:{fontSize:12,color:_sharedUi.night.color.textTertiary,fontStyle:"italic"},diffPlaceholder:{fontSize:12,color:_sharedUi.night.color.textTertiary,fontStyle:"italic",textAlign:"center",padding:16},diffModeTabs:{flexDirection:"row",backgroundColor:_sharedUi.night.color.surface,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.border,padding:4,gap:4},diffModeTab:{flex:1,paddingVertical:8,paddingHorizontal:12,borderRadius:6,alignItems:"center"},diffModeTabActive:{backgroundColor:_sharedUi.night.color.accentSoft},diffModeTabDisabled:{opacity:.4},diffModeTabText:{fontSize:10,fontWeight:"600",color:_sharedUi.night.color.textSecondary,letterSpacing:.5},diffModeTabTextActive:{color:_sharedUi.night.color.accent},diffModeTabTextDisabled:{color:_sharedUi.night.color.textTertiary},causeDiffContainer:{gap:8,marginBottom:12},causeDiffRow:{flexDirection:"row",alignItems:"center",gap:8},causeDiffLabel:{fontSize:11,fontWeight:"600",color:_sharedUi.night.color.textSecondary,minWidth:80},causeDiffValue:{fontSize:12,color:_sharedUi.night.color.text,fontFamily:_sharedUi.monoFont,fontWeight:"500"},diffChangesTitle:{fontSize:11,fontWeight:"600",color:_sharedUi.night.color.textSecondary,marginBottom:6},treeDiffContainer:{backgroundColor:_sharedUi.night.color.surface,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.border,overflow:"hidden",minHeight:150},noDiffData:{padding:24,alignItems:"center",gap:8},noDiffDataTitle:{fontSize:13,fontWeight:"600",color:_sharedUi.night.color.text},noDiffDataText:{fontSize:12,color:_sharedUi.night.color.textTertiary,textAlign:"center",lineHeight:18},lockedBanner:{flexDirection:"row",alignItems:"center",justifyContent:"center",paddingVertical:10,paddingHorizontal:16,marginHorizontal:12,marginTop:8,backgroundColor:_sharedUi.night.color.warningSoft,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.warning+"30",gap:8},lockedBannerText:{color:_sharedUi.night.color.warning,fontSize:13,fontWeight:"500"},lockedBannerSubtext:{color:_sharedUi.night.color.textTertiary,fontSize:12}});var _default=exports.default=RenderHistoryViewer;
package/lib/commonjs/highlight-updates/components/RendersCopySettingsView.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.RendersCopySettingsView=RendersCopySettingsView;var _react=require("react");var _reactNative=require("react-native");var _sharedUi=require("@buoy-gg/shared-ui");var _copySettings=require("../types/copySettings");var _rendersExportFormatter=require("../utils/rendersExportFormatter");var _copySettingsStorage=require("../utils/copySettingsStorage");var _jsxRuntime=require("react/jsx-runtime");const SIZE_WARNING_THRESHOLD=50*1024;const SIZE_DANGER_THRESHOLD=200*1024;const CAUSE_OPTIONS=[{value:"mount",label:"Mount"},{value:"props",label:"Props"},{value:"hooks",label:"Hooks"},{value:"state",label:"State"},{value:"parent",label:"Parent"},{value:"context",label:"Context"},{value:"unknown",label:"Unknown"}];function formatBytes(i){if(i<1024)return`${i} B`;if(i<1024*1024)return`${(i/1024).toFixed(1)} KB`;return`${(i/(1024*1024)).toFixed(1)} MB`}function createMockRenders(){const i=Date.now();return[{id:"1",nativeTag:1,viewType:"RCTView",displayName:"View",componentName:"PokemonListItem",renderCount:30,firstRenderTime:i-5e3,lastRenderTime:i,color:"#10B981",lastRenderCause:{type:"parent",timestamp:i,componentCause:"parent"}},{id:"2",nativeTag:2,viewType:"RCTView",displayName:"View",componentName:"CartHeader",renderCount:12,firstRenderTime:i-4e3,lastRenderTime:i,color:"#3B82F6",lastRenderCause:{type:"hooks",timestamp:i,componentCause:"state",hookChanges:[{type:"useState",index:2,previousValue:4,currentValue:5}]}},{id:"3",nativeTag:3,viewType:"RCTView",displayName:"View",componentName:"SearchBar",renderCount:8,firstRenderTime:i-3e3,lastRenderTime:i,color:"#F59E0B",lastRenderCause:{type:"props",timestamp:i,componentCause:"props",changedKeys:["query","onChange"]}}]}function RendersCopySettingsView({renders:i}){const[e,p]=(0,_react.useState)(_copySettings.DEFAULT_COPY_SETTINGS);const[m,E]=(0,_react.useState)(false);(0,_react.useEffect)(()=>{let t=true;(0,_copySettingsStorage.loadCopySettings)().then(r=>{if(t&&r)p(r)});return()=>{t=false}},[]);const a=(0,_react.useCallback)(t=>{p(t);(0,_copySettingsStorage.saveCopySettings)(t)},[]);const c=i.length>0;const o=c?i:createMockRenders();const n=(0,_react.useMemo)(()=>(0,_copySettings.detectActivePreset)(e),[e]);const u=(0,_react.useMemo)(()=>(0,_rendersExportFormatter.estimateExportSize)(o,e),[o,e]);const v=(0,_react.useMemo)(()=>{if(u>=SIZE_DANGER_THRESHOLD)return"danger";if(u>=SIZE_WARNING_THRESHOLD)return"warning";return"none"},[u]);const d=(0,_react.useCallback)(()=>(0,_rendersExportFormatter.generateExport)(o,e),[o,e]);const g=(0,_react.useCallback)(t=>{const r=_copySettings.COPY_PRESETS[t];if(!r)return;a({...r,filterCauses:[...r.filterCauses]})},[a]);const y=(0,_react.useCallback)((t,r)=>{const[s,b]=t.split("::");if(s==="preset"){g(b);return}if(s==="format"){a({...e,format:r});return}if(s==="sort"){a({...e,sortBy:r});return}if(s==="topN"){a({...e,topN:r});return}if(s==="minRenders"){a({...e,minRenders:r});return}if(s==="cause"){const l=r;const C=e.filterCauses.includes(l);a({...e,filterCauses:C?e.filterCauses.filter(h=>h!==l):[...e.filterCauses,l]});return}if(s==="signal"){const l=b;a({...e,[l]:!e[l]});return}},[e,a,g]);const A=(0,_react.useCallback)(()=>{const{totalComponents:t,totalRenders:r}=(0,_rendersExportFormatter.getExportSummary)(o);return(0,_jsxRuntime.jsx)(_sharedUi.ExportPreview,{expanded:m,onExpandedChange:E,summary:`${t} component${t!==1?"s":""} \xB7 ${r} renders \xB7 ~${formatBytes(u)}${!c?" (mock data)":""}`,warningLevel:v,warningText:{warning:"Large payload \u2014 preview may be slow",danger:"Very large payload \u2014 try a smaller topN or turn off history"},testIDs:{expand:"buoy-highlight-copy-preview-show",collapse:"buoy-highlight-copy-preview-hide",summary:"buoy-highlight-copy-preview-summary",warning:"buoy-highlight-copy-size-warning"},renderBody:()=>{const s=d();return(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{testID:"buoy-highlight-copy-preview-scroll",style:styles.previewScroll,nestedScrollEnabled:true,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:"buoy-highlight-copy-preview-text",style:styles.previewText,selectable:true,children:s})})}})},[m,o,u,v,c,d]);const T=(0,_react.useCallback)(()=>{const{totalComponents:t}=(0,_rendersExportFormatter.getExportSummary)(o);const r=c?`${t} components`:"Mock data (no renders captured)";return(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:"buoy-highlight-copy-status",style:styles.statusLabel,children:r}),(0,_jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton,{value:d})]})},[c,o,d]);const S=(0,_react.useMemo)(()=>({sections:[{id:"presets",title:"Presets",type:"custom",data:[{id:"preset::llm",label:_copySettings.PRESET_METADATA.llm.label,icon:_sharedUi.Zap,color:_copySettings.PRESET_METADATA.llm.color,value:"llm",isActive:n==="llm",description:_copySettings.PRESET_METADATA.llm.description},{id:"preset::table",label:_copySettings.PRESET_METADATA.table.label,icon:_sharedUi.FileText,color:_copySettings.PRESET_METADATA.table.color,value:"table",isActive:n==="table",description:_copySettings.PRESET_METADATA.table.description},{id:"preset::json",label:_copySettings.PRESET_METADATA.json.label,icon:_sharedUi.FileCode,color:_copySettings.PRESET_METADATA.json.color,value:"json",isActive:n==="json",description:_copySettings.PRESET_METADATA.json.description},{id:"preset::full",label:_copySettings.PRESET_METADATA.full.label,icon:_sharedUi.Layers,color:_copySettings.PRESET_METADATA.full.color,value:"full",isActive:n==="full",description:_copySettings.PRESET_METADATA.full.description},{id:"preset::custom",label:"Custom",icon:_sharedUi.Settings,color:_sharedUi.night.color.textSecondary,value:"custom",isActive:n===null,description:"User-configured"}]},{id:"format",title:"Format",type:"custom",data:[{id:"format::summary",label:"Summary",icon:_sharedUi.Zap,color:_sharedUi.macOSColors.semantic.success,value:"summary",isActive:e.format==="summary",description:"Compact, LLM-ready"},{id:"format::markdown-table",label:"Table",icon:_sharedUi.FileText,color:_sharedUi.macOSColors.semantic.info,value:"markdown-table",isActive:e.format==="markdown-table",description:"Markdown table"},{id:"format::json",label:"JSON",icon:_sharedUi.FileCode,color:_sharedUi.macOSColors.semantic.warning,value:"json",isActive:e.format==="json",description:"Structured data"}]},{id:"sort",title:"Sort By",type:"custom",data:[{id:"sort::renderCount",label:"Count",value:"renderCount",isActive:e.sortBy==="renderCount",description:"Total renders"},{id:"sort::rate",label:"Rate",value:"rate",isActive:e.sortBy==="rate",description:"Renders / sec"},{id:"sort::name",label:"Name",value:"name",isActive:e.sortBy==="name",description:"Alphabetical"}]},{id:"topN",title:"Top N",type:"custom",data:[{id:"topN::10",label:"10",value:10,isActive:e.topN===10},{id:"topN::25",label:"25",value:25,isActive:e.topN===25},{id:"topN::50",label:"50",value:50,isActive:e.topN===50},{id:"topN::100",label:"100",value:100,isActive:e.topN===100},{id:"topN::-1",label:"All",value:-1,isActive:e.topN===-1}]},{id:"minRenders",title:"Min Renders",type:"custom",data:[{id:"minRenders::1",label:"1",value:1,isActive:e.minRenders===1},{id:"minRenders::2",label:"2",value:2,isActive:e.minRenders===2},{id:"minRenders::3",label:"3",value:3,isActive:e.minRenders===3},{id:"minRenders::5",label:"5",value:5,isActive:e.minRenders===5},{id:"minRenders::10",label:"10",value:10,isActive:e.minRenders===10}]},{id:"causes",title:"Filter Causes",type:"custom",description:e.filterCauses.length===0?"All causes shown":"Only the selected causes shown",data:CAUSE_OPTIONS.map(t=>({id:`cause::${t.value}`,label:t.label,value:t.value,isActive:e.filterCauses.includes(t.value)}))},{id:"signal",title:"Signal Extraction",type:"custom",data:[{id:"signal::groupByName",label:"Group by name",value:"groupByName",isActive:e.groupByName,description:"Collapse list items"},{id:"signal::aggregateCauses",label:"Aggregate causes",value:"aggregateCauses",isActive:e.aggregateCauses,description:"Hook x N"},{id:"signal::includeHistory",label:"Include history",value:"includeHistory",isActive:e.includeHistory,description:"JSON only \u2014 large"}]}],previewSection:{enabled:true,title:"PREVIEW",icon:_sharedUi.Eye,content:A,headerActions:T},onFilterChange:y}),[e,n,y,A,T]);return(0,_jsxRuntime.jsx)(_sharedUi.DynamicFilterView,{...S})}const styles=_reactNative.StyleSheet.create({previewScroll:{maxHeight:360},previewText:{fontFamily:_sharedUi.monoFont,fontSize:11,color:_sharedUi.night.color.text,lineHeight:18},statusLabel:{fontSize:11,fontWeight:"600",color:_sharedUi.night.color.textTertiary,marginRight:8}});
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.RendersCopySettingsView=RendersCopySettingsView;var _react=require("react");var _reactNative=require("react-native");var _sharedUi=require("@buoy-gg/shared-ui");var _copySettings=require("../types/copySettings");var _rendersExportFormatter=require("../utils/rendersExportFormatter");var _copySettingsStorage=require("../utils/copySettingsStorage");var _jsxRuntime=require("react/jsx-runtime");const SIZE_WARNING_THRESHOLD=50*1024;const SIZE_DANGER_THRESHOLD=200*1024;const CAUSE_OPTIONS=[{value:"mount",label:"Mount"},{value:"props",label:"Props"},{value:"hooks",label:"Hooks"},{value:"state",label:"State"},{value:"parent",label:"Parent"},{value:"context",label:"Context"},{value:"unknown",label:"Unknown"}];function formatBytes(i){if(i<1024)return`${i} B`;if(i<1024*1024)return`${(i/1024).toFixed(1)} KB`;return`${(i/(1024*1024)).toFixed(1)} MB`}function createMockRenders(){const i=Date.now();return[{id:"1",nativeTag:1,viewType:"RCTView",displayName:"View",componentName:"PokemonListItem",renderCount:30,firstRenderTime:i-5e3,lastRenderTime:i,color:"#10B981",lastRenderCause:{type:"parent",timestamp:i,componentCause:"parent"}},{id:"2",nativeTag:2,viewType:"RCTView",displayName:"View",componentName:"CartHeader",renderCount:12,firstRenderTime:i-4e3,lastRenderTime:i,color:"#3B82F6",lastRenderCause:{type:"hooks",timestamp:i,componentCause:"state",hookChanges:[{type:"useState",index:2,previousValue:4,currentValue:5}]}},{id:"3",nativeTag:3,viewType:"RCTView",displayName:"View",componentName:"SearchBar",renderCount:8,firstRenderTime:i-3e3,lastRenderTime:i,color:"#F59E0B",lastRenderCause:{type:"props",timestamp:i,componentCause:"props",changedKeys:["query","onChange"]}}]}function RendersCopySettingsView({renders:i}){const[e,p]=(0,_react.useState)(_copySettings.DEFAULT_COPY_SETTINGS);const[m,S]=(0,_react.useState)(false);(0,_react.useEffect)(()=>{let t=true;(0,_copySettingsStorage.loadCopySettings)().then(r=>{if(t&&r)p(r)});return()=>{t=false}},[]);const a=(0,_react.useCallback)(t=>{p(t);(0,_copySettingsStorage.saveCopySettings)(t)},[]);const c=i.length>0;const o=c?i:createMockRenders();const n=(0,_react.useMemo)(()=>(0,_copySettings.detectActivePreset)(e),[e]);const u=(0,_react.useMemo)(()=>(0,_rendersExportFormatter.estimateExportSize)(o,e),[o,e]);const v=(0,_react.useMemo)(()=>{if(u>=SIZE_DANGER_THRESHOLD)return"danger";if(u>=SIZE_WARNING_THRESHOLD)return"warning";return"none"},[u]);const d=(0,_react.useCallback)(()=>(0,_rendersExportFormatter.generateExport)(o,e),[o,e]);const g=(0,_react.useCallback)(t=>{const r=_copySettings.COPY_PRESETS[t];if(!r)return;a({...r,filterCauses:[...r.filterCauses]})},[a]);const y=(0,_react.useCallback)((t,r)=>{const[s,b]=t.split("::");if(s==="preset"){g(b);return}if(s==="format"){a({...e,format:r});return}if(s==="sort"){a({...e,sortBy:r});return}if(s==="topN"){a({...e,topN:r});return}if(s==="minRenders"){a({...e,minRenders:r});return}if(s==="cause"){const l=r;const h=e.filterCauses.includes(l);a({...e,filterCauses:h?e.filterCauses.filter(C=>C!==l):[...e.filterCauses,l]});return}if(s==="signal"){const l=b;a({...e,[l]:!e[l]});return}},[e,a,g]);const T=(0,_react.useCallback)(()=>{const{totalComponents:t,totalRenders:r}=(0,_rendersExportFormatter.getExportSummary)(o);return(0,_jsxRuntime.jsx)(_sharedUi.ExportPreview,{expanded:m,onExpandedChange:S,summary:`${t} component${t!==1?"s":""} \xB7 ${r} renders \xB7 ~${formatBytes(u)}${!c?" (mock data)":""}`,warningLevel:v,warningText:{warning:"Large payload \u2014 preview may be slow",danger:"Very large payload \u2014 try a smaller topN or turn off history"},testIDs:{expand:"buoy-highlight-copy-preview-show",collapse:"buoy-highlight-copy-preview-hide",summary:"buoy-highlight-copy-preview-summary",warning:"buoy-highlight-copy-size-warning"},renderBody:()=>{const s=d();return(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{keyboardShouldPersistTaps:"handled",testID:"buoy-highlight-copy-preview-scroll",style:styles.previewScroll,nestedScrollEnabled:true,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:"buoy-highlight-copy-preview-text",style:styles.previewText,selectable:true,children:s})})}})},[m,o,u,v,c,d]);const A=(0,_react.useCallback)(()=>{const{totalComponents:t}=(0,_rendersExportFormatter.getExportSummary)(o);const r=c?`${t} components`:"Mock data (no renders captured)";return(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:"buoy-highlight-copy-status",style:styles.statusLabel,children:r}),(0,_jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton,{value:d})]})},[c,o,d]);const E=(0,_react.useMemo)(()=>({sections:[{id:"presets",title:"Presets",type:"custom",data:[{id:"preset::llm",label:_copySettings.PRESET_METADATA.llm.label,icon:_sharedUi.Zap,color:_copySettings.PRESET_METADATA.llm.color,value:"llm",isActive:n==="llm",description:_copySettings.PRESET_METADATA.llm.description},{id:"preset::table",label:_copySettings.PRESET_METADATA.table.label,icon:_sharedUi.FileText,color:_copySettings.PRESET_METADATA.table.color,value:"table",isActive:n==="table",description:_copySettings.PRESET_METADATA.table.description},{id:"preset::json",label:_copySettings.PRESET_METADATA.json.label,icon:_sharedUi.FileCode,color:_copySettings.PRESET_METADATA.json.color,value:"json",isActive:n==="json",description:_copySettings.PRESET_METADATA.json.description},{id:"preset::full",label:_copySettings.PRESET_METADATA.full.label,icon:_sharedUi.Layers,color:_copySettings.PRESET_METADATA.full.color,value:"full",isActive:n==="full",description:_copySettings.PRESET_METADATA.full.description},{id:"preset::custom",label:"Custom",icon:_sharedUi.Settings,color:_sharedUi.night.color.textSecondary,value:"custom",isActive:n===null,description:"User-configured"}]},{id:"format",title:"Format",type:"custom",data:[{id:"format::summary",label:"Summary",icon:_sharedUi.Zap,color:_sharedUi.macOSColors.semantic.success,value:"summary",isActive:e.format==="summary",description:"Compact, LLM-ready"},{id:"format::markdown-table",label:"Table",icon:_sharedUi.FileText,color:_sharedUi.macOSColors.semantic.info,value:"markdown-table",isActive:e.format==="markdown-table",description:"Markdown table"},{id:"format::json",label:"JSON",icon:_sharedUi.FileCode,color:_sharedUi.macOSColors.semantic.warning,value:"json",isActive:e.format==="json",description:"Structured data"}]},{id:"sort",title:"Sort By",type:"custom",data:[{id:"sort::renderCount",label:"Count",value:"renderCount",isActive:e.sortBy==="renderCount",description:"Total renders"},{id:"sort::rate",label:"Rate",value:"rate",isActive:e.sortBy==="rate",description:"Renders / sec"},{id:"sort::name",label:"Name",value:"name",isActive:e.sortBy==="name",description:"Alphabetical"}]},{id:"topN",title:"Top N",type:"custom",data:[{id:"topN::10",label:"10",value:10,isActive:e.topN===10},{id:"topN::25",label:"25",value:25,isActive:e.topN===25},{id:"topN::50",label:"50",value:50,isActive:e.topN===50},{id:"topN::100",label:"100",value:100,isActive:e.topN===100},{id:"topN::-1",label:"All",value:-1,isActive:e.topN===-1}]},{id:"minRenders",title:"Min Renders",type:"custom",data:[{id:"minRenders::1",label:"1",value:1,isActive:e.minRenders===1},{id:"minRenders::2",label:"2",value:2,isActive:e.minRenders===2},{id:"minRenders::3",label:"3",value:3,isActive:e.minRenders===3},{id:"minRenders::5",label:"5",value:5,isActive:e.minRenders===5},{id:"minRenders::10",label:"10",value:10,isActive:e.minRenders===10}]},{id:"causes",title:"Filter Causes",type:"custom",description:e.filterCauses.length===0?"All causes shown":"Only the selected causes shown",data:CAUSE_OPTIONS.map(t=>({id:`cause::${t.value}`,label:t.label,value:t.value,isActive:e.filterCauses.includes(t.value)}))},{id:"signal",title:"Signal Extraction",type:"custom",data:[{id:"signal::groupByName",label:"Group by name",value:"groupByName",isActive:e.groupByName,description:"Collapse list items"},{id:"signal::aggregateCauses",label:"Aggregate causes",value:"aggregateCauses",isActive:e.aggregateCauses,description:"Hook x N"},{id:"signal::includeHistory",label:"Include history",value:"includeHistory",isActive:e.includeHistory,description:"JSON only \u2014 large"}]}],previewSection:{enabled:true,title:"PREVIEW",icon:_sharedUi.Eye,content:T,headerActions:A},onFilterChange:y}),[e,n,y,T,A]);return(0,_jsxRuntime.jsx)(_sharedUi.DynamicFilterView,{...E})}const styles=_reactNative.StyleSheet.create({previewScroll:{maxHeight:360},previewText:{fontFamily:_sharedUi.monoFont,fontSize:11,color:_sharedUi.night.color.text,lineHeight:18},statusLabel:{fontSize:11,fontWeight:"600",color:_sharedUi.night.color.textTertiary,marginRight:8}});
package/lib/module/highlight-updates/components/HighlightFilterView.js CHANGED
@@ -1 +1 @@
1
- "use strict";import fe,{useState as f,useCallback as I}from"react";import{View as a,Text as i,TouchableOpacity as g,TextInput as A,StyleSheet as ie,ScrollView as O,Modal as ce,Pressable as ae,Switch as w}from"react-native";import{Eye as q,Filter as N,Plus as K,X as L,Box as X,Settings as de,Hash as se,SectionHeader as p,night as o,monoFont as v}from"@buoy-gg/shared-ui";import{IdentifierBadge as G,IDENTIFIER_CONFIG as ue}from"./IdentifierBadge";import{detectedItemTestID as he,patternChipTestID as pe,settingTestID as R}from"../utils/testIDs";import{jsx as t,jsxs as l,Fragment as M}from"react/jsx-runtime";const P=d=>ue[d];const ge=["any","viewType","testID","nativeID","component","accessibilityLabel"];function Y({mode:d,onSelect:u,onCancel:s}){return l(a,{nativeID:"__rn_buoy__type-picker",testID:`buoy-highlight-${d}-types`,style:e.typePicker,children:[t(a,{style:e.typePickerRow,children:ge.map(h=>{const r=P(h);const b=r.icon;return l(g,{testID:`buoy-highlight-${d}-type-${h.toLowerCase()}`,accessibilityRole:"button",accessibilityLabel:r.label,style:[e.typeOption,{backgroundColor:r.color+"15",borderColor:r.color+"40"}],onPress:()=>u(h),children:[t(b,{size:14,color:r.color}),t(i,{style:[e.typeOptionText,{color:r.color}],children:r.label})]},h)})}),t(g,{testID:`buoy-highlight-${d}-types-cancel`,accessibilityRole:"button",accessibilityLabel:"Cancel",onPress:s,style:e.typePickerCancel,children:t(L,{size:16,color:o.color.textTertiary})})]})}function Z({mode:d,type:u,onSubmit:s,onCancel:h}){const[r,b]=f("");const z=P(u);const C=()=>{if(r.trim()){s(r.trim())}};return l(a,{nativeID:"__rn_buoy__pattern-input",testID:`buoy-highlight-${d}-input-row`,style:e.patternInputContainer,children:[t(G,{type:u,value:"",badgeOnly:true,compact:true}),t(A,{testID:`buoy-highlight-${d}-input`,value:r,onChangeText:b,onSubmitEditing:C,placeholder:"Enter pattern...",placeholderTextColor:o.color.placeholder,style:e.patternInput,autoFocus:true,returnKeyType:"done",autoCorrect:false,autoCapitalize:"none"}),r.trim()&&t(g,{testID:`buoy-highlight-${d}-submit`,accessibilityRole:"button",accessibilityLabel:"Add pattern",onPress:C,style:[e.addPatternButton,{backgroundColor:z.color+"20"}],children:t(i,{style:[e.addPatternButtonText,{color:z.color}],children:"Add"})}),t(g,{testID:`buoy-highlight-${d}-input-cancel`,accessibilityRole:"button",accessibilityLabel:"Cancel",onPress:h,style:e.cancelButton,children:t(L,{size:16,color:o.color.textTertiary})})]})}function J({mode:d,pattern:u,onRemove:s}){const h=P(u.type);return l(g,{testID:pe(d,u.type,u.value),accessibilityRole:"button",accessibilityLabel:`${h.label} ${u.value}, tap to remove`,style:[e.patternChip,{borderColor:h.color+"40"}],onPress:s,activeOpacity:.7,children:[t(a,{style:[e.patternChipBadge,{backgroundColor:h.color+"20"}],children:t(i,{style:[e.patternChipBadgeText,{color:h.color}],children:h.shortLabel})}),t(i,{style:e.patternChipValue,numberOfLines:1,children:u.value}),t(L,{size:12,color:o.color.textTertiary,style:e.patternChipX})]})}const ye={label:"All",shortLabel:"All",color:o.color.textSecondary,icon:X};function D({filterType:d,count:u,isSelected:s,onPress:h}){const r=d==="all"?ye:P(d);const b=`buoy-highlight-detected-cat-${String(d).toLowerCase()}`;return l(g,{testID:b,accessibilityRole:"button",accessibilityLabel:`${r.label}, ${u}`,style:[e.categoryBadge,{backgroundColor:r.color+"15",borderColor:s?r.color:r.color+"40",borderWidth:s?2:1}],onPress:h,children:[t(r.icon,{size:12,color:r.color}),t(i,{style:[e.categoryBadgeText,{color:r.color}],children:r.label}),t(a,{style:[e.categoryBadgeCountBubble,{backgroundColor:r.color+"25"}],children:t(i,{testID:`${b}-count`,style:[e.categoryBadgeCount,{color:r.color}],children:u})})]})}const be=[{value:20,label:"20"},{value:50,label:"50"},{value:100,label:"100"},{value:150,label:"150"},{value:250,label:"250"},{value:500,label:"500"}];const j=[{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"}];export function HighlightFilterView({filters:d,onFilterChange:u,settings:s,onSettingsChange:h,availableProps:r,activeTab:b}){const[z,C]=f(false);const[Q,k]=f(false);const[B,H]=f(null);const[W,E]=f(null);const[m,x]=f("all");const[y,T]=f(null);const ee=n=>{switch(n){case"viewType":return r.viewTypes.map(c=>({value:c,type:"viewType"}));case"testID":return r.testIDs.map(c=>({value:c,type:"testID"}));case"nativeID":return r.nativeIDs.map(c=>({value:c,type:"nativeID"}));case"component":return r.componentNames.map(c=>({value:c,type:"component"}));case"accessibilityLabel":return r.accessibilityLabels.map(c=>({value:c,type:"accessibilityLabel"}));case"all":default:return[...r.viewTypes.map(c=>({value:c,type:"viewType"})),...r.testIDs.map(c=>({value:c,type:"testID"})),...r.nativeIDs.map(c=>({value:c,type:"nativeID"})),...r.componentNames.map(c=>({value:c,type:"component"})),...r.accessibilityLabels.map(c=>({value:c,type:"accessibilityLabel"}))]}};const F=ee(m);const U=r.viewTypes.length+r.testIDs.length+r.nativeIDs.length+r.componentNames.length+r.accessibilityLabels.length;const V=I((n,c)=>{const S=[...d.includePatterns,{type:n,value:c}];u({includePatterns:S});H(null)},[d.includePatterns,u]);const _=I((n,c)=>{const S=[...d.excludePatterns,{type:n,value:c}];u({excludePatterns:S});E(null)},[d.excludePatterns,u]);const te=I(n=>{const c=d.includePatterns.filter((S,$)=>$!==n);u({includePatterns:c})},[d.includePatterns,u]);const oe=I(n=>{const c=d.excludePatterns.filter((S,$)=>$!==n);u({excludePatterns:c})},[d.excludePatterns,u]);const ne=I((n,c)=>{T({type:n,value:c})},[]);const le=I(()=>{if(y){V(y.type,y.value);T(null)}},[y,V]);const re=I(()=>{if(y){_(y.type,y.value);T(null)}},[y,_]);return t(a,{style:e.container,children:t(O,{nativeID:"__rn_buoy__filter-view",testID:"buoy-highlight-filter-scroll",style:e.scrollView,contentContainerStyle:e.scrollContent,showsVerticalScrollIndicator:false,children:b==="filters"?l(M,{children:[l(a,{style:e.section,children:[l(p,{children:[t(p.Icon,{icon:q,color:o.color.accent,size:12}),t(p.Title,{children:"INCLUDE ONLY"}),d.includePatterns.length>0&&t(p.Badge,{testID:"buoy-highlight-include-count",count:d.includePatterns.length,color:o.color.accent})]}),t(i,{style:e.sectionDescription,children:"Show only components matching these patterns. If any are set, components must match at least one."}),d.includePatterns.length>0&&t(a,{style:e.patternChips,children:d.includePatterns.map((n,c)=>t(J,{mode:"include",pattern:n,onRemove:()=>te(c)},`${n.type}-${n.value}-${c}`))}),t(a,{style:e.addPatternRow,children:z?t(Y,{mode:"include",onSelect:n=>{C(false);H(n)},onCancel:()=>C(false)}):B?t(Z,{mode:"include",type:B,onSubmit:n=>V(B,n),onCancel:()=>H(null)}):l(g,{testID:"buoy-highlight-include-add",accessibilityRole:"button",accessibilityLabel:"Add include pattern",style:[e.addButton,{borderColor:o.color.accentBorderStrong}],onPress:()=>C(true),children:[t(K,{size:14,color:o.color.accent}),t(i,{style:[e.addButtonText,{color:o.color.accent}],children:"Add include pattern"})]})})]}),l(a,{style:e.section,children:[l(p,{children:[t(p.Icon,{icon:N,color:o.color.accent,size:12}),t(p.Title,{children:"EXCLUDE"}),d.excludePatterns.length>0&&t(p.Badge,{testID:"buoy-highlight-exclude-count",count:d.excludePatterns.length,color:o.color.accent})]}),t(i,{style:e.sectionDescription,children:"Hide components matching these patterns from the list."}),d.excludePatterns.length>0&&t(a,{style:e.patternChips,children:d.excludePatterns.map((n,c)=>t(J,{mode:"exclude",pattern:n,onRemove:()=>oe(c)},`${n.type}-${n.value}-${c}`))}),t(a,{style:e.addPatternRow,children:Q?t(Y,{mode:"exclude",onSelect:n=>{k(false);E(n)},onCancel:()=>k(false)}):W?t(Z,{mode:"exclude",type:W,onSubmit:n=>_(W,n),onCancel:()=>E(null)}):l(g,{testID:"buoy-highlight-exclude-add",accessibilityRole:"button",accessibilityLabel:"Add exclude pattern",style:[e.addButton,{borderColor:o.color.accentBorderStrong}],onPress:()=>k(true),children:[t(K,{size:14,color:o.color.accent}),t(i,{style:[e.addButtonText,{color:o.color.accent}],children:"Add exclude pattern"})]})})]}),l(a,{style:e.section,children:[l(p,{children:[t(p.Icon,{icon:se,color:o.color.warning,size:12}),t(p.Title,{children:"RENDER COUNT RANGE"}),(d.minRenderCount!==void 0||d.maxRenderCount!==void 0)&&t(p.Badge,{count:1,color:o.color.warning})]}),t(i,{style:e.sectionDescription,children:"Show only components with render count in a specific range."}),l(a,{nativeID:"__rn_buoy__render-count-range",testID:"buoy-highlight-range",style:e.renderCountRangeContainer,children:[l(a,{style:e.renderCountInputRow,children:[l(a,{style:e.renderCountInputGroup,children:[t(i,{style:e.renderCountLabel,children:"Min"}),t(A,{value:d.minRenderCount!==void 0?String(d.minRenderCount):"",onChangeText:n=>{const c=parseInt(n,10);if(n===""||n===void 0){u({minRenderCount:void 0})}else if(!isNaN(c)&&c>=0){u({minRenderCount:c})}},testID:"buoy-highlight-range-min",placeholder:"0",placeholderTextColor:o.color.placeholder,style:e.renderCountInput,keyboardType:"number-pad",returnKeyType:"done"})]}),t(i,{style:e.renderCountSeparator,children:"to"}),l(a,{style:e.renderCountInputGroup,children:[t(i,{style:e.renderCountLabel,children:"Max"}),t(A,{value:d.maxRenderCount!==void 0?String(d.maxRenderCount):"",onChangeText:n=>{const c=parseInt(n,10);if(n===""||n===void 0){u({maxRenderCount:void 0})}else if(!isNaN(c)&&c>=0){u({maxRenderCount:c})}},testID:"buoy-highlight-range-max",placeholder:"\u221E",placeholderTextColor:o.color.placeholder,style:e.renderCountInput,keyboardType:"number-pad",returnKeyType:"done"})]})]}),(d.minRenderCount!==void 0||d.maxRenderCount!==void 0)&&l(g,{testID:"buoy-highlight-range-clear",accessibilityRole:"button",accessibilityLabel:"Clear range",style:e.clearRangeButton,onPress:()=>u({minRenderCount:void 0,maxRenderCount:void 0}),children:[t(L,{size:12,color:o.color.warning}),t(i,{style:e.clearRangeButtonText,children:"Clear Range"})]})]})]}),l(a,{style:e.section,children:[l(p,{children:[t(p.Icon,{icon:X,color:o.color.textSecondary,size:12}),t(p.Title,{children:"DETECTED ITEMS"})]}),t(i,{style:e.sectionDescription,children:"Tap an item to quickly add it as an exclude pattern."}),l(O,{horizontal:true,showsHorizontalScrollIndicator:false,style:e.categoryBadgeScroll,contentContainerStyle:e.categoryBadgeScrollContent,children:[U>0&&t(D,{filterType:"all",count:U,isSelected:m==="all",onPress:()=>x("all")}),r.viewTypes.length>0&&t(D,{filterType:"viewType",count:r.viewTypes.length,isSelected:m==="viewType",onPress:()=>x("viewType")}),r.testIDs.length>0&&t(D,{filterType:"testID",count:r.testIDs.length,isSelected:m==="testID",onPress:()=>x("testID")}),r.nativeIDs.length>0&&t(D,{filterType:"nativeID",count:r.nativeIDs.length,isSelected:m==="nativeID",onPress:()=>x("nativeID")}),r.componentNames.length>0&&t(D,{filterType:"component",count:r.componentNames.length,isSelected:m==="component",onPress:()=>x("component")}),r.accessibilityLabels.length>0&&t(D,{filterType:"accessibilityLabel",count:r.accessibilityLabels.length,isSelected:m==="accessibilityLabel",onPress:()=>x("accessibilityLabel")})]}),t(a,{nativeID:"__rn_buoy__detected-items",testID:"buoy-highlight-detected",style:e.detectedItemsContainer,children:F.length>0?t(O,{testID:"buoy-highlight-detected-scroll",style:e.detectedItemsScroll,contentContainerStyle:e.detectedItems,nestedScrollEnabled:true,showsVerticalScrollIndicator:true,children:F.map(n=>{const c=P(n.type);return t(g,{testID:he(n.type,n.value),accessibilityRole:"button",accessibilityLabel:`${c.label} ${n.value}`,style:[e.detectedItem,{borderColor:c.color+"40"}],onPress:()=>ne(n.type,n.value),children:m==="all"?t(G,{type:n.type,value:n.value,compact:true,shortLabel:true}):t(i,{style:e.detectedItemText,numberOfLines:1,children:n.value})},`${n.type}-${n.value}`)})}):t(i,{testID:"buoy-highlight-detected-empty",style:e.emptyText,children:"No items detected yet. Start tracking to see components here."})})]}),t(ce,{visible:y!==null,transparent:true,animationType:"fade",onRequestClose:()=>T(null),children:t(ae,{accessible:false,testID:"buoy-highlight-detected-popup-backdrop",style:e.modalOverlay,onPress:()=>T(null),children:t(a,{accessible:false,testID:"buoy-highlight-detected-popup",style:e.actionPopup,children:y&&l(M,{children:[t(a,{style:e.actionPopupHeader,children:t(G,{type:y.type,value:y.value,compact:true,shortLabel:true})}),l(a,{style:e.actionPopupButtons,children:[l(g,{testID:"buoy-highlight-detected-popup-include",accessibilityRole:"button",accessibilityLabel:"Include only",style:[e.actionPopupButton,e.actionPopupInclude],onPress:le,children:[t(q,{size:16,color:o.color.accent}),t(i,{style:[e.actionPopupButtonText,{color:o.color.accent}],children:"Include Only"})]}),l(g,{testID:"buoy-highlight-detected-popup-exclude",accessibilityRole:"button",accessibilityLabel:"Exclude",style:[e.actionPopupButton,e.actionPopupExclude],onPress:re,children:[t(N,{size:16,color:o.color.accent}),t(i,{style:[e.actionPopupButtonText,{color:o.color.accent}],children:"Exclude"})]})]}),t(g,{testID:"buoy-highlight-detected-popup-cancel",accessibilityRole:"button",accessibilityLabel:"Cancel",style:e.actionPopupCancel,onPress:()=>T(null),children:t(i,{style:e.actionPopupCancelText,children:"Cancel"})})]})})})}),l(a,{style:e.section,children:[l(p,{children:[t(p.Icon,{icon:N,color:o.color.textTertiary,size:12}),t(p.Title,{children:"HOW FILTERS WORK"})]}),t(a,{style:e.howItWorks,children:l(i,{style:e.howItWorksText,children:[t(i,{style:e.howItWorksBold,children:"Any:"})," Matches against all fields","\n",t(i,{style:e.howItWorksBold,children:"ViewType:"})," Native component class (RCTView, RCTText)","\n",t(i,{style:e.howItWorksBold,children:"testID:"})," Component testID prop","\n",t(i,{style:e.howItWorksBold,children:"Component:"})," React component name from fiber"]})})]})]}):t(M,{children:l(a,{style:e.section,children:[l(p,{children:[t(p.Icon,{icon:de,color:o.color.textTertiary,size:12}),t(p.Title,{children:"SETTINGS"})]}),l(a,{style:e.settingsSection,children:[l(a,{style:e.settingItem,children:[l(a,{style:e.settingHeader,children:[t(i,{style:e.settingLabel,children:"Show Render Count"}),t(w,{testID:R("showRenderCount"),value:s.showRenderCount,onValueChange:n=>{h({showRenderCount:n});if(!n&&s.trackRenderCauses){h({trackRenderCauses:false})}},trackColor:{false:o.color.surfaceElevated,true:o.color.accent+"80"},thumbColor:s.showRenderCount?o.color.accent:o.color.knob})]}),t(i,{style:e.settingDescription,children:"Display render count badge on highlights. Disabling improves performance by skipping count tracking."})]}),l(a,{style:[e.settingItem,e.settingItemSpaced],children:[l(a,{style:e.settingHeader,children:[t(i,{style:[e.settingLabel,!s.showRenderCount&&e.settingLabelDisabled],children:"Track Render Causes"}),t(w,{testID:R("trackRenderCauses"),value:s.trackRenderCauses,onValueChange:n=>h({trackRenderCauses:n}),trackColor:{false:o.color.surfaceElevated,true:o.color.warning+"80"},thumbColor:s.trackRenderCauses?o.color.warning:o.color.knob,disabled:!s.showRenderCount})]}),l(i,{style:e.settingDescription,children:["Detect WHY components render (props, hooks, parent re-render).",!s.showRenderCount&&l(i,{style:e.settingWarning,children:["\n",'Requires "Show Render Count" to be enabled.']})]})]}),l(a,{style:[e.settingItem,e.settingItemSpaced],children:[l(a,{style:e.settingHeader,children:[t(i,{style:[e.settingLabel,!s.trackRenderCauses&&e.settingLabelDisabled],children:"Enable Render History"}),t(w,{testID:R("enableRenderHistory"),value:s.enableRenderHistory,onValueChange:n=>h({enableRenderHistory:n}),trackColor:{false:o.color.surfaceElevated,true:o.color.accent+"80"},thumbColor:s.enableRenderHistory?o.color.accent:o.color.knob,disabled:!s.trackRenderCauses})]}),l(i,{style:e.settingDescription,children:["Store render events for each component to view in the History tab.",!s.trackRenderCauses&&l(i,{style:e.settingWarning,children:["\n",'Requires "Track Render Causes" to be enabled.']})]})]}),l(a,{style:[e.settingItem,e.settingItemSpaced],children:[l(a,{style:e.settingHeader,children:[t(i,{style:e.settingLabel,children:"Debug Log Level"}),t(a,{style:e.settingValue,children:t(i,{testID:"buoy-highlight-setting-debugLogLevel-value",style:[e.settingValueText,s.debugLogLevel!=="off"&&{color:o.color.warning}],children:j.find(n=>n.value===s.debugLogLevel)?.label||"Off"})})]}),t(i,{style:e.settingDescription,children:"Control console logging verbosity for render cause detection."}),t(a,{style:e.batchSizePresets,children:j.map(n=>t(g,{style:[e.batchSizePreset,s.debugLogLevel===n.value&&e.batchSizePresetActive,n.value!=="off"&&s.debugLogLevel===n.value&&{backgroundColor:o.color.warningSoft,borderColor:o.color.warning}],onPress:()=>h({debugLogLevel:n.value}),testID:`buoy-highlight-preset-log-${n.value}`,accessibilityRole:"button",accessibilityLabel:`Debug log level ${n.label}`,children:t(i,{style:[e.batchSizePresetText,s.debugLogLevel===n.value&&e.batchSizePresetTextActive,n.value!=="off"&&s.debugLogLevel===n.value&&{color:o.color.warning}],children:n.label})},n.value))}),l(i,{style:e.settingDescriptionMuted,children:[j.find(n=>n.value===s.debugLogLevel)?.description,s.debugLogLevel!=="off"&&" \u2022 Check Metro console for logs"]})]}),l(a,{style:[e.settingItem,e.settingItemSpaced],children:[l(a,{style:e.settingHeader,children:[t(i,{style:e.settingLabel,children:"Batch Size"}),t(a,{style:e.settingValue,children:t(i,{testID:"buoy-highlight-setting-batchSize-value",style:e.settingValueText,children:s.batchSize})})]}),t(i,{style:e.settingDescription,children:"Maximum components to highlight per render update. Higher values capture more re-renders but may impact performance on complex screens."}),t(a,{style:e.batchSizePresets,children:be.map(n=>t(g,{style:[e.batchSizePreset,s.batchSize===n.value&&e.batchSizePresetActive],onPress:()=>h({batchSize:n.value}),testID:`buoy-highlight-preset-batch-${n.value}`,accessibilityRole:"button",accessibilityLabel:`Batch size ${n.label}`,children:t(i,{style:[e.batchSizePresetText,s.batchSize===n.value&&e.batchSizePresetTextActive],children:n.label})},n.value))})]}),l(a,{style:[e.settingItem,e.settingItemSpaced],children:[l(a,{style:e.settingHeader,children:[t(i,{style:e.settingLabel,children:"Show host views"}),t(w,{testID:R("showHostViews"),value:!!s.showHostViews,onValueChange:n=>h({showHostViews:n}),trackColor:{false:o.color.surfaceElevated,true:o.color.accent+"80"},thumbColor:s.showHostViews?o.color.accent:o.color.knob})]}),t(i,{style:e.settingDescription,children:"Include anonymous View / RCTView / Text hosts. Off by default so the list is named composites (what actually re-rendered)."})]}),l(a,{style:[e.settingItem,e.settingItemSpaced],children:[l(a,{style:e.settingHeader,children:[t(i,{style:e.settingLabel,children:"Highlight Dev Tools"}),t(w,{testID:R("excludeDevTools"),value:!s.excludeDevTools,onValueChange:n=>h({excludeDevTools:!n}),trackColor:{false:o.color.surfaceElevated,true:o.color.accent+"80"},thumbColor:!s.excludeDevTools?o.color.accent:o.color.knob})]}),l(i,{style:e.settingDescription,children:["Show re-render highlights on Buoy dev tools (floating menu, modals, etc.). Useful for optimizing the dev tools themselves.",!s.excludeDevTools&&l(i,{style:e.settingWarning,children:["\n","The highlight overlay is always excluded to prevent infinite loops."]})]})]})]})]})})})})}const e=ie.create({container:{flex:1,backgroundColor:"transparent"},scrollView:{flex:1},scrollContent:{paddingHorizontal:16,paddingTop:12,paddingBottom:32},section:{backgroundColor:o.color.surface,borderRadius:8,borderWidth:1,borderColor:o.color.border,marginBottom:12,overflow:"hidden"},sectionDescription:{fontSize:11,color:o.color.textSecondary,paddingHorizontal:16,paddingTop:8,lineHeight:16},patternChips:{flexDirection:"row",flexWrap:"wrap",gap:8,paddingHorizontal:16,paddingTop:12},patternChip:{flexDirection:"row",alignItems:"center",backgroundColor:o.color.surfaceElevated,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:o.color.text,fontFamily:v,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:o.color.surfaceElevated,gap:6},typeOptionText:{fontSize:11,fontWeight:"600"},typePickerCancel:{padding:8},patternInputContainer:{flexDirection:"row",alignItems:"center",backgroundColor:o.color.surfaceElevated,borderRadius:8,borderWidth:1,borderColor:o.color.border,paddingLeft:4,paddingRight:8,paddingVertical:4,gap:4},patternInput:{flex:1,fontSize:12,color:o.color.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:o.color.surfaceElevated,borderRadius:6,borderWidth:1,paddingVertical:6,paddingHorizontal:10,gap:6},detectedItemText:{fontSize:11,color:o.color.text,fontFamily:v},emptyText:{fontSize:11,color:o.color.textTertiary,fontStyle:"italic",textAlign:"center",paddingVertical:16,paddingHorizontal:16},howItWorks:{paddingHorizontal:16,paddingVertical:12},howItWorksText:{fontSize:11,color:o.color.textTertiary,lineHeight:18,fontFamily:v},howItWorksBold:{fontWeight:"700",color:o.color.textSecondary},modalOverlay:{flex:1,backgroundColor:"rgba(0, 0, 0, 0.5)",justifyContent:"center",alignItems:"center",padding:32},actionPopup:{backgroundColor:o.color.surface,borderRadius:12,borderWidth:1,borderColor:o.color.border,width:"100%",maxWidth:300,overflow:"hidden"},actionPopupHeader:{padding:16,borderBottomWidth:1,borderBottomColor:o.color.separator,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:o.color.accentSoft},actionPopupExclude:{backgroundColor:o.color.accentSoft},actionPopupButtonText:{fontSize:13,fontWeight:"600"},actionPopupCancel:{padding:12,borderTopWidth:1,borderTopColor:o.color.separator,alignItems:"center"},actionPopupCancelText:{fontSize:13,color:o.color.textTertiary,fontWeight:"500"},settingsSection:{paddingHorizontal:16,paddingTop:8,paddingBottom:16},settingItem:{gap:8},settingItemSpaced:{marginTop:16,paddingTop:16,borderTopWidth:1,borderTopColor:o.color.separator},settingHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},settingLabel:{fontSize:13,fontWeight:"600",color:o.color.text},settingValue:{backgroundColor:o.color.fillSecondary,paddingHorizontal:10,paddingVertical:4,borderRadius:6},settingValueText:{fontSize:12,fontWeight:"700",color:o.color.textTertiary,fontFamily:v},settingDescription:{fontSize:11,color:o.color.textSecondary,lineHeight:16},settingDescriptionMuted:{fontSize:10,color:o.color.textTertiary,lineHeight:14,marginTop:4,fontStyle:"italic"},settingLabelDisabled:{color:o.color.textTertiary},settingWarning:{color:o.color.warning,fontWeight:"500"},batchSizePresets:{flexDirection:"row",flexWrap:"wrap",gap:8,marginTop:4},batchSizePreset:{paddingVertical:8,paddingHorizontal:14,borderRadius:6,backgroundColor:o.color.surfaceElevated,borderWidth:1,borderColor:o.color.border},batchSizePresetActive:{backgroundColor:o.color.fillSecondary,borderColor:o.color.fillTertiary},batchSizePresetText:{fontSize:12,fontWeight:"500",color:o.color.textSecondary,fontFamily:v},batchSizePresetTextActive:{color:o.color.textTertiary,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:o.color.textTertiary,textTransform:"uppercase",letterSpacing:.5},renderCountInput:{backgroundColor:o.color.surfaceElevated,borderRadius:8,borderWidth:1,borderColor:o.color.border,paddingVertical:10,paddingHorizontal:12,fontSize:14,fontWeight:"600",color:o.color.text,fontFamily:v,textAlign:"center"},renderCountSeparator:{fontSize:12,color:o.color.textTertiary,marginTop:18},clearRangeButton:{flexDirection:"row",alignItems:"center",justifyContent:"center",paddingVertical:8,paddingHorizontal:12,borderRadius:6,backgroundColor:o.color.warningSoft,borderWidth:1,borderColor:o.color.warning+"40",gap:6,alignSelf:"center"},clearRangeButtonText:{fontSize:11,fontWeight:"600",color:o.color.warning}});export default HighlightFilterView;
1
+ "use strict";import fe,{useState as f,useCallback as I}from"react";import{View as a,Text as i,TouchableOpacity as g,TextInput as A,StyleSheet as ie,ScrollView as O,Modal as ce,Pressable as ae,Switch as w}from"react-native";import{Eye as q,Filter as N,Plus as K,X as L,Box as X,Settings as de,Hash as se,SectionHeader as p,night as o,monoFont as v}from"@buoy-gg/shared-ui";import{IdentifierBadge as G,IDENTIFIER_CONFIG as ue}from"./IdentifierBadge";import{detectedItemTestID as he,patternChipTestID as pe,settingTestID as R}from"../utils/testIDs";import{jsx as t,jsxs as l,Fragment as M}from"react/jsx-runtime";const P=d=>ue[d];const ge=["any","viewType","testID","nativeID","component","accessibilityLabel"];function Y({mode:d,onSelect:u,onCancel:s}){return l(a,{nativeID:"__rn_buoy__type-picker",testID:`buoy-highlight-${d}-types`,style:e.typePicker,children:[t(a,{style:e.typePickerRow,children:ge.map(h=>{const r=P(h);const b=r.icon;return l(g,{testID:`buoy-highlight-${d}-type-${h.toLowerCase()}`,accessibilityRole:"button",accessibilityLabel:r.label,style:[e.typeOption,{backgroundColor:r.color+"15",borderColor:r.color+"40"}],onPress:()=>u(h),children:[t(b,{size:14,color:r.color}),t(i,{style:[e.typeOptionText,{color:r.color}],children:r.label})]},h)})}),t(g,{testID:`buoy-highlight-${d}-types-cancel`,accessibilityRole:"button",accessibilityLabel:"Cancel",onPress:s,style:e.typePickerCancel,children:t(L,{size:16,color:o.color.textTertiary})})]})}function Z({mode:d,type:u,onSubmit:s,onCancel:h}){const[r,b]=f("");const z=P(u);const C=()=>{if(r.trim()){s(r.trim())}};return l(a,{nativeID:"__rn_buoy__pattern-input",testID:`buoy-highlight-${d}-input-row`,style:e.patternInputContainer,children:[t(G,{type:u,value:"",badgeOnly:true,compact:true}),t(A,{testID:`buoy-highlight-${d}-input`,value:r,onChangeText:b,onSubmitEditing:C,placeholder:"Enter pattern...",placeholderTextColor:o.color.placeholder,style:e.patternInput,autoFocus:true,returnKeyType:"done",autoCorrect:false,autoCapitalize:"none"}),r.trim()&&t(g,{testID:`buoy-highlight-${d}-submit`,accessibilityRole:"button",accessibilityLabel:"Add pattern",onPress:C,style:[e.addPatternButton,{backgroundColor:z.color+"20"}],children:t(i,{style:[e.addPatternButtonText,{color:z.color}],children:"Add"})}),t(g,{testID:`buoy-highlight-${d}-input-cancel`,accessibilityRole:"button",accessibilityLabel:"Cancel",onPress:h,style:e.cancelButton,children:t(L,{size:16,color:o.color.textTertiary})})]})}function J({mode:d,pattern:u,onRemove:s}){const h=P(u.type);return l(g,{testID:pe(d,u.type,u.value),accessibilityRole:"button",accessibilityLabel:`${h.label} ${u.value}, tap to remove`,style:[e.patternChip,{borderColor:h.color+"40"}],onPress:s,activeOpacity:.7,children:[t(a,{style:[e.patternChipBadge,{backgroundColor:h.color+"20"}],children:t(i,{style:[e.patternChipBadgeText,{color:h.color}],children:h.shortLabel})}),t(i,{style:e.patternChipValue,numberOfLines:1,children:u.value}),t(L,{size:12,color:o.color.textTertiary,style:e.patternChipX})]})}const ye={label:"All",shortLabel:"All",color:o.color.textSecondary,icon:X};function D({filterType:d,count:u,isSelected:s,onPress:h}){const r=d==="all"?ye:P(d);const b=`buoy-highlight-detected-cat-${String(d).toLowerCase()}`;return l(g,{testID:b,accessibilityRole:"button",accessibilityLabel:`${r.label}, ${u}`,style:[e.categoryBadge,{backgroundColor:r.color+"15",borderColor:s?r.color:r.color+"40",borderWidth:s?2:1}],onPress:h,children:[t(r.icon,{size:12,color:r.color}),t(i,{style:[e.categoryBadgeText,{color:r.color}],children:r.label}),t(a,{style:[e.categoryBadgeCountBubble,{backgroundColor:r.color+"25"}],children:t(i,{testID:`${b}-count`,style:[e.categoryBadgeCount,{color:r.color}],children:u})})]})}const be=[{value:20,label:"20"},{value:50,label:"50"},{value:100,label:"100"},{value:150,label:"150"},{value:250,label:"250"},{value:500,label:"500"}];const j=[{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"}];export function HighlightFilterView({filters:d,onFilterChange:u,settings:s,onSettingsChange:h,availableProps:r,activeTab:b}){const[z,C]=f(false);const[Q,k]=f(false);const[B,H]=f(null);const[W,E]=f(null);const[m,x]=f("all");const[y,T]=f(null);const ee=n=>{switch(n){case"viewType":return r.viewTypes.map(c=>({value:c,type:"viewType"}));case"testID":return r.testIDs.map(c=>({value:c,type:"testID"}));case"nativeID":return r.nativeIDs.map(c=>({value:c,type:"nativeID"}));case"component":return r.componentNames.map(c=>({value:c,type:"component"}));case"accessibilityLabel":return r.accessibilityLabels.map(c=>({value:c,type:"accessibilityLabel"}));case"all":default:return[...r.viewTypes.map(c=>({value:c,type:"viewType"})),...r.testIDs.map(c=>({value:c,type:"testID"})),...r.nativeIDs.map(c=>({value:c,type:"nativeID"})),...r.componentNames.map(c=>({value:c,type:"component"})),...r.accessibilityLabels.map(c=>({value:c,type:"accessibilityLabel"}))]}};const F=ee(m);const U=r.viewTypes.length+r.testIDs.length+r.nativeIDs.length+r.componentNames.length+r.accessibilityLabels.length;const V=I((n,c)=>{const S=[...d.includePatterns,{type:n,value:c}];u({includePatterns:S});H(null)},[d.includePatterns,u]);const _=I((n,c)=>{const S=[...d.excludePatterns,{type:n,value:c}];u({excludePatterns:S});E(null)},[d.excludePatterns,u]);const te=I(n=>{const c=d.includePatterns.filter((S,$)=>$!==n);u({includePatterns:c})},[d.includePatterns,u]);const oe=I(n=>{const c=d.excludePatterns.filter((S,$)=>$!==n);u({excludePatterns:c})},[d.excludePatterns,u]);const ne=I((n,c)=>{T({type:n,value:c})},[]);const le=I(()=>{if(y){V(y.type,y.value);T(null)}},[y,V]);const re=I(()=>{if(y){_(y.type,y.value);T(null)}},[y,_]);return t(a,{style:e.container,children:t(O,{keyboardShouldPersistTaps:"handled",nativeID:"__rn_buoy__filter-view",testID:"buoy-highlight-filter-scroll",style:e.scrollView,contentContainerStyle:e.scrollContent,showsVerticalScrollIndicator:false,children:b==="filters"?l(M,{children:[l(a,{style:e.section,children:[l(p,{children:[t(p.Icon,{icon:q,color:o.color.accent,size:12}),t(p.Title,{children:"INCLUDE ONLY"}),d.includePatterns.length>0&&t(p.Badge,{testID:"buoy-highlight-include-count",count:d.includePatterns.length,color:o.color.accent})]}),t(i,{style:e.sectionDescription,children:"Show only components matching these patterns. If any are set, components must match at least one."}),d.includePatterns.length>0&&t(a,{style:e.patternChips,children:d.includePatterns.map((n,c)=>t(J,{mode:"include",pattern:n,onRemove:()=>te(c)},`${n.type}-${n.value}-${c}`))}),t(a,{style:e.addPatternRow,children:z?t(Y,{mode:"include",onSelect:n=>{C(false);H(n)},onCancel:()=>C(false)}):B?t(Z,{mode:"include",type:B,onSubmit:n=>V(B,n),onCancel:()=>H(null)}):l(g,{testID:"buoy-highlight-include-add",accessibilityRole:"button",accessibilityLabel:"Add include pattern",style:[e.addButton,{borderColor:o.color.accentBorderStrong}],onPress:()=>C(true),children:[t(K,{size:14,color:o.color.accent}),t(i,{style:[e.addButtonText,{color:o.color.accent}],children:"Add include pattern"})]})})]}),l(a,{style:e.section,children:[l(p,{children:[t(p.Icon,{icon:N,color:o.color.accent,size:12}),t(p.Title,{children:"EXCLUDE"}),d.excludePatterns.length>0&&t(p.Badge,{testID:"buoy-highlight-exclude-count",count:d.excludePatterns.length,color:o.color.accent})]}),t(i,{style:e.sectionDescription,children:"Hide components matching these patterns from the list."}),d.excludePatterns.length>0&&t(a,{style:e.patternChips,children:d.excludePatterns.map((n,c)=>t(J,{mode:"exclude",pattern:n,onRemove:()=>oe(c)},`${n.type}-${n.value}-${c}`))}),t(a,{style:e.addPatternRow,children:Q?t(Y,{mode:"exclude",onSelect:n=>{k(false);E(n)},onCancel:()=>k(false)}):W?t(Z,{mode:"exclude",type:W,onSubmit:n=>_(W,n),onCancel:()=>E(null)}):l(g,{testID:"buoy-highlight-exclude-add",accessibilityRole:"button",accessibilityLabel:"Add exclude pattern",style:[e.addButton,{borderColor:o.color.accentBorderStrong}],onPress:()=>k(true),children:[t(K,{size:14,color:o.color.accent}),t(i,{style:[e.addButtonText,{color:o.color.accent}],children:"Add exclude pattern"})]})})]}),l(a,{style:e.section,children:[l(p,{children:[t(p.Icon,{icon:se,color:o.color.warning,size:12}),t(p.Title,{children:"RENDER COUNT RANGE"}),(d.minRenderCount!==void 0||d.maxRenderCount!==void 0)&&t(p.Badge,{count:1,color:o.color.warning})]}),t(i,{style:e.sectionDescription,children:"Show only components with render count in a specific range."}),l(a,{nativeID:"__rn_buoy__render-count-range",testID:"buoy-highlight-range",style:e.renderCountRangeContainer,children:[l(a,{style:e.renderCountInputRow,children:[l(a,{style:e.renderCountInputGroup,children:[t(i,{style:e.renderCountLabel,children:"Min"}),t(A,{value:d.minRenderCount!==void 0?String(d.minRenderCount):"",onChangeText:n=>{const c=parseInt(n,10);if(n===""||n===void 0){u({minRenderCount:void 0})}else if(!isNaN(c)&&c>=0){u({minRenderCount:c})}},testID:"buoy-highlight-range-min",placeholder:"0",placeholderTextColor:o.color.placeholder,style:e.renderCountInput,keyboardType:"number-pad",returnKeyType:"done"})]}),t(i,{style:e.renderCountSeparator,children:"to"}),l(a,{style:e.renderCountInputGroup,children:[t(i,{style:e.renderCountLabel,children:"Max"}),t(A,{value:d.maxRenderCount!==void 0?String(d.maxRenderCount):"",onChangeText:n=>{const c=parseInt(n,10);if(n===""||n===void 0){u({maxRenderCount:void 0})}else if(!isNaN(c)&&c>=0){u({maxRenderCount:c})}},testID:"buoy-highlight-range-max",placeholder:"\u221E",placeholderTextColor:o.color.placeholder,style:e.renderCountInput,keyboardType:"number-pad",returnKeyType:"done"})]})]}),(d.minRenderCount!==void 0||d.maxRenderCount!==void 0)&&l(g,{testID:"buoy-highlight-range-clear",accessibilityRole:"button",accessibilityLabel:"Clear range",style:e.clearRangeButton,onPress:()=>u({minRenderCount:void 0,maxRenderCount:void 0}),children:[t(L,{size:12,color:o.color.warning}),t(i,{style:e.clearRangeButtonText,children:"Clear Range"})]})]})]}),l(a,{style:e.section,children:[l(p,{children:[t(p.Icon,{icon:X,color:o.color.textSecondary,size:12}),t(p.Title,{children:"DETECTED ITEMS"})]}),t(i,{style:e.sectionDescription,children:"Tap an item to quickly add it as an exclude pattern."}),l(O,{horizontal:true,showsHorizontalScrollIndicator:false,style:e.categoryBadgeScroll,contentContainerStyle:e.categoryBadgeScrollContent,children:[U>0&&t(D,{filterType:"all",count:U,isSelected:m==="all",onPress:()=>x("all")}),r.viewTypes.length>0&&t(D,{filterType:"viewType",count:r.viewTypes.length,isSelected:m==="viewType",onPress:()=>x("viewType")}),r.testIDs.length>0&&t(D,{filterType:"testID",count:r.testIDs.length,isSelected:m==="testID",onPress:()=>x("testID")}),r.nativeIDs.length>0&&t(D,{filterType:"nativeID",count:r.nativeIDs.length,isSelected:m==="nativeID",onPress:()=>x("nativeID")}),r.componentNames.length>0&&t(D,{filterType:"component",count:r.componentNames.length,isSelected:m==="component",onPress:()=>x("component")}),r.accessibilityLabels.length>0&&t(D,{filterType:"accessibilityLabel",count:r.accessibilityLabels.length,isSelected:m==="accessibilityLabel",onPress:()=>x("accessibilityLabel")})]}),t(a,{nativeID:"__rn_buoy__detected-items",testID:"buoy-highlight-detected",style:e.detectedItemsContainer,children:F.length>0?t(O,{keyboardShouldPersistTaps:"handled",testID:"buoy-highlight-detected-scroll",style:e.detectedItemsScroll,contentContainerStyle:e.detectedItems,nestedScrollEnabled:true,showsVerticalScrollIndicator:true,children:F.map(n=>{const c=P(n.type);return t(g,{testID:he(n.type,n.value),accessibilityRole:"button",accessibilityLabel:`${c.label} ${n.value}`,style:[e.detectedItem,{borderColor:c.color+"40"}],onPress:()=>ne(n.type,n.value),children:m==="all"?t(G,{type:n.type,value:n.value,compact:true,shortLabel:true}):t(i,{style:e.detectedItemText,numberOfLines:1,children:n.value})},`${n.type}-${n.value}`)})}):t(i,{testID:"buoy-highlight-detected-empty",style:e.emptyText,children:"No items detected yet. Start tracking to see components here."})})]}),t(ce,{visible:y!==null,transparent:true,animationType:"fade",onRequestClose:()=>T(null),children:t(ae,{accessible:false,testID:"buoy-highlight-detected-popup-backdrop",style:e.modalOverlay,onPress:()=>T(null),children:t(a,{accessible:false,testID:"buoy-highlight-detected-popup",style:e.actionPopup,children:y&&l(M,{children:[t(a,{style:e.actionPopupHeader,children:t(G,{type:y.type,value:y.value,compact:true,shortLabel:true})}),l(a,{style:e.actionPopupButtons,children:[l(g,{testID:"buoy-highlight-detected-popup-include",accessibilityRole:"button",accessibilityLabel:"Include only",style:[e.actionPopupButton,e.actionPopupInclude],onPress:le,children:[t(q,{size:16,color:o.color.accent}),t(i,{style:[e.actionPopupButtonText,{color:o.color.accent}],children:"Include Only"})]}),l(g,{testID:"buoy-highlight-detected-popup-exclude",accessibilityRole:"button",accessibilityLabel:"Exclude",style:[e.actionPopupButton,e.actionPopupExclude],onPress:re,children:[t(N,{size:16,color:o.color.accent}),t(i,{style:[e.actionPopupButtonText,{color:o.color.accent}],children:"Exclude"})]})]}),t(g,{testID:"buoy-highlight-detected-popup-cancel",accessibilityRole:"button",accessibilityLabel:"Cancel",style:e.actionPopupCancel,onPress:()=>T(null),children:t(i,{style:e.actionPopupCancelText,children:"Cancel"})})]})})})}),l(a,{style:e.section,children:[l(p,{children:[t(p.Icon,{icon:N,color:o.color.textTertiary,size:12}),t(p.Title,{children:"HOW FILTERS WORK"})]}),t(a,{style:e.howItWorks,children:l(i,{style:e.howItWorksText,children:[t(i,{style:e.howItWorksBold,children:"Any:"})," Matches against all fields","\n",t(i,{style:e.howItWorksBold,children:"ViewType:"})," Native component class (RCTView, RCTText)","\n",t(i,{style:e.howItWorksBold,children:"testID:"})," Component testID prop","\n",t(i,{style:e.howItWorksBold,children:"Component:"})," React component name from fiber"]})})]})]}):t(M,{children:l(a,{style:e.section,children:[l(p,{children:[t(p.Icon,{icon:de,color:o.color.textTertiary,size:12}),t(p.Title,{children:"SETTINGS"})]}),l(a,{style:e.settingsSection,children:[l(a,{style:e.settingItem,children:[l(a,{style:e.settingHeader,children:[t(i,{style:e.settingLabel,children:"Show Render Count"}),t(w,{testID:R("showRenderCount"),value:s.showRenderCount,onValueChange:n=>{h({showRenderCount:n});if(!n&&s.trackRenderCauses){h({trackRenderCauses:false})}},trackColor:{false:o.color.surfaceElevated,true:o.color.accent+"80"},thumbColor:s.showRenderCount?o.color.accent:o.color.knob})]}),t(i,{style:e.settingDescription,children:"Display render count badge on highlights. Disabling improves performance by skipping count tracking."})]}),l(a,{style:[e.settingItem,e.settingItemSpaced],children:[l(a,{style:e.settingHeader,children:[t(i,{style:[e.settingLabel,!s.showRenderCount&&e.settingLabelDisabled],children:"Track Render Causes"}),t(w,{testID:R("trackRenderCauses"),value:s.trackRenderCauses,onValueChange:n=>h({trackRenderCauses:n}),trackColor:{false:o.color.surfaceElevated,true:o.color.warning+"80"},thumbColor:s.trackRenderCauses?o.color.warning:o.color.knob,disabled:!s.showRenderCount})]}),l(i,{style:e.settingDescription,children:["Detect WHY components render (props, hooks, parent re-render).",!s.showRenderCount&&l(i,{style:e.settingWarning,children:["\n",'Requires "Show Render Count" to be enabled.']})]})]}),l(a,{style:[e.settingItem,e.settingItemSpaced],children:[l(a,{style:e.settingHeader,children:[t(i,{style:[e.settingLabel,!s.trackRenderCauses&&e.settingLabelDisabled],children:"Enable Render History"}),t(w,{testID:R("enableRenderHistory"),value:s.enableRenderHistory,onValueChange:n=>h({enableRenderHistory:n}),trackColor:{false:o.color.surfaceElevated,true:o.color.accent+"80"},thumbColor:s.enableRenderHistory?o.color.accent:o.color.knob,disabled:!s.trackRenderCauses})]}),l(i,{style:e.settingDescription,children:["Store render events for each component to view in the History tab.",!s.trackRenderCauses&&l(i,{style:e.settingWarning,children:["\n",'Requires "Track Render Causes" to be enabled.']})]})]}),l(a,{style:[e.settingItem,e.settingItemSpaced],children:[l(a,{style:e.settingHeader,children:[t(i,{style:e.settingLabel,children:"Debug Log Level"}),t(a,{style:e.settingValue,children:t(i,{testID:"buoy-highlight-setting-debugLogLevel-value",style:[e.settingValueText,s.debugLogLevel!=="off"&&{color:o.color.warning}],children:j.find(n=>n.value===s.debugLogLevel)?.label||"Off"})})]}),t(i,{style:e.settingDescription,children:"Control console logging verbosity for render cause detection."}),t(a,{style:e.batchSizePresets,children:j.map(n=>t(g,{style:[e.batchSizePreset,s.debugLogLevel===n.value&&e.batchSizePresetActive,n.value!=="off"&&s.debugLogLevel===n.value&&{backgroundColor:o.color.warningSoft,borderColor:o.color.warning}],onPress:()=>h({debugLogLevel:n.value}),testID:`buoy-highlight-preset-log-${n.value}`,accessibilityRole:"button",accessibilityLabel:`Debug log level ${n.label}`,children:t(i,{style:[e.batchSizePresetText,s.debugLogLevel===n.value&&e.batchSizePresetTextActive,n.value!=="off"&&s.debugLogLevel===n.value&&{color:o.color.warning}],children:n.label})},n.value))}),l(i,{style:e.settingDescriptionMuted,children:[j.find(n=>n.value===s.debugLogLevel)?.description,s.debugLogLevel!=="off"&&" \u2022 Check Metro console for logs"]})]}),l(a,{style:[e.settingItem,e.settingItemSpaced],children:[l(a,{style:e.settingHeader,children:[t(i,{style:e.settingLabel,children:"Batch Size"}),t(a,{style:e.settingValue,children:t(i,{testID:"buoy-highlight-setting-batchSize-value",style:e.settingValueText,children:s.batchSize})})]}),t(i,{style:e.settingDescription,children:"Maximum components to highlight per render update. Higher values capture more re-renders but may impact performance on complex screens."}),t(a,{style:e.batchSizePresets,children:be.map(n=>t(g,{style:[e.batchSizePreset,s.batchSize===n.value&&e.batchSizePresetActive],onPress:()=>h({batchSize:n.value}),testID:`buoy-highlight-preset-batch-${n.value}`,accessibilityRole:"button",accessibilityLabel:`Batch size ${n.label}`,children:t(i,{style:[e.batchSizePresetText,s.batchSize===n.value&&e.batchSizePresetTextActive],children:n.label})},n.value))})]}),l(a,{style:[e.settingItem,e.settingItemSpaced],children:[l(a,{style:e.settingHeader,children:[t(i,{style:e.settingLabel,children:"Show host views"}),t(w,{testID:R("showHostViews"),value:!!s.showHostViews,onValueChange:n=>h({showHostViews:n}),trackColor:{false:o.color.surfaceElevated,true:o.color.accent+"80"},thumbColor:s.showHostViews?o.color.accent:o.color.knob})]}),t(i,{style:e.settingDescription,children:"Include anonymous View / RCTView / Text hosts. Off by default so the list is named composites (what actually re-rendered)."})]}),l(a,{style:[e.settingItem,e.settingItemSpaced],children:[l(a,{style:e.settingHeader,children:[t(i,{style:e.settingLabel,children:"Highlight Dev Tools"}),t(w,{testID:R("excludeDevTools"),value:!s.excludeDevTools,onValueChange:n=>h({excludeDevTools:!n}),trackColor:{false:o.color.surfaceElevated,true:o.color.accent+"80"},thumbColor:!s.excludeDevTools?o.color.accent:o.color.knob})]}),l(i,{style:e.settingDescription,children:["Show re-render highlights on Buoy dev tools (floating menu, modals, etc.). Useful for optimizing the dev tools themselves.",!s.excludeDevTools&&l(i,{style:e.settingWarning,children:["\n","The highlight overlay is always excluded to prevent infinite loops."]})]})]})]})]})})})})}const e=ie.create({container:{flex:1,backgroundColor:"transparent"},scrollView:{flex:1},scrollContent:{paddingHorizontal:16,paddingTop:12,paddingBottom:32},section:{backgroundColor:o.color.surface,borderRadius:8,borderWidth:1,borderColor:o.color.border,marginBottom:12,overflow:"hidden"},sectionDescription:{fontSize:11,color:o.color.textSecondary,paddingHorizontal:16,paddingTop:8,lineHeight:16},patternChips:{flexDirection:"row",flexWrap:"wrap",gap:8,paddingHorizontal:16,paddingTop:12},patternChip:{flexDirection:"row",alignItems:"center",backgroundColor:o.color.surfaceElevated,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:o.color.text,fontFamily:v,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:o.color.surfaceElevated,gap:6},typeOptionText:{fontSize:11,fontWeight:"600"},typePickerCancel:{padding:8},patternInputContainer:{flexDirection:"row",alignItems:"center",backgroundColor:o.color.surfaceElevated,borderRadius:8,borderWidth:1,borderColor:o.color.border,paddingLeft:4,paddingRight:8,paddingVertical:4,gap:4},patternInput:{flex:1,fontSize:12,color:o.color.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:o.color.surfaceElevated,borderRadius:6,borderWidth:1,paddingVertical:6,paddingHorizontal:10,gap:6},detectedItemText:{fontSize:11,color:o.color.text,fontFamily:v},emptyText:{fontSize:11,color:o.color.textTertiary,fontStyle:"italic",textAlign:"center",paddingVertical:16,paddingHorizontal:16},howItWorks:{paddingHorizontal:16,paddingVertical:12},howItWorksText:{fontSize:11,color:o.color.textTertiary,lineHeight:18,fontFamily:v},howItWorksBold:{fontWeight:"700",color:o.color.textSecondary},modalOverlay:{flex:1,backgroundColor:"rgba(0, 0, 0, 0.5)",justifyContent:"center",alignItems:"center",padding:32},actionPopup:{backgroundColor:o.color.surface,borderRadius:12,borderWidth:1,borderColor:o.color.border,width:"100%",maxWidth:300,overflow:"hidden"},actionPopupHeader:{padding:16,borderBottomWidth:1,borderBottomColor:o.color.separator,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:o.color.accentSoft},actionPopupExclude:{backgroundColor:o.color.accentSoft},actionPopupButtonText:{fontSize:13,fontWeight:"600"},actionPopupCancel:{padding:12,borderTopWidth:1,borderTopColor:o.color.separator,alignItems:"center"},actionPopupCancelText:{fontSize:13,color:o.color.textTertiary,fontWeight:"500"},settingsSection:{paddingHorizontal:16,paddingTop:8,paddingBottom:16},settingItem:{gap:8},settingItemSpaced:{marginTop:16,paddingTop:16,borderTopWidth:1,borderTopColor:o.color.separator},settingHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},settingLabel:{fontSize:13,fontWeight:"600",color:o.color.text},settingValue:{backgroundColor:o.color.fillSecondary,paddingHorizontal:10,paddingVertical:4,borderRadius:6},settingValueText:{fontSize:12,fontWeight:"700",color:o.color.textTertiary,fontFamily:v},settingDescription:{fontSize:11,color:o.color.textSecondary,lineHeight:16},settingDescriptionMuted:{fontSize:10,color:o.color.textTertiary,lineHeight:14,marginTop:4,fontStyle:"italic"},settingLabelDisabled:{color:o.color.textTertiary},settingWarning:{color:o.color.warning,fontWeight:"500"},batchSizePresets:{flexDirection:"row",flexWrap:"wrap",gap:8,marginTop:4},batchSizePreset:{paddingVertical:8,paddingHorizontal:14,borderRadius:6,backgroundColor:o.color.surfaceElevated,borderWidth:1,borderColor:o.color.border},batchSizePresetActive:{backgroundColor:o.color.fillSecondary,borderColor:o.color.fillTertiary},batchSizePresetText:{fontSize:12,fontWeight:"500",color:o.color.textSecondary,fontFamily:v},batchSizePresetTextActive:{color:o.color.textTertiary,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:o.color.textTertiary,textTransform:"uppercase",letterSpacing:.5},renderCountInput:{backgroundColor:o.color.surfaceElevated,borderRadius:8,borderWidth:1,borderColor:o.color.border,paddingVertical:10,paddingHorizontal:12,fontSize:14,fontWeight:"600",color:o.color.text,fontFamily:v,textAlign:"center"},renderCountSeparator:{fontSize:12,color:o.color.textTertiary,marginTop:18},clearRangeButton:{flexDirection:"row",alignItems:"center",justifyContent:"center",paddingVertical:8,paddingHorizontal:12,borderRadius:6,backgroundColor:o.color.warningSoft,borderWidth:1,borderColor:o.color.warning+"40",gap:6,alignSelf:"center"},clearRangeButtonText:{fontSize:11,fontWeight:"600",color:o.color.warning}});export default HighlightFilterView;