react-native-inapp-inspector 2.3.5 → 2.3.7

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

@@ -10,10 +10,8 @@ import { copyToClipboard } from '../../helpers';
 import { PackageIcon, SearchIcon, ClearIcon, CircleAlertIcon, LayersIcon, TimelineIcon, LiveStateIcon, StorageIcon, MetadataIcon, FolderIcon, FolderOpenIcon, TrashIcon, LightbulbIcon, SparkleIcon, ClockIcon, RefreshCcwIcon, ExternalLinkIcon, DownloadIcon, } from '../NetworkIcons';
 import Svg, { Path, Rect, Circle, Ellipse, G, Defs, LinearGradient, Stop, } from 'react-native-svg';
 import { analyzeHostAppBundle, getCachedBundleAnalysis, getInitialBundleAnalysis, getHostScriptURL, } from '../../customHooks/bundleAnalyzer';
-// ─── High-Fidelity Vector Package & NPM Logos ────────────────────────────────
 const PackageLogoRenderer = ({ name, size = 28 }) => {
     const lowerName = name.toLowerCase();
-    // 1. React & React Native (Official Cyan Atom Orbital)
     if (lowerName === 'react' ||
         (lowerName.includes('react-native') &&
             !lowerName.includes('svg') &&
@@ -31,7 +29,6 @@ const PackageLogoRenderer = ({ name, size = 28 }) => {
         </Svg>
       </View>);
     }
-    // 2. React Navigation (Official Violet/Cyan Compass)
     if (lowerName.includes('navigation')) {
         return (<View style={[
                 bundleStyles.pkgLogoWrap,
@@ -44,7 +41,6 @@ const PackageLogoRenderer = ({ name, size = 28 }) => {
         </Svg>
       </View>);
     }
-    // 3. React Native SVG (Bezier Path Vector Art)
     if (lowerName.includes('svg')) {
         return (<View style={[
                 bundleStyles.pkgLogoWrap,
@@ -58,7 +54,6 @@ const PackageLogoRenderer = ({ name, size = 28 }) => {
         </Svg>
       </View>);
     }
-    // 4. Axios (Official Indigo & Cyan Network Adapter)
     if (lowerName.includes('axios')) {
         return (<View style={[
                 bundleStyles.pkgLogoWrap,
@@ -70,7 +65,6 @@ const PackageLogoRenderer = ({ name, size = 28 }) => {
         </Svg>
       </View>);
     }
-    // 5. React Native Screens (Software Mansion Deep Indigo Stack)
     if (lowerName.includes('screens') || lowerName.includes('software-mansion')) {
         return (<View style={[
                 bundleStyles.pkgLogoWrap,
@@ -87,7 +81,6 @@ const PackageLogoRenderer = ({ name, size = 28 }) => {
         </Svg>
       </View>);
     }
-    // 6. Linear Gradient (Vibrant Color Spectrum)
     if (lowerName.includes('gradient')) {
         return (<View style={[
                 bundleStyles.pkgLogoWrap,
@@ -105,7 +98,6 @@ const PackageLogoRenderer = ({ name, size = 28 }) => {
         </Svg>
       </View>);
     }
-    // 7. i18next & Translations (Emerald Globe)
     if (lowerName.includes('i18n')) {
         return (<View style={[
                 bundleStyles.pkgLogoWrap,
@@ -118,7 +110,6 @@ const PackageLogoRenderer = ({ name, size = 28 }) => {
         </Svg>
       </View>);
     }
-    // 8. Official Red NPM Logo Box (Universal Default NPM Branding)
     return (<View style={[
             bundleStyles.pkgLogoWrap,
             { width: size, height: size, backgroundColor: AppColors.npmRed },
@@ -205,10 +196,8 @@ const BundleCategoryIcon = ({ type, size = 16, color = AppColors.purple }) => {
       {renderGlyph()}
     </Svg>);
 };
-// ─── Media File Thumbnail Component ──────────────────────────────────────────
 const MediaPreviewThumbnail = ({ file }) => {
     const [loadError, setLoadError] = useState(false);
-    // 1. If it's an SVG file, render an inline vector thumbnail preview
     if (file.ext === 'SVG' || file.name.toLowerCase().endsWith('.svg')) {
         return (<View style={[
                 bundleStyles.mediaThumbWrap,
@@ -227,7 +216,7 @@ const MediaPreviewThumbnail = ({ file }) => {
             </LinearGradient>
           </Defs>
           <Circle cx="50" cy="50" r="44" fill="url(#svgGradThumb)"/>
-          {/* Vector bezier path pen graphic */}
+          
           <Path d="M25 70 C35 30, 65 30, 75 70" stroke={AppColors.white} strokeWidth="8" strokeLinecap="round"/>
           <Circle cx="25" cy="70" r="7" fill={AppColors.white}/>
           <Circle cx="75" cy="70" r="7" fill={AppColors.white}/>
@@ -235,7 +224,6 @@ const MediaPreviewThumbnail = ({ file }) => {
         </Svg>
       </View>);
     }
-    // 2. Raster Image (PNG, JPG, WebP) with valid preview URI
     if (file.category === 'image' && file.previewUri && !loadError) {
         return (<View style={bundleStyles.mediaThumbWrap}>
         <Image source={{ uri: file.previewUri }} style={bundleStyles.mediaThumbImg} resizeMode="cover" onError={() => setLoadError(true)}/>
@@ -303,7 +291,6 @@ function buildBundleFileTree(files) {
                 children,
             });
         }
-        // Sort folders first, then files alphabetically
         return nodes.sort((a, b) => {
             if (a.isFolder && !b.isFolder)
                 return -1;
@@ -316,7 +303,6 @@ function buildBundleFileTree(files) {
 }
 export const downloadBundleFile = async (file, scriptURL) => {
     let content = '';
-    // 1. Attempt to fetch real source code from Metro dev server dynamically
     try {
         let devServerOrigin = '';
         const activeUrl = scriptURL || getHostScriptURL();
@@ -339,7 +325,6 @@ export const downloadBundleFile = async (file, scriptURL) => {
         }
     }
     catch { }
-    // 2. If dev server direct fetch is unavailable, provide structured module descriptor with full path
     if (!content) {
         content = `// ─────────────────────────────────────────────────────────────
 // File: ${file.name}
@@ -363,7 +348,6 @@ export default {
 };
 `;
     }
-    // 3. Trigger native Share / Download sheet
     try {
         await Share.share(Platform.OS === 'ios'
             ? {
@@ -378,7 +362,6 @@ export default {
         });
     }
     catch { }
-    // 4. Also copy directly to clipboard for quick paste in VS Code or external editor
     try {
         copyToClipboard(content, file.name);
     }
@@ -428,7 +411,6 @@ const BundleTreeNodeView = ({ node, level, search, totalBundleKb, expandedFolder
           </View>)}
       </View>);
     }
-    // File item inside tree
     const file = node.fileItem;
     if (!file)
         return null;
@@ -527,7 +509,6 @@ const BundleTab = React.memo(() => {
     const [prodPlatform, setProdPlatform] = useState('ios');
     const [search, setSearch] = useState('');
     const [activeCategory, setActiveCategory] = useState('ALL');
-    // ─── Live Host App Bundle Analysis (fetched from Metro / runtime) ─────────
     const [analysis, setAnalysis] = useState(() => getCachedBundleAnalysis() || getInitialBundleAnalysis());
     const [isAnalyzing, setIsAnalyzing] = useState(false);
     const refreshAnalysis = useCallback(() => {
@@ -559,12 +540,9 @@ const BundleTab = React.memo(() => {
             mounted = false;
         };
     }, []);
-    // Check if Hermes is running
     const isHermes = Boolean(global.HermesInternal);
-    // Dynamic files & packages derived from the analyzed host bundle
     const bundleFiles = useMemo(() => (analysis ? analysis.files : []), [analysis]);
     const bundlePackages = useMemo(() => (analysis ? analysis.packages : []), [analysis]);
-    // Comprehensive bundle summary (full Metro bundle calculation e.g. 6.0 MB)
     const summary = useMemo(() => {
         const totalKb = analysis?.totalDevKb ||
             (analysis?.totalDevBytes
@@ -673,7 +651,6 @@ const BundleTab = React.memo(() => {
             },
         };
     }, [analysis, bundleFiles, bundlePackages]);
-    // Filtered files
     const filteredFiles = useMemo(() => {
         return bundleFiles.filter(file => {
             const matchSearch = !search ||
@@ -694,7 +671,6 @@ const BundleTab = React.memo(() => {
     const filteredTotalKb = useMemo(() => {
         return filteredFiles.reduce((acc, f) => acc + f.sizeKb, 0);
     }, [filteredFiles]);
-    // Tree View State & Node Generation (Top folders expanded by default)
     const [filesViewMode, setFilesViewMode] = useState('tree');
     const [expandedFolders, setExpandedFolders] = useState({});
     const fileTreeNodes = useMemo(() => {
@@ -738,7 +714,6 @@ const BundleTab = React.memo(() => {
     const collapseAllFolders = useCallback(() => {
         setExpandedFolders({});
     }, []);
-    // Filtered Packages
     const filteredPackages = useMemo(() => {
         if (!search)
             return bundlePackages;
@@ -750,7 +725,6 @@ const BundleTab = React.memo(() => {
     const packagesTotalKb = useMemo(() => {
         return filteredPackages.reduce((acc, p) => acc + p.sizeKb, 0);
     }, [filteredPackages]);
-    // Media files (Images + Fonts)
     const mediaFiles = useMemo(() => {
         return bundleFiles.filter(f => f.category === 'image' || f.category === 'font');
     }, [bundleFiles]);
@@ -790,7 +764,7 @@ const BundleTab = React.memo(() => {
         },
     ];
     return (<View style={{ flex: 1, backgroundColor: AppColors.grayBackground }}>
-      {/* ─── Top Sub-Tabs Navigation Bar (Scrollable Pill Bar + Dynamic Refresh) ─── */}
+      
       <View style={bundleStyles.topTabWrap}>
         <ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ flex: 1 }} contentContainerStyle={bundleStyles.subTabsScroll}>
           {subTabs.map(tab => {
@@ -814,11 +788,11 @@ const BundleTab = React.memo(() => {
         </TouchableScale>
       </View>
 
-      {/* ══════════════════════════════════════════════════════════════════════ */}
-      {/* ── 1. TAB: OVERVIEW & TREEMAP ───────────────────────────────────────── */}
-      {/* ══════════════════════════════════════════════════════════════════════ */}
+      
+      
+      
       {activeSubTab === 'overview' && (<ScrollView style={{ flex: 1 }} contentContainerStyle={bundleStyles.contentContainer} keyboardShouldPersistTaps="handled">
-          {/* Hero Overview Card */}
+          
           <View style={bundleStyles.heroCard}>
             <View style={bundleStyles.heroTopRow}>
               <View style={bundleStyles.heroIconWrap}>
@@ -887,7 +861,7 @@ const BundleTab = React.memo(() => {
               <CopyButton value={() => ({ ...summary, bundle: analysis })} label={t('bundle.bundleOverviewJson')}/>
             </View>
 
-            {/* 4-Stat Metric Grid */}
+            
             <View style={bundleStyles.metricsGrid}>
               <View style={bundleStyles.metricBox}>
                 <Text style={bundleStyles.metricLabel}>
@@ -968,7 +942,7 @@ const BundleTab = React.memo(() => {
             </View>
           </View>
 
-          {/* Live analysis unavailable warning */}
+          
           {analysis && !analysis.isLive && (<View style={bundleStyles.liveWarningCard}>
               <View style={{
                     flexDirection: 'row',
@@ -1010,7 +984,7 @@ const BundleTab = React.memo(() => {
               </View>
             </View>)}
 
-          {/* Visual Type Distribution Ratio Bar */}
+          
           <View style={bundleStyles.sectionCard}>
             <View style={bundleStyles.sectionHeaderRow}>
               <View style={{ flex: 1, paddingRight: 4 }}>
@@ -1040,7 +1014,7 @@ const BundleTab = React.memo(() => {
             })} label={t('bundle.treemapJson')}/>
             </View>
 
-            {/* Stacked Colored Bar for Full 6.0 MB Bundle */}
+            
             <View style={bundleStyles.treemapBar}>
               <View style={{
                 flex: summary.nodeModulesPct,
@@ -1064,7 +1038,7 @@ const BundleTab = React.memo(() => {
             }}/>
             </View>
 
-            {/* Legend Grid */}
+            
             <View style={bundleStyles.legendGrid}>
               <View style={bundleStyles.legendItem}>
                 <BundleCategoryIcon type="javascript" size={13} color={AppColors.indigo500}/>
@@ -1117,7 +1091,7 @@ const BundleTab = React.memo(() => {
             </View>
           </View>
 
-          {/* Detailed Category Footprint Cards */}
+          
           <View style={bundleStyles.sectionCard}>
             <View style={bundleStyles.sectionHeaderRow}>
               <Text style={bundleStyles.sectionTitle}>
@@ -1181,7 +1155,7 @@ const BundleTab = React.memo(() => {
                   </View>
                 </View>
 
-                {/* Modern Rounded Progress Bar */}
+                
                 <View style={bundleStyles.catProgressTrack}>
                   <View style={[
                     bundleStyles.catProgressBar,
@@ -1190,7 +1164,7 @@ const BundleTab = React.memo(() => {
                 </View>
               </Pressable>))}
 
-            {/* Executive Total Summation Card */}
+            
             <View style={bundleStyles.totalSummaryCard}>
               <View style={bundleStyles.totalSummaryRow}>
                 <View style={bundleStyles.totalSummaryLabelWrap}>
@@ -1216,7 +1190,7 @@ const BundleTab = React.memo(() => {
                 </View>
               </View>
 
-              {/* 4-Pill Chip Breakdown */}
+              
               <View style={bundleStyles.totalFormulaGrid}>
                 <View style={bundleStyles.totalChip}>
                   <View style={[
@@ -1261,7 +1235,7 @@ const BundleTab = React.memo(() => {
             </View>
           </View>
 
-          {/* Detailed Subsystem Architecture Split-up */}
+          
           <View style={bundleStyles.sectionCard}>
             <View style={bundleStyles.sectionHeaderRow}>
               <View style={{ flex: 1, paddingRight: 4 }}>
@@ -1287,7 +1261,7 @@ const BundleTab = React.memo(() => {
             })} label="Subsystem Split JSON"/>
             </View>
 
-            {/* 1. NPM Dependencies Layer */}
+            
             <View style={bundleStyles.subsystemCard}>
               <View style={bundleStyles.subsystemHeader}>
                 <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
@@ -1342,7 +1316,7 @@ const BundleTab = React.memo(() => {
               </View>
             </View>
 
-            {/* 2. App Source Code Layer */}
+            
             <View style={bundleStyles.subsystemCard}>
               <View style={bundleStyles.subsystemHeader}>
                 <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
@@ -1396,7 +1370,7 @@ const BundleTab = React.memo(() => {
               </View>
             </View>
 
-            {/* 3. Hermes Optimization & Bytecode Engine */}
+            
             <View style={bundleStyles.subsystemCard}>
               <View style={bundleStyles.subsystemHeader}>
                 <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
@@ -1445,7 +1419,7 @@ const BundleTab = React.memo(() => {
               </View>
             </View>
 
-            {/* 4. Assets & Media Layer */}
+            
             <View style={bundleStyles.subsystemCard}>
               <View style={bundleStyles.subsystemHeader}>
                 <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
@@ -1502,11 +1476,11 @@ const BundleTab = React.memo(() => {
           </View>
         </ScrollView>)}
 
-      {/* ══════════════════════════════════════════════════════════════════════ */}
-      {/* ── 2. TAB: PRODUCTION BUILDS & PLATFORMS ───────────────────────────── */}
-      {/* ══════════════════════════════════════════════════════════════════════ */}
+      
+      
+      
       {activeSubTab === 'production' && (<ScrollView style={{ flex: 1 }} contentContainerStyle={bundleStyles.contentContainer} keyboardShouldPersistTaps="handled">
-          {/* Platform Segmented Switcher (Horizontally Scrollable) */}
+          
           <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={bundleStyles.prodPlatformScroll}>
             {[
                 {
@@ -1551,7 +1525,7 @@ const BundleTab = React.memo(() => {
             })}
           </ScrollView>
 
-          {/* Production Platform Metrics Hero */}
+          
           {analysis && (<View style={bundleStyles.heroCard}>
               <View style={bundleStyles.heroTopRow}>
                 <View style={bundleStyles.heroIconWrap}>
@@ -1576,7 +1550,7 @@ const BundleTab = React.memo(() => {
                 <CopyButton value={() => analysis.production[prodPlatform]} label="Production Binary JSON"/>
               </View>
 
-              {/* 4-Stat Balanced 2x2 Metric Grid */}
+              
               <View style={bundleStyles.metricsGrid}>
                 <View style={bundleStyles.metricBox}>
                   <Text style={bundleStyles.metricLabel}>INSTALL SIZE</Text>
@@ -1642,7 +1616,7 @@ const BundleTab = React.memo(() => {
               </View>
             </View>)}
 
-          {/* Component Breakdown Cards */}
+          
           {analysis && (<View style={bundleStyles.sectionCard}>
               <View style={bundleStyles.sectionHeaderRow}>
                 <View style={{ flex: 1, paddingRight: 4 }}>
@@ -1657,7 +1631,7 @@ const BundleTab = React.memo(() => {
                 <CopyButton value={() => analysis.production[prodPlatform].components} label="Components JSON"/>
               </View>
 
-              {/* Visual Binary Component Ratio Bar */}
+              
               <View style={bundleStyles.prodTreemapBar}>
                 {analysis.production[prodPlatform].components.map((comp, cIdx) => (<View key={cIdx} style={{
                         flex: Math.max(comp.pct, 2),
@@ -1666,7 +1640,7 @@ const BundleTab = React.memo(() => {
                     }}/>))}
               </View>
 
-              {/* Production Binary Legend */}
+              
               <View style={[bundleStyles.legendGrid, { marginBottom: 12 }]}>
                 {analysis.production[prodPlatform].components.map((comp, cIdx) => (<View key={cIdx} style={bundleStyles.legendItem}>
                       <View style={{
@@ -1764,7 +1738,7 @@ const BundleTab = React.memo(() => {
                     </View>) : null}
                 </View>))}
 
-              {/* Total Platform Binary Summary with JS Source Bundle Comparison */}
+              
               <View style={bundleStyles.totalSummaryCard}>
                 <View style={bundleStyles.totalSummaryRow}>
                   <View style={bundleStyles.totalSummaryLabelWrap}>
@@ -1790,7 +1764,7 @@ const BundleTab = React.memo(() => {
                   </View>
                 </View>
 
-                {/* Platform Metric Grid Chips */}
+                
                 <View style={bundleStyles.totalFormulaGrid}>
                   <View style={bundleStyles.totalChip}>
                     <View style={[
@@ -1827,11 +1801,11 @@ const BundleTab = React.memo(() => {
             </View>)}
         </ScrollView>)}
 
-      {/* ══════════════════════════════════════════════════════════════════════ */}
-      {/* ── 2. TAB: FILES BREAKDOWN ─────────────────────────────────────────── */}
-      {/* ══════════════════════════════════════════════════════════════════════ */}
+      
+      
+      
       {activeSubTab === 'files' && (<View style={{ flex: 1 }}>
-          {/* Search & Category Filter */}
+          
           <View style={bundleStyles.filterContainer}>
             <View style={bundleStyles.searchRow}>
               <SearchIcon color={AppColors.grayTextWeak} size={15}/>
@@ -1842,7 +1816,7 @@ const BundleTab = React.memo(() => {
               <CopyButton value={() => filteredFiles} label={t('bundle.filteredFilesJson')}/>
             </View>
 
-            {/* Category Filter Chips */}
+            
             <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={bundleStyles.categoryPillsScroll}>
               {CATEGORY_TABS.map(tab => {
                 const isActive = activeCategory === tab.key;
@@ -1879,9 +1853,9 @@ const BundleTab = React.memo(() => {
             </ScrollView>
           </View>
 
-          {/* Files List / Tree Content */}
+          
           <ScrollView style={{ flex: 1 }} contentContainerStyle={bundleStyles.contentContainer} keyboardShouldPersistTaps="handled">
-            {/* View Mode Toggle Header Bar */}
+            
             <View style={bundleStyles.treeHeaderRow}>
               <View style={bundleStyles.viewModeToggleGroup}>
                 <TouchableScale accessible={true} accessibilityRole="button" accessibilityLabel="Tree folder view" accessibilityState={{ selected: filesViewMode === 'tree' }} onPress={() => setFilesViewMode('tree')} style={[
@@ -1932,12 +1906,10 @@ const BundleTab = React.memo(() => {
                 </Text>)}
             </View>
 
-            {/* ── MODE 1: DIRECTORY TREE VIEW ── */}
+            
             {filesViewMode === 'tree' ? (<View style={bundleStyles.treeRootCard}>
                 {fileTreeNodes.map((node, nIdx) => (<BundleTreeNodeView key={node.id} node={node} level={0} search={search} totalBundleKb={summary.totalKb} expandedFolders={expandedFolders} toggleFolder={toggleFolder} isLastChild={nIdx === fileTreeNodes.length - 1} onDownload={f => downloadBundleFile(f, analysis?.scriptURL)}/>))}
-              </View>) : (
-            /* ── MODE 2: FLAT LIST VIEW ── */
-            filteredFiles.map((file, index) => {
+              </View>) : (filteredFiles.map((file, index) => {
                 const categoryMeta = CATEGORY_COLORS[file.category] || CATEGORY_COLORS.typescript;
                 const pctOfTotal = ((file.sizeKb / summary.totalKb) *
                     100).toFixed(1);
@@ -2042,7 +2014,7 @@ const BundleTab = React.memo(() => {
             }))}
           </ScrollView>
 
-          {/* Sticky Total Bundle Size Footer */}
+          
           <View style={bundleStyles.stickyFooterBar}>
             <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
               <LayersIcon color={AppColors.purple} size={14}/>
@@ -2062,9 +2034,9 @@ const BundleTab = React.memo(() => {
           </View>
         </View>)}
 
-      {/* ══════════════════════════════════════════════════════════════════════ */}
-      {/* ── 3. TAB: PACKAGES & NODE_MODULES ─────────────────────────────────── */}
-      {/* ══════════════════════════════════════════════════════════════════════ */}
+      
+      
+      
       {activeSubTab === 'packages' && (<View style={{ flex: 1 }}>
           <ScrollView style={{ flex: 1 }} contentContainerStyle={bundleStyles.contentContainer} keyboardShouldPersistTaps="handled">
             <View style={bundleStyles.filterContainer}>
@@ -2098,7 +2070,7 @@ const BundleTab = React.memo(() => {
                             backgroundColor: AppColors.errorCardBg,
                         },
                     ]}>
-                  {/* Header Row: #s.no + Logo + Package Name + Version Pill + Update/Deprecated Badges + Size & Copy */}
+                  
                   <View style={bundleStyles.fileCardTop}>
                     <View style={bundleStyles.sNoBadge}>
                       <Text style={bundleStyles.sNoText}>#{index + 1}</Text>
@@ -2181,7 +2153,7 @@ const BundleTab = React.memo(() => {
                     </View>
                   </View>
 
-                  {/* Subtitle Row: Category Chip + Description */}
+                  
                   <View style={{
                         flexDirection: 'row',
                         alignItems: 'center',
@@ -2205,7 +2177,7 @@ const BundleTab = React.memo(() => {
                     </Text>
                   </View>
 
-                  {/* Deprecation Warning Banner if deprecated */}
+                  
                   {pkg.isDeprecated && pkg.deprecationReason && (<View style={bundleStyles.deprecationBox}>
                       <View style={{
                             flexDirection: 'row',
@@ -2231,7 +2203,7 @@ const BundleTab = React.memo(() => {
                     ]}/>
                   </View>
 
-                  {/* Footer Row: Type Tag + Last Active + NPM Link Button */}
+                  
                   <View style={{
                         flexDirection: 'row',
                         justifyContent: 'space-between',
@@ -2285,7 +2257,7 @@ const BundleTab = React.memo(() => {
             })}
           </ScrollView>
 
-          {/* Sticky Total Package Size Footer */}
+          
           <View style={bundleStyles.stickyFooterBar}>
             <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
               <PackageIcon color={AppColors.purple} size={14}/>
@@ -2304,9 +2276,9 @@ const BundleTab = React.memo(() => {
           </View>
         </View>)}
 
-      {/* ══════════════════════════════════════════════════════════════════════ */}
-      {/* ── 4. TAB: MEDIA & ASSET AUDITOR ───────────────────────────────────── */}
-      {/* ══════════════════════════════════════════════════════════════════════ */}
+      
+      
+      
       {activeSubTab === 'media' && (<View style={{ flex: 1 }}>
           <ScrollView style={{ flex: 1 }} contentContainerStyle={bundleStyles.contentContainer} keyboardShouldPersistTaps="handled">
             <View style={bundleStyles.tipsCard}>
@@ -2403,7 +2375,7 @@ const BundleTab = React.memo(() => {
               </View>))}
           </ScrollView>
 
-          {/* Sticky Total Media Size Footer */}
+          
           <View style={bundleStyles.stickyFooterBar}>
             <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
               <StorageIcon color={AppColors.purple} size={14}/>
@@ -2420,9 +2392,9 @@ const BundleTab = React.memo(() => {
           </View>
         </View>)}
 
-      {/* ══════════════════════════════════════════════════════════════════════ */}
-      {/* ── 5. TAB: OPTIMIZER CHECKLIST ─────────────────────────────────────── */}
-      {/* ══════════════════════════════════════════════════════════════════════ */}
+      
+      
+      
       {activeSubTab === 'optimizer' && (<ScrollView style={{ flex: 1 }} contentContainerStyle={bundleStyles.contentContainer} keyboardShouldPersistTaps="handled">
           <View style={bundleStyles.tipsCard}>
             <View style={{

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

@@ -125,7 +125,7 @@ const ConsoleTab = React.memo(() => {
           </View>
         </View>
 
-        {/* Quick Tag Search Suggestions Bar */}
+        
         {(isSearchFocused || logSearch.length > 0) && (<ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ marginBottom: 6, maxHeight: 30 }} contentContainerStyle={{
                 paddingHorizontal: 16,
                 flexDirection: 'row',
@@ -175,7 +175,7 @@ const ConsoleTab = React.memo(() => {
             alignItems: 'center',
             gap: 8,
         }}>
-          {/* All Filter */}
+          
           {(() => {
             const active = logFilters.has('all');
             return (<TouchableScale onPress={() => {
@@ -218,7 +218,7 @@ const ConsoleTab = React.memo(() => {
               </TouchableScale>);
         })()}
 
-          {/* User Log / Standard Log Filter */}
+          
           {(() => {
             const active = logFilters.has('user-log');
             return (<TouchableScale onPress={() => {
@@ -270,7 +270,7 @@ const ConsoleTab = React.memo(() => {
               </TouchableScale>);
         })()}
 
-          {/* Info Filter */}
+          
           {(() => {
             const active = logFilters.has('info');
             return (<TouchableScale onPress={() => {
@@ -322,7 +322,7 @@ const ConsoleTab = React.memo(() => {
               </TouchableScale>);
         })()}
 
-          {/* Warning Filter */}
+          
           {(() => {
             const active = logFilters.has('warn');
             return (<TouchableScale onPress={() => {
@@ -374,7 +374,7 @@ const ConsoleTab = React.memo(() => {
               </TouchableScale>);
         })()}
 
-          {/* Error Filter */}
+          
           {(() => {
             const active = logFilters.has('error');
             return (<TouchableScale onPress={() => {
@@ -426,7 +426,7 @@ const ConsoleTab = React.memo(() => {
               </TouchableScale>);
         })()}
 
-          {/* Analytics Filter */}
+          
           {(() => {
             const active = logFilters.has('analytics');
             return (<TouchableScale onPress={() => {