@buoy-gg/highlight-updates 2.1.9 → 2.1.11

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

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