react-native-inapp-inspector 2.3.5 → 2.3.6

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

@@ -49,10 +49,8 @@ const helpers_1 = require("../../helpers");
 const NetworkIcons_1 = require("../NetworkIcons");
 const react_native_svg_1 = __importStar(require("react-native-svg"));
 const bundleAnalyzer_1 = require("../../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') &&
@@ -70,7 +68,6 @@ const PackageLogoRenderer = ({ name, size = 28 }) => {
         </react_native_svg_1.default>
       </react_native_1.View>);
     }
-    // 2. React Navigation (Official Violet/Cyan Compass)
     if (lowerName.includes('navigation')) {
         return (<react_native_1.View style={[
                 bundleStyles.pkgLogoWrap,
@@ -83,7 +80,6 @@ const PackageLogoRenderer = ({ name, size = 28 }) => {
         </react_native_svg_1.default>
       </react_native_1.View>);
     }
-    // 3. React Native SVG (Bezier Path Vector Art)
     if (lowerName.includes('svg')) {
         return (<react_native_1.View style={[
                 bundleStyles.pkgLogoWrap,
@@ -97,7 +93,6 @@ const PackageLogoRenderer = ({ name, size = 28 }) => {
         </react_native_svg_1.default>
       </react_native_1.View>);
     }
-    // 4. Axios (Official Indigo & Cyan Network Adapter)
     if (lowerName.includes('axios')) {
         return (<react_native_1.View style={[
                 bundleStyles.pkgLogoWrap,
@@ -109,7 +104,6 @@ const PackageLogoRenderer = ({ name, size = 28 }) => {
         </react_native_svg_1.default>
       </react_native_1.View>);
     }
-    // 5. React Native Screens (Software Mansion Deep Indigo Stack)
     if (lowerName.includes('screens') || lowerName.includes('software-mansion')) {
         return (<react_native_1.View style={[
                 bundleStyles.pkgLogoWrap,
@@ -126,7 +120,6 @@ const PackageLogoRenderer = ({ name, size = 28 }) => {
         </react_native_svg_1.default>
       </react_native_1.View>);
     }
-    // 6. Linear Gradient (Vibrant Color Spectrum)
     if (lowerName.includes('gradient')) {
         return (<react_native_1.View style={[
                 bundleStyles.pkgLogoWrap,
@@ -144,7 +137,6 @@ const PackageLogoRenderer = ({ name, size = 28 }) => {
         </react_native_svg_1.default>
       </react_native_1.View>);
     }
-    // 7. i18next & Translations (Emerald Globe)
     if (lowerName.includes('i18n')) {
         return (<react_native_1.View style={[
                 bundleStyles.pkgLogoWrap,
@@ -157,7 +149,6 @@ const PackageLogoRenderer = ({ name, size = 28 }) => {
         </react_native_svg_1.default>
       </react_native_1.View>);
     }
-    // 8. Official Red NPM Logo Box (Universal Default NPM Branding)
     return (<react_native_1.View style={[
             bundleStyles.pkgLogoWrap,
             { width: size, height: size, backgroundColor: AppColors_1.AppColors.npmRed },
@@ -244,10 +235,8 @@ const BundleCategoryIcon = ({ type, size = 16, color = AppColors_1.AppColors.pur
       {renderGlyph()}
     </react_native_svg_1.default>);
 };
-// ─── Media File Thumbnail Component ──────────────────────────────────────────
 const MediaPreviewThumbnail = ({ file }) => {
     const [loadError, setLoadError] = (0, react_1.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 (<react_native_1.View style={[
                 bundleStyles.mediaThumbWrap,
@@ -266,7 +255,7 @@ const MediaPreviewThumbnail = ({ file }) => {
             </react_native_svg_1.LinearGradient>
           </react_native_svg_1.Defs>
           <react_native_svg_1.Circle cx="50" cy="50" r="44" fill="url(#svgGradThumb)"/>
-          {/* Vector bezier path pen graphic */}
+          
           <react_native_svg_1.Path d="M25 70 C35 30, 65 30, 75 70" stroke={AppColors_1.AppColors.white} strokeWidth="8" strokeLinecap="round"/>
           <react_native_svg_1.Circle cx="25" cy="70" r="7" fill={AppColors_1.AppColors.white}/>
           <react_native_svg_1.Circle cx="75" cy="70" r="7" fill={AppColors_1.AppColors.white}/>
@@ -274,7 +263,6 @@ const MediaPreviewThumbnail = ({ file }) => {
         </react_native_svg_1.default>
       </react_native_1.View>);
     }
-    // 2. Raster Image (PNG, JPG, WebP) with valid preview URI
     if (file.category === 'image' && file.previewUri && !loadError) {
         return (<react_native_1.View style={bundleStyles.mediaThumbWrap}>
         <react_native_1.Image source={{ uri: file.previewUri }} style={bundleStyles.mediaThumbImg} resizeMode="cover" onError={() => setLoadError(true)}/>
@@ -342,7 +330,6 @@ function buildBundleFileTree(files) {
                 children,
             });
         }
-        // Sort folders first, then files alphabetically
         return nodes.sort((a, b) => {
             if (a.isFolder && !b.isFolder)
                 return -1;
@@ -355,7 +342,6 @@ function buildBundleFileTree(files) {
 }
 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 || (0, bundleAnalyzer_1.getHostScriptURL)();
@@ -378,7 +364,6 @@ 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}
@@ -402,7 +387,6 @@ export default {
 };
 `;
     }
-    // 3. Trigger native Share / Download sheet
     try {
         await react_native_1.Share.share(react_native_1.Platform.OS === 'ios'
             ? {
@@ -417,7 +401,6 @@ export default {
         });
     }
     catch { }
-    // 4. Also copy directly to clipboard for quick paste in VS Code or external editor
     try {
         (0, helpers_1.copyToClipboard)(content, file.name);
     }
@@ -468,7 +451,6 @@ const BundleTreeNodeView = ({ node, level, search, totalBundleKb, expandedFolder
           </react_native_1.View>)}
       </react_native_1.View>);
     }
-    // File item inside tree
     const file = node.fileItem;
     if (!file)
         return null;
@@ -567,7 +549,6 @@ const BundleTab = react_1.default.memo(() => {
     const [prodPlatform, setProdPlatform] = (0, react_1.useState)('ios');
     const [search, setSearch] = (0, react_1.useState)('');
     const [activeCategory, setActiveCategory] = (0, react_1.useState)('ALL');
-    // ─── Live Host App Bundle Analysis (fetched from Metro / runtime) ─────────
     const [analysis, setAnalysis] = (0, react_1.useState)(() => (0, bundleAnalyzer_1.getCachedBundleAnalysis)() || (0, bundleAnalyzer_1.getInitialBundleAnalysis)());
     const [isAnalyzing, setIsAnalyzing] = (0, react_1.useState)(false);
     const refreshAnalysis = (0, react_1.useCallback)(() => {
@@ -599,12 +580,9 @@ const BundleTab = react_1.default.memo(() => {
             mounted = false;
         };
     }, []);
-    // Check if Hermes is running
     const isHermes = Boolean(global.HermesInternal);
-    // Dynamic files & packages derived from the analyzed host bundle
     const bundleFiles = (0, react_1.useMemo)(() => (analysis ? analysis.files : []), [analysis]);
     const bundlePackages = (0, react_1.useMemo)(() => (analysis ? analysis.packages : []), [analysis]);
-    // Comprehensive bundle summary (full Metro bundle calculation e.g. 6.0 MB)
     const summary = (0, react_1.useMemo)(() => {
         const totalKb = analysis?.totalDevKb ||
             (analysis?.totalDevBytes
@@ -713,7 +691,6 @@ const BundleTab = react_1.default.memo(() => {
             },
         };
     }, [analysis, bundleFiles, bundlePackages]);
-    // Filtered files
     const filteredFiles = (0, react_1.useMemo)(() => {
         return bundleFiles.filter(file => {
             const matchSearch = !search ||
@@ -734,7 +711,6 @@ const BundleTab = react_1.default.memo(() => {
     const filteredTotalKb = (0, react_1.useMemo)(() => {
         return filteredFiles.reduce((acc, f) => acc + f.sizeKb, 0);
     }, [filteredFiles]);
-    // Tree View State & Node Generation (Top folders expanded by default)
     const [filesViewMode, setFilesViewMode] = (0, react_1.useState)('tree');
     const [expandedFolders, setExpandedFolders] = (0, react_1.useState)({});
     const fileTreeNodes = (0, react_1.useMemo)(() => {
@@ -778,7 +754,6 @@ const BundleTab = react_1.default.memo(() => {
     const collapseAllFolders = (0, react_1.useCallback)(() => {
         setExpandedFolders({});
     }, []);
-    // Filtered Packages
     const filteredPackages = (0, react_1.useMemo)(() => {
         if (!search)
             return bundlePackages;
@@ -790,7 +765,6 @@ const BundleTab = react_1.default.memo(() => {
     const packagesTotalKb = (0, react_1.useMemo)(() => {
         return filteredPackages.reduce((acc, p) => acc + p.sizeKb, 0);
     }, [filteredPackages]);
-    // Media files (Images + Fonts)
     const mediaFiles = (0, react_1.useMemo)(() => {
         return bundleFiles.filter(f => f.category === 'image' || f.category === 'font');
     }, [bundleFiles]);
@@ -830,7 +804,7 @@ const BundleTab = react_1.default.memo(() => {
         },
     ];
     return (<react_native_1.View style={{ flex: 1, backgroundColor: AppColors_1.AppColors.grayBackground }}>
-      {/* ─── Top Sub-Tabs Navigation Bar (Scrollable Pill Bar + Dynamic Refresh) ─── */}
+      
       <react_native_1.View style={bundleStyles.topTabWrap}>
         <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ flex: 1 }} contentContainerStyle={bundleStyles.subTabsScroll}>
           {subTabs.map(tab => {
@@ -854,11 +828,11 @@ const BundleTab = react_1.default.memo(() => {
         </TouchableScale_1.default>
       </react_native_1.View>
 
-      {/* ══════════════════════════════════════════════════════════════════════ */}
-      {/* ── 1. TAB: OVERVIEW & TREEMAP ───────────────────────────────────────── */}
-      {/* ══════════════════════════════════════════════════════════════════════ */}
+      
+      
+      
       {activeSubTab === 'overview' && (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={bundleStyles.contentContainer} keyboardShouldPersistTaps="handled">
-          {/* Hero Overview Card */}
+          
           <react_native_1.View style={bundleStyles.heroCard}>
             <react_native_1.View style={bundleStyles.heroTopRow}>
               <react_native_1.View style={bundleStyles.heroIconWrap}>
@@ -927,7 +901,7 @@ const BundleTab = react_1.default.memo(() => {
               <CopyButton_1.default value={() => ({ ...summary, bundle: analysis })} label={t('bundle.bundleOverviewJson')}/>
             </react_native_1.View>
 
-            {/* 4-Stat Metric Grid */}
+            
             <react_native_1.View style={bundleStyles.metricsGrid}>
               <react_native_1.View style={bundleStyles.metricBox}>
                 <react_native_1.Text style={bundleStyles.metricLabel}>
@@ -1008,7 +982,7 @@ const BundleTab = react_1.default.memo(() => {
             </react_native_1.View>
           </react_native_1.View>
 
-          {/* Live analysis unavailable warning */}
+          
           {analysis && !analysis.isLive && (<react_native_1.View style={bundleStyles.liveWarningCard}>
               <react_native_1.View style={{
                     flexDirection: 'row',
@@ -1050,7 +1024,7 @@ const BundleTab = react_1.default.memo(() => {
               </react_native_1.View>
             </react_native_1.View>)}
 
-          {/* Visual Type Distribution Ratio Bar */}
+          
           <react_native_1.View style={bundleStyles.sectionCard}>
             <react_native_1.View style={bundleStyles.sectionHeaderRow}>
               <react_native_1.View style={{ flex: 1, paddingRight: 4 }}>
@@ -1080,7 +1054,7 @@ const BundleTab = react_1.default.memo(() => {
             })} label={t('bundle.treemapJson')}/>
             </react_native_1.View>
 
-            {/* Stacked Colored Bar for Full 6.0 MB Bundle */}
+            
             <react_native_1.View style={bundleStyles.treemapBar}>
               <react_native_1.View style={{
                 flex: summary.nodeModulesPct,
@@ -1104,7 +1078,7 @@ const BundleTab = react_1.default.memo(() => {
             }}/>
             </react_native_1.View>
 
-            {/* Legend Grid */}
+            
             <react_native_1.View style={bundleStyles.legendGrid}>
               <react_native_1.View style={bundleStyles.legendItem}>
                 <BundleCategoryIcon type="javascript" size={13} color={AppColors_1.AppColors.indigo500}/>
@@ -1157,7 +1131,7 @@ const BundleTab = react_1.default.memo(() => {
             </react_native_1.View>
           </react_native_1.View>
 
-          {/* Detailed Category Footprint Cards */}
+          
           <react_native_1.View style={bundleStyles.sectionCard}>
             <react_native_1.View style={bundleStyles.sectionHeaderRow}>
               <react_native_1.Text style={bundleStyles.sectionTitle}>
@@ -1221,7 +1195,7 @@ const BundleTab = react_1.default.memo(() => {
                   </react_native_1.View>
                 </react_native_1.View>
 
-                {/* Modern Rounded Progress Bar */}
+                
                 <react_native_1.View style={bundleStyles.catProgressTrack}>
                   <react_native_1.View style={[
                     bundleStyles.catProgressBar,
@@ -1230,7 +1204,7 @@ const BundleTab = react_1.default.memo(() => {
                 </react_native_1.View>
               </react_native_1.Pressable>))}
 
-            {/* Executive Total Summation Card */}
+            
             <react_native_1.View style={bundleStyles.totalSummaryCard}>
               <react_native_1.View style={bundleStyles.totalSummaryRow}>
                 <react_native_1.View style={bundleStyles.totalSummaryLabelWrap}>
@@ -1256,7 +1230,7 @@ const BundleTab = react_1.default.memo(() => {
                 </react_native_1.View>
               </react_native_1.View>
 
-              {/* 4-Pill Chip Breakdown */}
+              
               <react_native_1.View style={bundleStyles.totalFormulaGrid}>
                 <react_native_1.View style={bundleStyles.totalChip}>
                   <react_native_1.View style={[
@@ -1301,7 +1275,7 @@ const BundleTab = react_1.default.memo(() => {
             </react_native_1.View>
           </react_native_1.View>
 
-          {/* Detailed Subsystem Architecture Split-up */}
+          
           <react_native_1.View style={bundleStyles.sectionCard}>
             <react_native_1.View style={bundleStyles.sectionHeaderRow}>
               <react_native_1.View style={{ flex: 1, paddingRight: 4 }}>
@@ -1327,7 +1301,7 @@ const BundleTab = react_1.default.memo(() => {
             })} label="Subsystem Split JSON"/>
             </react_native_1.View>
 
-            {/* 1. NPM Dependencies Layer */}
+            
             <react_native_1.View style={bundleStyles.subsystemCard}>
               <react_native_1.View style={bundleStyles.subsystemHeader}>
                 <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
@@ -1382,7 +1356,7 @@ const BundleTab = react_1.default.memo(() => {
               </react_native_1.View>
             </react_native_1.View>
 
-            {/* 2. App Source Code Layer */}
+            
             <react_native_1.View style={bundleStyles.subsystemCard}>
               <react_native_1.View style={bundleStyles.subsystemHeader}>
                 <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
@@ -1436,7 +1410,7 @@ const BundleTab = react_1.default.memo(() => {
               </react_native_1.View>
             </react_native_1.View>
 
-            {/* 3. Hermes Optimization & Bytecode Engine */}
+            
             <react_native_1.View style={bundleStyles.subsystemCard}>
               <react_native_1.View style={bundleStyles.subsystemHeader}>
                 <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
@@ -1485,7 +1459,7 @@ const BundleTab = react_1.default.memo(() => {
               </react_native_1.View>
             </react_native_1.View>
 
-            {/* 4. Assets & Media Layer */}
+            
             <react_native_1.View style={bundleStyles.subsystemCard}>
               <react_native_1.View style={bundleStyles.subsystemHeader}>
                 <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
@@ -1542,11 +1516,11 @@ const BundleTab = react_1.default.memo(() => {
           </react_native_1.View>
         </react_native_1.ScrollView>)}
 
-      {/* ══════════════════════════════════════════════════════════════════════ */}
-      {/* ── 2. TAB: PRODUCTION BUILDS & PLATFORMS ───────────────────────────── */}
-      {/* ══════════════════════════════════════════════════════════════════════ */}
+      
+      
+      
       {activeSubTab === 'production' && (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={bundleStyles.contentContainer} keyboardShouldPersistTaps="handled">
-          {/* Platform Segmented Switcher (Horizontally Scrollable) */}
+          
           <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={bundleStyles.prodPlatformScroll}>
             {[
                 {
@@ -1591,7 +1565,7 @@ const BundleTab = react_1.default.memo(() => {
             })}
           </react_native_1.ScrollView>
 
-          {/* Production Platform Metrics Hero */}
+          
           {analysis && (<react_native_1.View style={bundleStyles.heroCard}>
               <react_native_1.View style={bundleStyles.heroTopRow}>
                 <react_native_1.View style={bundleStyles.heroIconWrap}>
@@ -1616,7 +1590,7 @@ const BundleTab = react_1.default.memo(() => {
                 <CopyButton_1.default value={() => analysis.production[prodPlatform]} label="Production Binary JSON"/>
               </react_native_1.View>
 
-              {/* 4-Stat Balanced 2x2 Metric Grid */}
+              
               <react_native_1.View style={bundleStyles.metricsGrid}>
                 <react_native_1.View style={bundleStyles.metricBox}>
                   <react_native_1.Text style={bundleStyles.metricLabel}>INSTALL SIZE</react_native_1.Text>
@@ -1682,7 +1656,7 @@ const BundleTab = react_1.default.memo(() => {
               </react_native_1.View>
             </react_native_1.View>)}
 
-          {/* Component Breakdown Cards */}
+          
           {analysis && (<react_native_1.View style={bundleStyles.sectionCard}>
               <react_native_1.View style={bundleStyles.sectionHeaderRow}>
                 <react_native_1.View style={{ flex: 1, paddingRight: 4 }}>
@@ -1697,7 +1671,7 @@ const BundleTab = react_1.default.memo(() => {
                 <CopyButton_1.default value={() => analysis.production[prodPlatform].components} label="Components JSON"/>
               </react_native_1.View>
 
-              {/* Visual Binary Component Ratio Bar */}
+              
               <react_native_1.View style={bundleStyles.prodTreemapBar}>
                 {analysis.production[prodPlatform].components.map((comp, cIdx) => (<react_native_1.View key={cIdx} style={{
                         flex: Math.max(comp.pct, 2),
@@ -1706,7 +1680,7 @@ const BundleTab = react_1.default.memo(() => {
                     }}/>))}
               </react_native_1.View>
 
-              {/* Production Binary Legend */}
+              
               <react_native_1.View style={[bundleStyles.legendGrid, { marginBottom: 12 }]}>
                 {analysis.production[prodPlatform].components.map((comp, cIdx) => (<react_native_1.View key={cIdx} style={bundleStyles.legendItem}>
                       <react_native_1.View style={{
@@ -1804,7 +1778,7 @@ const BundleTab = react_1.default.memo(() => {
                     </react_native_1.View>) : null}
                 </react_native_1.View>))}
 
-              {/* Total Platform Binary Summary with JS Source Bundle Comparison */}
+              
               <react_native_1.View style={bundleStyles.totalSummaryCard}>
                 <react_native_1.View style={bundleStyles.totalSummaryRow}>
                   <react_native_1.View style={bundleStyles.totalSummaryLabelWrap}>
@@ -1830,7 +1804,7 @@ const BundleTab = react_1.default.memo(() => {
                   </react_native_1.View>
                 </react_native_1.View>
 
-                {/* Platform Metric Grid Chips */}
+                
                 <react_native_1.View style={bundleStyles.totalFormulaGrid}>
                   <react_native_1.View style={bundleStyles.totalChip}>
                     <react_native_1.View style={[
@@ -1867,11 +1841,11 @@ const BundleTab = react_1.default.memo(() => {
             </react_native_1.View>)}
         </react_native_1.ScrollView>)}
 
-      {/* ══════════════════════════════════════════════════════════════════════ */}
-      {/* ── 2. TAB: FILES BREAKDOWN ─────────────────────────────────────────── */}
-      {/* ══════════════════════════════════════════════════════════════════════ */}
+      
+      
+      
       {activeSubTab === 'files' && (<react_native_1.View style={{ flex: 1 }}>
-          {/* Search & Category Filter */}
+          
           <react_native_1.View style={bundleStyles.filterContainer}>
             <react_native_1.View style={bundleStyles.searchRow}>
               <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={15}/>
@@ -1882,7 +1856,7 @@ const BundleTab = react_1.default.memo(() => {
               <CopyButton_1.default value={() => filteredFiles} label={t('bundle.filteredFilesJson')}/>
             </react_native_1.View>
 
-            {/* Category Filter Chips */}
+            
             <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={bundleStyles.categoryPillsScroll}>
               {CATEGORY_TABS.map(tab => {
                 const isActive = activeCategory === tab.key;
@@ -1919,9 +1893,9 @@ const BundleTab = react_1.default.memo(() => {
             </react_native_1.ScrollView>
           </react_native_1.View>
 
-          {/* Files List / Tree Content */}
+          
           <react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={bundleStyles.contentContainer} keyboardShouldPersistTaps="handled">
-            {/* View Mode Toggle Header Bar */}
+            
             <react_native_1.View style={bundleStyles.treeHeaderRow}>
               <react_native_1.View style={bundleStyles.viewModeToggleGroup}>
                 <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel="Tree folder view" accessibilityState={{ selected: filesViewMode === 'tree' }} onPress={() => setFilesViewMode('tree')} style={[
@@ -1972,12 +1946,10 @@ const BundleTab = react_1.default.memo(() => {
                 </react_native_1.Text>)}
             </react_native_1.View>
 
-            {/* ── MODE 1: DIRECTORY TREE VIEW ── */}
+            
             {filesViewMode === 'tree' ? (<react_native_1.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 => (0, exports.downloadBundleFile)(f, analysis?.scriptURL)}/>))}
-              </react_native_1.View>) : (
-            /* ── MODE 2: FLAT LIST VIEW ── */
-            filteredFiles.map((file, index) => {
+              </react_native_1.View>) : (filteredFiles.map((file, index) => {
                 const categoryMeta = CATEGORY_COLORS[file.category] || CATEGORY_COLORS.typescript;
                 const pctOfTotal = ((file.sizeKb / summary.totalKb) *
                     100).toFixed(1);
@@ -2082,7 +2054,7 @@ const BundleTab = react_1.default.memo(() => {
             }))}
           </react_native_1.ScrollView>
 
-          {/* Sticky Total Bundle Size Footer */}
+          
           <react_native_1.View style={bundleStyles.stickyFooterBar}>
             <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
               <NetworkIcons_1.LayersIcon color={AppColors_1.AppColors.purple} size={14}/>
@@ -2102,9 +2074,9 @@ const BundleTab = react_1.default.memo(() => {
           </react_native_1.View>
         </react_native_1.View>)}
 
-      {/* ══════════════════════════════════════════════════════════════════════ */}
-      {/* ── 3. TAB: PACKAGES & NODE_MODULES ─────────────────────────────────── */}
-      {/* ══════════════════════════════════════════════════════════════════════ */}
+      
+      
+      
       {activeSubTab === 'packages' && (<react_native_1.View style={{ flex: 1 }}>
           <react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={bundleStyles.contentContainer} keyboardShouldPersistTaps="handled">
             <react_native_1.View style={bundleStyles.filterContainer}>
@@ -2138,7 +2110,7 @@ const BundleTab = react_1.default.memo(() => {
                             backgroundColor: AppColors_1.AppColors.errorCardBg,
                         },
                     ]}>
-                  {/* Header Row: #s.no + Logo + Package Name + Version Pill + Update/Deprecated Badges + Size & Copy */}
+                  
                   <react_native_1.View style={bundleStyles.fileCardTop}>
                     <react_native_1.View style={bundleStyles.sNoBadge}>
                       <react_native_1.Text style={bundleStyles.sNoText}>#{index + 1}</react_native_1.Text>
@@ -2221,7 +2193,7 @@ const BundleTab = react_1.default.memo(() => {
                     </react_native_1.View>
                   </react_native_1.View>
 
-                  {/* Subtitle Row: Category Chip + Description */}
+                  
                   <react_native_1.View style={{
                         flexDirection: 'row',
                         alignItems: 'center',
@@ -2245,7 +2217,7 @@ const BundleTab = react_1.default.memo(() => {
                     </react_native_1.Text>
                   </react_native_1.View>
 
-                  {/* Deprecation Warning Banner if deprecated */}
+                  
                   {pkg.isDeprecated && pkg.deprecationReason && (<react_native_1.View style={bundleStyles.deprecationBox}>
                       <react_native_1.View style={{
                             flexDirection: 'row',
@@ -2271,7 +2243,7 @@ const BundleTab = react_1.default.memo(() => {
                     ]}/>
                   </react_native_1.View>
 
-                  {/* Footer Row: Type Tag + Last Active + NPM Link Button */}
+                  
                   <react_native_1.View style={{
                         flexDirection: 'row',
                         justifyContent: 'space-between',
@@ -2325,7 +2297,7 @@ const BundleTab = react_1.default.memo(() => {
             })}
           </react_native_1.ScrollView>
 
-          {/* Sticky Total Package Size Footer */}
+          
           <react_native_1.View style={bundleStyles.stickyFooterBar}>
             <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
               <NetworkIcons_1.PackageIcon color={AppColors_1.AppColors.purple} size={14}/>
@@ -2344,9 +2316,9 @@ const BundleTab = react_1.default.memo(() => {
           </react_native_1.View>
         </react_native_1.View>)}
 
-      {/* ══════════════════════════════════════════════════════════════════════ */}
-      {/* ── 4. TAB: MEDIA & ASSET AUDITOR ───────────────────────────────────── */}
-      {/* ══════════════════════════════════════════════════════════════════════ */}
+      
+      
+      
       {activeSubTab === 'media' && (<react_native_1.View style={{ flex: 1 }}>
           <react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={bundleStyles.contentContainer} keyboardShouldPersistTaps="handled">
             <react_native_1.View style={bundleStyles.tipsCard}>
@@ -2443,7 +2415,7 @@ const BundleTab = react_1.default.memo(() => {
               </react_native_1.View>))}
           </react_native_1.ScrollView>
 
-          {/* Sticky Total Media Size Footer */}
+          
           <react_native_1.View style={bundleStyles.stickyFooterBar}>
             <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
               <NetworkIcons_1.StorageIcon color={AppColors_1.AppColors.purple} size={14}/>
@@ -2460,9 +2432,9 @@ const BundleTab = react_1.default.memo(() => {
           </react_native_1.View>
         </react_native_1.View>)}
 
-      {/* ══════════════════════════════════════════════════════════════════════ */}
-      {/* ── 5. TAB: OPTIMIZER CHECKLIST ─────────────────────────────────────── */}
-      {/* ══════════════════════════════════════════════════════════════════════ */}
+      
+      
+      
       {activeSubTab === 'optimizer' && (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={bundleStyles.contentContainer} keyboardShouldPersistTaps="handled">
           <react_native_1.View style={bundleStyles.tipsCard}>
             <react_native_1.View style={{

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

@@ -163,7 +163,7 @@ const ConsoleTab = react_1.default.memo(() => {
           </react_native_1.View>
         </react_native_1.View>
 
-        {/* Quick Tag Search Suggestions Bar */}
+        
         {(isSearchFocused || logSearch.length > 0) && (<react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ marginBottom: 6, maxHeight: 30 }} contentContainerStyle={{
                 paddingHorizontal: 16,
                 flexDirection: 'row',
@@ -213,7 +213,7 @@ const ConsoleTab = react_1.default.memo(() => {
             alignItems: 'center',
             gap: 8,
         }}>
-          {/* All Filter */}
+          
           {(() => {
             const active = logFilters.has('all');
             return (<TouchableScale_1.default onPress={() => {
@@ -256,7 +256,7 @@ const ConsoleTab = react_1.default.memo(() => {
               </TouchableScale_1.default>);
         })()}
 
-          {/* User Log / Standard Log Filter */}
+          
           {(() => {
             const active = logFilters.has('user-log');
             return (<TouchableScale_1.default onPress={() => {
@@ -308,7 +308,7 @@ const ConsoleTab = react_1.default.memo(() => {
               </TouchableScale_1.default>);
         })()}
 
-          {/* Info Filter */}
+          
           {(() => {
             const active = logFilters.has('info');
             return (<TouchableScale_1.default onPress={() => {
@@ -360,7 +360,7 @@ const ConsoleTab = react_1.default.memo(() => {
               </TouchableScale_1.default>);
         })()}
 
-          {/* Warning Filter */}
+          
           {(() => {
             const active = logFilters.has('warn');
             return (<TouchableScale_1.default onPress={() => {
@@ -412,7 +412,7 @@ const ConsoleTab = react_1.default.memo(() => {
               </TouchableScale_1.default>);
         })()}
 
-          {/* Error Filter */}
+          
           {(() => {
             const active = logFilters.has('error');
             return (<TouchableScale_1.default onPress={() => {
@@ -464,7 +464,7 @@ const ConsoleTab = react_1.default.memo(() => {
               </TouchableScale_1.default>);
         })()}
 
-          {/* Analytics Filter */}
+          
           {(() => {
             const active = logFilters.has('analytics');
             return (<TouchableScale_1.default onPress={() => {