react-native-inapp-inspector 2.3.5 → 2.3.7

package/dist/esm/components/BrandSquareIcon.js

@@ -3,14 +3,14 @@ import Svg, { Circle, Path, G, Defs, LinearGradient, RadialGradient, Stop, Rect,
 export const BrandSquareIcon = ({ size = 56 }) => {
     return (<Svg width={size} height={size} viewBox="0 0 256 256" fill="none">
       <Defs>
-        {/* App Tile Background - Crisp Royal Deep Violet to Midnight */}
+        
         <LinearGradient id="bs_tile" x1="0" y1="0" x2="256" y2="256" gradientUnits="userSpaceOnUse">
           <Stop offset="0%" stopColor="#1E1B4B"/>
           <Stop offset="50%" stopColor="#18182F"/>
           <Stop offset="100%" stopColor="#0B0F19"/>
         </LinearGradient>
 
-        {/* Outer Neon Cyber Border */}
+        
         <LinearGradient id="bs_border" x1="0" y1="0" x2="256" y2="256" gradientUnits="userSpaceOnUse">
           <Stop offset="0%" stopColor="#818CF8" stopOpacity={0.9}/>
           <Stop offset="45%" stopColor="#C084FC" stopOpacity={0.8}/>
@@ -18,21 +18,21 @@ export const BrandSquareIcon = ({ size = 56 }) => {
           <Stop offset="100%" stopColor="#38BDF8" stopOpacity={0.9}/>
         </LinearGradient>
 
-        {/* Ambient Top Glow */}
+        
         <RadialGradient id="bs_top_glow" cx="50%" cy="15%" r="65%">
           <Stop offset="0%" stopColor="#818CF8" stopOpacity={0.35}/>
           <Stop offset="60%" stopColor="#A855F7" stopOpacity={0.12}/>
           <Stop offset="100%" stopColor="#1E1B4B" stopOpacity={0}/>
         </RadialGradient>
 
-        {/* Owl Outer Body Gradient - High Contrast */}
+        
         <LinearGradient id="bs_body" x1="64" y1="40" x2="192" y2="220" gradientUnits="userSpaceOnUse">
           <Stop offset="0%" stopColor="#3730A3"/>
           <Stop offset="50%" stopColor="#2E1065"/>
           <Stop offset="100%" stopColor="#17123A"/>
         </LinearGradient>
 
-        {/* Neon Cyber Beam Stroke */}
+        
         <LinearGradient id="bs_beam" x1="40" y1="40" x2="220" y2="220" gradientUnits="userSpaceOnUse">
           <Stop offset="0%" stopColor="#67E8F9"/>
           <Stop offset="35%" stopColor="#818CF8"/>
@@ -40,7 +40,7 @@ export const BrandSquareIcon = ({ size = 56 }) => {
           <Stop offset="100%" stopColor="#F472B6"/>
         </LinearGradient>
 
-        {/* Eyes Radiant Iris */}
+        
         <RadialGradient id="bs_iris" cx="38%" cy="36%" r="65%">
           <Stop offset="0%" stopColor="#FEF08A"/>
           <Stop offset="40%" stopColor="#FBBF24"/>
@@ -48,13 +48,13 @@ export const BrandSquareIcon = ({ size = 56 }) => {
           <Stop offset="100%" stopColor="#D97706"/>
         </RadialGradient>
 
-        {/* Beak Gradient */}
+        
         <LinearGradient id="bs_beak" x1="124" y1="120" x2="132" y2="136" gradientUnits="userSpaceOnUse">
           <Stop offset="0%" stopColor="#FDE047"/>
           <Stop offset="100%" stopColor="#EA580C"/>
         </LinearGradient>
 
-        {/* Diagnostic Lens Glass Flare */}
+        
         <RadialGradient id="bs_lens" cx="40%" cy="35%" r="65%">
           <Stop offset="0%" stopColor="#A5F3FC" stopOpacity={0.4}/>
           <Stop offset="50%" stopColor="#38BDF8" stopOpacity={0.18}/>
@@ -62,23 +62,23 @@ export const BrandSquareIcon = ({ size = 56 }) => {
         </RadialGradient>
       </Defs>
 
-      {/* ── 1. Rounded App Tile Base (Full Edge-to-Edge) ── */}
+      
       <Rect x="2" y="2" width="252" height="252" rx="58" fill="url(#bs_tile)"/>
       <Rect x="2" y="2" width="252" height="252" rx="58" fill="url(#bs_top_glow)"/>
       <Rect x="2" y="2" width="252" height="252" rx="58" fill="none" stroke="url(#bs_border)" strokeWidth="3.5"/>
 
-      {/* ── 2. Owl Outer Wings (Layered behind) ── */}
+      
       <Path d="M62 120 C42 152 46 194 76 210 C68 178 66 146 80 120 Z" fill="#1E1B4B" stroke="url(#bs_beam)" strokeWidth="3" strokeOpacity={0.75}/>
       <Path d="M194 120 C214 152 210 194 180 210 C188 178 190 146 176 120 Z" fill="#1E1B4B" stroke="url(#bs_beam)" strokeWidth="3" strokeOpacity={0.75}/>
 
-      {/* ── 3. Owl Body Contour ── */}
+      
       <Path d="M58 146 C54 98 68 64 88 52 L98 34 L118 56 Q128 50 138 56 L158 34 L168 52 C188 64 202 98 198 146 C202 180 186 208 152 216 C140 220 116 220 104 216 C70 208 54 180 58 146 Z" fill="url(#bs_body)" stroke="url(#bs_beam)" strokeWidth="4.5" strokeLinejoin="round"/>
 
-      {/* Inner Ear Highlights */}
+      
       <Path d="M98 42 L112 56 L102 57 Z" fill="#67E8F9" opacity={0.6}/>
       <Path d="M158 42 L144 56 L154 57 Z" fill="#F472B6" opacity={0.6}/>
 
-      {/* ── 4. Chest Terminal & Code Braces ── */}
+      
       <Rect x="98" y="162" width="60" height="38" rx="10" fill="#050811" stroke="url(#bs_beam)" strokeWidth="2.5"/>
       <G strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" fill="none">
         <Path d="M116 174 L108 181 L116 188" stroke="#38BDF8"/>
@@ -86,31 +86,31 @@ export const BrandSquareIcon = ({ size = 56 }) => {
         <Path d="M131 171 L125 191" stroke="#F43F5E"/>
       </G>
 
-      {/* ── 5. Facial Mask Plate ── */}
+      
       <Path d="M128 88 C152 64 192 72 192 104 C192 132 162 152 128 152 C94 152 64 132 64 104 C64 72 104 64 128 88 Z" fill="#1E1B4B" stroke="url(#bs_beam)" strokeWidth="2.8"/>
 
-      {/* ── 6. Right Eye (Glowing Owl Eye) ── */}
+      
       <Circle cx="156" cy="106" r="19" fill="url(#bs_iris)" stroke="#0F172A" strokeWidth="2.5"/>
       <Circle cx="156" cy="106" r="9.5" fill="#0B0F19"/>
       <Circle cx="159.5" cy="102.5" r="3.5" fill="#FFFFFF"/>
       <Circle cx="153" cy="109.5" r="1.8" fill="#FFFFFF" opacity={0.85}/>
 
-      {/* ── 7. Left Eye (Diagnostic Magnifier Lens) ── */}
-      {/* Magnifier Glass Glow */}
+      
+      
       <Circle cx="94" cy="104" r="30" fill="url(#bs_lens)" stroke="url(#bs_beam)" strokeWidth="6"/>
       <Line x1="72" y1="126" x2="48" y2="152" stroke="#0B0F19" strokeWidth="13" strokeLinecap="round"/>
       <Line x1="72" y1="126" x2="48" y2="152" stroke="url(#bs_beam)" strokeWidth="8" strokeLinecap="round"/>
 
-      {/* Eye Inside Magnifier */}
+      
       <Circle cx="94" cy="104" r="21" fill="url(#bs_iris)" stroke="#0F172A" strokeWidth="2.5"/>
       <Circle cx="94" cy="104" r="10.5" fill="#0B0F19"/>
       <Circle cx="98" cy="100" r="4" fill="#FFFFFF"/>
       <Circle cx="90.5" cy="107.5" r="2" fill="#FFFFFF" opacity={0.85}/>
 
-      {/* Lens Reflection Highlight */}
+      
       <Path d="M74 94 A26 26 0 0 1 106 78" stroke="#FFFFFF" strokeWidth="3" strokeLinecap="round" opacity={0.65} fill="none"/>
 
-      {/* ── 8. Beak ── */}
+      
       <Path d="M123 120 Q128 118 133 120 Q131.5 133 128 137 Q124.5 133 123 120 Z" fill="url(#bs_beak)" stroke="#78350F" strokeWidth="1"/>
     </Svg>);
 };

package/dist/esm/components/CodeSnippet.js

@@ -9,7 +9,6 @@ import { AppFonts } from '../styles/AppFonts';
 const escapeRegExp = (string) => {
     return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 };
-// HTML pretty printer
 const formatHTML = (html) => {
     if (!html)
         return '';
@@ -47,7 +46,6 @@ const formatHTML = (html) => {
     }
     return formatted.join('\n');
 };
-// CSS pretty printer
 const formatCSS = (css) => {
     if (!css)
         return '';
@@ -73,7 +71,6 @@ const formatCSS = (css) => {
     }
     return formatted.join('\n');
 };
-// JS pretty printer
 const formatJS = (js) => {
     if (!js)
         return '';
@@ -257,12 +254,12 @@ const CodeSnippetLine = React.memo(({ line, lineIndex, language, search, isActiv
         </Text>);
     };
     return (<View style={[styles.lineRow, isActiveMatch && styles.activeMatchRow]}>
-        {/* Gutter Line Number */}
+        
         <View style={[styles.gutter, { backgroundColor: AppColors.grayBackground, borderRightColor: AppColors.grayBorderSecondary }, isActiveMatch && styles.activeMatchGutter]}>
           <Text style={[styles.lineNumber, { color: AppColors.grayTextWeak }, isActiveMatch && styles.activeMatchLineNumber]}>{lineIndex + 1}</Text>
         </View>
 
-        {/* Highlighted Code Line */}
+        
         <View style={styles.codeLine}>
           <Text style={[styles.codeLineText, { color: AppColors.primaryBlack }]}>
             {tokens.length === 0 ? (<Text style={[styles.plain, { color: AppColors.primaryBlack }]}> </Text>) : (tokens.map((token, tokenIdx) => (<React.Fragment key={tokenIdx}>
@@ -278,21 +275,17 @@ const CodeSnippet = ({ code, language, search, }) => {
     const [currentMatchIdx, setCurrentMatchIdx] = useState(-1);
     const [visibleLinesCount, setVisibleLinesCount] = useState(200);
     const flatListRef = useRef(null);
-    // Sync prop search to searchQuery
     useEffect(() => {
         if (search !== undefined) {
             setSearchQuery(search);
         }
     }, [search]);
-    // Debounce search query updates
     useEffect(() => {
         const timer = setTimeout(() => {
             setDebouncedQuery(searchQuery);
         }, 300);
         return () => clearTimeout(timer);
     }, [searchQuery]);
-    // If code is extremely large (e.g. > 150KB), skip the pretty printers
-    // to avoid blocking the single JS thread.
     const formattedCode = useMemo(() => {
         if (!code)
             return '';
@@ -312,7 +305,6 @@ const CodeSnippet = ({ code, language, search, }) => {
             return [];
         return formattedCode.split(/\r?\n/);
     }, [formattedCode]);
-    // Find all line indices matching the search query
     const matches = useMemo(() => {
         if (!debouncedQuery.trim() || debouncedQuery.length < 2)
             return [];
@@ -325,13 +317,11 @@ const CodeSnippet = ({ code, language, search, }) => {
         }
         return indices;
     }, [debouncedQuery, lines]);
-    // Reset scroll and states on code/language changes
     useEffect(() => {
         setVisibleLinesCount(200);
         setSearchQuery(search || '');
         setCurrentMatchIdx(-1);
     }, [code, language]);
-    // Auto-scroll to the first match when search query returns matches
     useEffect(() => {
         if (matches.length > 0) {
             setCurrentMatchIdx(0);
@@ -345,11 +335,9 @@ const CodeSnippet = ({ code, language, search, }) => {
         if (matches.length === 0 || matchIdx < 0 || matchIdx >= matches.length)
             return;
         const lineIdx = matches[matchIdx];
-        // Ensure the targeted index is loaded in FlatList
         if (lineIdx >= visibleLinesCount) {
             setVisibleLinesCount(lineIdx + 100);
         }
-        // Schedule scroll after state has applied
         setTimeout(() => {
             try {
                 flatListRef.current?.scrollToIndex({
@@ -359,7 +347,6 @@ const CodeSnippet = ({ code, language, search, }) => {
                 });
             }
             catch (e) {
-                // Fallback recovery is handled by onScrollToIndexFailed
             }
         }, 50);
     };
@@ -408,13 +395,13 @@ const CodeSnippet = ({ code, language, search, }) => {
         return (<CodeSnippetLine line={item} lineIndex={index} language={language} search={debouncedQuery} isActiveMatch={isActiveMatch}/>);
     };
     return (<View style={{ flex: 1 }}>
-      {/* Search Header Row */}
+      
       <View style={styles.searchRow}>
         <View style={[styles.searchBar, { backgroundColor: AppColors.primaryLight, borderColor: AppColors.grayBorderSecondary }]}>
           <SearchIcon color={AppColors.grayTextWeak} size={15}/>
           <TextInput placeholder={`Search ${language.toUpperCase()}...`} placeholderTextColor={AppColors.grayTextWeak} value={searchQuery} onChangeText={setSearchQuery} style={[styles.searchInput, { color: AppColors.primaryBlack }]} autoCorrect={false} autoCapitalize="none"/>
 
-          {/* Matches Info */}
+          
           {debouncedQuery.length >= 2 && (<Text style={[styles.matchCountText, { backgroundColor: AppColors.grayBackground, color: AppColors.grayTextWeak }]}>
               {matches.length > 0 ? `${currentMatchIdx + 1}/${matches.length}` : '0/0'}
             </Text>)}
@@ -424,7 +411,7 @@ const CodeSnippet = ({ code, language, search, }) => {
             </Pressable>)}
         </View>
 
-        {/* Up / Down Arrow Navigation Buttons */}
+        
         {matches.length > 0 && (<View style={[styles.navArrowsGroup, { backgroundColor: AppColors.primaryLight, borderColor: AppColors.grayBorderSecondary }]}>
             <TouchableScale onPress={handlePrevMatch} hitSlop={8} style={styles.navArrowBtn}>
               <ArrowUpIcon color={AppColors.grayTextStrong} size={14}/>
@@ -437,7 +424,7 @@ const CodeSnippet = ({ code, language, search, }) => {
         <CopyButton value={code} label={`${language.toUpperCase()} Source`}/>
       </View>
 
-      {/* Code Snippet list container */}
+      
       <View style={[styles.container, { backgroundColor: AppColors.grayBackground, borderColor: AppColors.grayBorderSecondary }]}>
         <FlatList ref={flatListRef} data={visibleLines} renderItem={renderLine} keyExtractor={(_, index) => String(index)} maxToRenderPerBatch={30} windowSize={5} initialNumToRender={50} removeClippedSubviews={Platform.OS === 'android'} onEndReached={handleEndReached} onEndReachedThreshold={0.5} onScrollToIndexFailed={onScrollToIndexFailed}/>
       </View>

package/dist/esm/components/ConsoleLogCard.js

@@ -144,7 +144,6 @@ export const ConsoleLogCard = React.memo(function ConsoleLogCard({ item, searchS
                 textColor: AppColors.blue800,
             };
         }
-        // Default / Standard console.log
         return {
             border: AppColors.indigo500,
             badgeBg: AppColors.indigo50,

package/dist/esm/components/CopyButton.js

@@ -1,13 +1,9 @@
 import React, { useState, useCallback } from 'react';
 import { Share } from 'react-native';
-// Components
 import TouchableScale from './TouchableScale';
-// Helpers
 import { copyToClipboard } from '../helpers';
 import { triggerNativeHaptic } from '../native/NativeInspector';
-// Assets
 import { TerminalIcon, FetchIcon, CopyIcon, CheckIcon } from './NetworkIcons';
-// Stylesheet
 import { AppColors } from '../styles/AppColors';
 import styles from '../styles';
 const CopyButton = React.memo(({ value, label, iconType = 'copy' }) => {

package/dist/esm/components/DiffViewer.js

@@ -1,9 +1,7 @@
 import { useTranslation } from '../i18n';
 import React, { useMemo } from 'react';
 import { View, Text, ScrollView } from 'react-native';
-// Helpers
 import { getDiff } from '../helpers';
-// Stylesheet
 import { AppColors } from '../styles/AppColors';
 import styles from '../styles';
 const DiffViewer = React.memo(({ oldData, newData, forceOpen, }) => {

package/dist/esm/components/DomainHeader.js

@@ -1,13 +1,9 @@
 import React, { useEffect, useRef } from 'react';
 import { Animated, Pressable, View, Text } from 'react-native';
-// Stylesheet
 import { AppColors } from '../styles/AppColors';
 import { AppFonts } from '../styles/AppFonts';
-// Helpers
 import { formatDateTime } from '../helpers';
-// Assets
 import { ChevronIcon, ScreenIcon, CheckIcon, FailIcon, ClockIcon, } from './NetworkIcons';
-// Stylesheet
 import styles from '../styles';
 const DomainHeader = ({ pageName, color, stats, activeFilters, onToggleFilter, isCollapsed, onToggleCollapse, isFirst, timestamp, }) => {
     const chevronAnim = useRef(new Animated.Value(isCollapsed ? 0 : 1)).current;

package/dist/esm/components/EmptyState.js

@@ -1,11 +1,8 @@
 import React, { useEffect, useRef } from 'react';
 import { Animated, DevSettings, Alert, Text } from 'react-native';
-// Components
 import TouchableScale from './TouchableScale';
 import AnimatedEntrance from './AnimatedEntrance';
-// Assets
 import { EmptyRadarIcon } from './NetworkIcons';
-// Stylesheet
 import { AppColors } from '../styles/AppColors';
 import styles from '../styles';
 const EmptyState = React.memo(function EmptyState({ isSearch, searchQuery, customTitle, customSub, onClearSearch, }) {

package/dist/esm/components/ErrorBoundary.js

@@ -20,7 +20,6 @@ function parseStackTrace(stack) {
             line.includes('handleInterceptedCrash')) {
             continue;
         }
-        // iOS format: method@url:line:col
         const iosMatch = line.match(/^([^@]*)@(.*):(\d+):(\d+)$/);
         if (iosMatch) {
             const [, method, fullPath, lineNum, colNum] = iosMatch;
@@ -36,7 +35,6 @@ function parseStackTrace(stack) {
             });
             continue;
         }
-        // Android format: at method (url:line:col) or at url:line:col
         const androidMatch = line.match(/^\s*at\s+(.+)\s+\((.+):(\d+):(\d+)\)$/);
         if (androidMatch) {
             const [, method, fullPath, lineNum, colNum] = androidMatch;
@@ -67,7 +65,6 @@ function parseStackTrace(stack) {
             });
         }
     }
-    // Find topmost project frame, or fallback to first frame
     const rootFrame = frames.find(f => f.isProjectFile) || frames[0] || null;
     return { rootFrame, frames };
 }
@@ -125,7 +122,6 @@ ${error.stack || 'No stack trace available'}
         const isSyntaxOrType = errorType.includes('Syntax') ||
             errorType.includes('Type') ||
             errorType.includes('Reference');
-        // ─── Inline Fallback View ─────────────────────────────────────────────
         if (this.props.fallbackType === 'inline') {
             return (<View style={styles.inlineContainer}>
           <View style={styles.inlineHeader}>
@@ -151,10 +147,9 @@ ${error.stack || 'No stack trace available'}
           </View>
         </View>);
         }
-        // ─── Full-Screen Custom Native Recovery Modal ─────────────────────────
         return (<SafeAreaView style={styles.safeArea}>
         <View style={styles.container}>
-          {/* Header Banner */}
+          
           <View style={styles.header}>
             <View style={styles.iconGlowWrap}>
               <WarningTriangleIcon color={AppColors.red500} size={28}/>
@@ -179,7 +174,7 @@ ${error.stack || 'No stack trace available'}
           </View>
 
           <ScrollView style={styles.scrollArea} contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
-            {/* Error Message Box */}
+            
             <View style={styles.errorBox}>
               <View style={styles.errorBoxHeader}>
                 <CircleAlertIcon size={14} color={AppColors.red500}/>
@@ -188,7 +183,7 @@ ${error.stack || 'No stack trace available'}
               <Text style={styles.errorMessage}>{error.message}</Text>
             </View>
 
-            {/* Root Cause Location Card */}
+            
             {rootFrame && (<View style={styles.locationCard}>
                 <Text style={styles.cardHeaderTitle}>{t('errors.exactLocation')}</Text>
                 <View style={styles.locRow}>
@@ -212,7 +207,7 @@ ${error.stack || 'No stack trace available'}
                   </Text>) : null}
               </View>)}
 
-            {/* Formatted Stack Frames */}
+            
             <View style={styles.stackCard}>
               <View style={styles.stackCardHeader}>
                 <Text style={styles.cardHeaderTitle}>{t('errors.callStack')}</Text>
@@ -251,7 +246,7 @@ ${error.stack || 'No stack trace available'}
             </View>
           </ScrollView>
 
-          {/* Action Buttons Footer */}
+          
           <View style={styles.footer}>
             <TouchableOpacity onPress={this.handleReset} style={styles.retryBtn} activeOpacity={0.8}>
               <RefreshCcwIcon size={16} color={AppColors.white}/>

package/dist/esm/components/HeadersSection.js

@@ -1,16 +1,11 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from '../i18n';
 import { View, Pressable, Text, Animated } from 'react-native';
-// Components
 import CopyButton from './CopyButton';
 import TouchableScale from './TouchableScale';
-// Helpers
 import { copyToClipboard } from '../helpers';
-// Custom Hooks
 import useAccordion from '../customHooks/useAccordion';
-// Assets
 import { HeadersIcon, ChevronIcon, CopyIcon } from './NetworkIcons';
-// Stylesheet
 import { AppColors } from '../styles/AppColors';
 import styles from '../styles';
 const HeaderRow = React.memo(function HeaderRow({ headerKey, value, isLast, index, }) {

package/dist/esm/components/HighlightText.js

@@ -1,15 +1,12 @@
 import React from 'react';
 import { Text } from 'react-native';
-// Helpers
 import { escapeRegex, handleOpenExternalLink } from '../helpers';
 const HighlightText = React.memo(function HighlightText({ text, search, style, highlightStyle, detectLinks, numberOfLines, ...rest }) {
-    // Optimization: For huge strings (> 20KB) with no active search, bypass all splitting/regex overhead
     if (!text || (text.length > 20000 && !search && !detectLinks)) {
         return (<Text style={style} numberOfLines={numberOfLines} {...rest}>
         {text}
       </Text>);
     }
-    // Regex to detect absolute URLs
     const URL_REGEX = /(https?:\/\/[^\s]+)/g;
     const renderNormalOrHighlighted = (subText, keyPrefix) => {
         if (!search) {
@@ -29,7 +26,7 @@ const HighlightText = React.memo(function HighlightText({ text, search, style, h
         {parts.map((part, i) => {
                 if (part.match(URL_REGEX)) {
                     return (<Text key={`link-${i}`} style={{
-                            color: '#007AFF', // skyBlue link color
+                            color: '#007AFF',
                             textDecorationLine: 'underline',
                         }} onPress={() => {
                             handleOpenExternalLink(part);

package/dist/esm/components/Inspector/AnalyticsFilterModal.js

@@ -23,7 +23,6 @@ const DEFAULT_FILTERS = {
 };
 const AnalyticsFilterModal = ({ visible, onClose, }) => {
     const { analyticsEvents, analyticsSearch, analyticsFilters, setAnalyticsFilters, } = useInspector();
-    // Staged Draft State: applied ONLY on tapping "Apply Filters"
     const [draft, setDraft] = useState(() => ({
         ...analyticsFilters,
         categories: new Set(analyticsFilters.categories),
@@ -31,7 +30,6 @@ const AnalyticsFilterModal = ({ visible, onClose, }) => {
         sources: new Set(analyticsFilters.sources || ['all']),
         userTypes: new Set(analyticsFilters.userTypes || ['all']),
     }));
-    // Re-sync draft whenever modal opens
     useEffect(() => {
         if (visible) {
             setDraft({
@@ -43,7 +41,6 @@ const AnalyticsFilterModal = ({ visible, onClose, }) => {
             });
         }
     }, [visible, analyticsFilters]);
-    // Extract unique screen names from logged events
     const uniqueScreens = useMemo(() => {
         const screens = new Set();
         for (const e of analyticsEvents) {
@@ -58,7 +55,6 @@ const AnalyticsFilterModal = ({ visible, onClose, }) => {
         }
         return Array.from(screens);
     }, [analyticsEvents]);
-    // Toggle Category in Draft
     const toggleCategory = (cat) => {
         setDraft(prev => {
             const next = new Set(prev.categories);
@@ -77,7 +73,6 @@ const AnalyticsFilterModal = ({ visible, onClose, }) => {
             return { ...prev, categories: next };
         });
     };
-    // Toggle Screen in Draft
     const toggleScreen = (scr) => {
         setDraft(prev => {
             const next = new Set(prev.screens);
@@ -90,7 +85,6 @@ const AnalyticsFilterModal = ({ visible, onClose, }) => {
             return { ...prev, screens: next };
         });
     };
-    // Toggle Source in Draft
     const toggleSource = (src) => {
         setDraft(prev => {
             const next = new Set(prev.sources);
@@ -109,7 +103,6 @@ const AnalyticsFilterModal = ({ visible, onClose, }) => {
             return { ...prev, sources: next };
         });
     };
-    // Toggle User Type in Draft
     const toggleUserType = (ut) => {
         setDraft(prev => {
             const next = new Set(prev.userTypes);
@@ -128,26 +121,21 @@ const AnalyticsFilterModal = ({ visible, onClose, }) => {
             return { ...prev, userTypes: next };
         });
     };
-    // Toggle Boolean Flag in Draft
     const toggleFlag = (key) => {
         setDraft(prev => ({
             ...prev,
             [key]: !prev[key],
         }));
     };
-    // Set Time Window in Draft
     const setTimeWindow = (tw) => {
         setDraft(prev => ({ ...prev, timeWindow: tw }));
     };
-    // Set Payload Complexity in Draft
     const setPayloadComplexity = (pc) => {
         setDraft(prev => ({ ...prev, payloadComplexity: pc }));
     };
-    // Set Sort in Draft
     const setSort = (sortBy) => {
         setDraft(prev => ({ ...prev, sortBy }));
     };
-    // Reset Draft to default
     const handleResetDraft = () => {
         setDraft({
             categories: new Set(['all']),
@@ -165,7 +153,6 @@ const AnalyticsFilterModal = ({ visible, onClose, }) => {
             sortBy: 'time_desc',
         });
     };
-    // Commit Draft to actual filters
     const handleApply = () => {
         setAnalyticsFilters({
             ...draft,
@@ -176,7 +163,6 @@ const AnalyticsFilterModal = ({ visible, onClose, }) => {
         });
         onClose();
     };
-    // Discard changes & close
     const handleDiscard = () => {
         setDraft({
             ...analyticsFilters,
@@ -187,7 +173,6 @@ const AnalyticsFilterModal = ({ visible, onClose, }) => {
         });
         onClose();
     };
-    // Calculate matching count for Draft in real-time
     const draftMatchCount = useMemo(() => {
         let events = analyticsEvents;
         if (analyticsSearch) {
@@ -290,7 +275,7 @@ const AnalyticsFilterModal = ({ visible, onClose, }) => {
         <Pressable style={StyleSheet.absoluteFill} onPress={handleDiscard}/>
 
         <View style={styles.modalCard}>
-          {/* ─── Header ──────────────────────────────────────────────────────── */}
+          
           <View style={styles.header}>
             <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
               <View style={styles.headerIconBox}>
@@ -315,9 +300,9 @@ const AnalyticsFilterModal = ({ visible, onClose, }) => {
             </View>
           </View>
 
-          {/* ─── Scrollable Filter Options ──────────────────────────────────── */}
+          
           <ScrollView style={{ maxHeight: 460 }} contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={true}>
-            {/* 1. Time Horizon Window */}
+            
             <View style={styles.section}>
               <View style={styles.sectionHeaderRow}>
                 <ClockIcon color={AppColors.grayTextWeak} size={12}/>
@@ -346,7 +331,7 @@ const AnalyticsFilterModal = ({ visible, onClose, }) => {
               </View>
             </View>
 
-            {/* 2. Category Dimensions */}
+            
             <View style={styles.section}>
               <View style={styles.sectionHeaderRow}>
                 <TargetGoalIcon color={AppColors.grayTextWeak} size={12}/>
@@ -436,7 +421,7 @@ const AnalyticsFilterModal = ({ visible, onClose, }) => {
               </View>
             </View>
 
-            {/* 3. Goals, Monetization & Attributes */}
+            
             <View style={styles.section}>
               <View style={styles.sectionHeaderRow}>
                 <MoneyIcon color={AppColors.grayTextWeak} size={12}/>
@@ -537,7 +522,7 @@ const AnalyticsFilterModal = ({ visible, onClose, }) => {
               </View>
             </View>
 
-            {/* 4. User Identification */}
+            
             <View style={styles.section}>
               <View style={styles.sectionHeaderRow}>
                 <UserIcon color={AppColors.grayTextWeak} size={12}/>
@@ -593,7 +578,7 @@ const AnalyticsFilterModal = ({ visible, onClose, }) => {
               </View>
             </View>
 
-            {/* 5. Source Logger SDK */}
+            
             <View style={styles.section}>
               <View style={styles.sectionHeaderRow}>
                 <BoltIcon color={AppColors.grayTextWeak} size={12}/>
@@ -643,7 +628,7 @@ const AnalyticsFilterModal = ({ visible, onClose, }) => {
               </View>
             </View>
 
-            {/* 6. Payload Complexity */}
+            
             <View style={styles.section}>
               <View style={styles.sectionHeaderRow}>
                 <CodeBracketsIcon color={AppColors.grayTextWeak} size={12}/>
@@ -671,7 +656,7 @@ const AnalyticsFilterModal = ({ visible, onClose, }) => {
               </View>
             </View>
 
-            {/* 7. Discovered Screens (Dimensions) */}
+            
             {uniqueScreens.length > 0 && (<View style={styles.section}>
                 <View style={styles.sectionHeaderRow}>
                   <PinIcon color={AppColors.grayTextWeak} size={12}/>
@@ -700,7 +685,7 @@ const AnalyticsFilterModal = ({ visible, onClose, }) => {
                 </View>
               </View>)}
 
-            {/* 8. Sort Order */}
+            
             <View style={styles.section}>
               <View style={styles.sectionHeaderRow}>
                 <ClockIcon color={AppColors.grayTextWeak} size={12}/>
@@ -778,7 +763,7 @@ const AnalyticsFilterModal = ({ visible, onClose, }) => {
             </View>
           </ScrollView>
 
-          {/* ─── Footer Action Bar (Discard + Apply) ────────────────────────── */}
+          
           <View style={styles.footer}>
             <TouchableOpacity onPress={handleDiscard} style={styles.discardBtn} activeOpacity={0.8}>
               <Text style={styles.discardBtnText}>Discard</Text>