react-native-inapp-inspector 2.0.0 → 2.0.2

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

@@ -113,7 +113,11 @@ const PackageLogoRenderer = ({ name, size = 28 }) => {
     if (lowerName.includes('screens') || lowerName.includes('software-mansion')) {
         return (<react_native_1.View style={[
                 bundleStyles.pkgLogoWrap,
-                { width: size, height: size, backgroundColor: AppColors_1.AppColors.reanimatedNavy },
+                {
+                    width: size,
+                    height: size,
+                    backgroundColor: AppColors_1.AppColors.reanimatedNavy,
+                },
             ]}>
         <react_native_svg_1.default width={size - 8} height={size - 8} viewBox="0 0 100 100" fill="none">
           <react_native_svg_1.Path d="M50 15 L88 35 L50 55 L12 35 Z" fill={AppColors_1.AppColors.sky400}/>
@@ -165,7 +169,12 @@ const PackageLogoRenderer = ({ name, size = 28 }) => {
     </react_native_1.View>);
 };
 const BundleCategoryIcon = ({ type, size = 16, color = AppColors_1.AppColors.purple }) => {
-    const stroke = { stroke: color, strokeWidth: 1.7, strokeLinecap: 'round', strokeLinejoin: 'round' };
+    const stroke = {
+        stroke: color,
+        strokeWidth: 1.7,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+    };
     const renderGlyph = () => {
         switch (type) {
             case 'folder':
@@ -376,7 +385,9 @@ const downloadBundleFile = async (file, scriptURL) => {
 // Path: ${file.path}
 // Category: ${file.category.toUpperCase()}
 // Size: ${file.sizeKb} KB
-// Status: ${file.status === 'optimal' ? 'Active in Dependency Graph' : 'Not consumed / Static'}
+// Status: ${file.status === 'optimal'
+            ? 'Active in Dependency Graph'
+            : 'Not consumed / Static'}
 // Meta: ${file.meta}
 // ─────────────────────────────────────────────────────────────
 
@@ -419,10 +430,9 @@ const BundleTreeNodeView = ({ node, level, search, totalBundleKb, expandedFolder
     const indentLeft = level * 16 + 10;
     if (node.isFolder) {
         return (<react_native_1.View style={bundleStyles.treeFolderBlock}>
-        <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel={`Folder ${node.name}, ${node.fileCount} ${node.fileCount === 1 ? 'file' : 'files'}, ${node.sizeKb >= 1024 ? `${(node.sizeKb / 1024).toFixed(2)} MB` : `${node.sizeKb} KB`}`} accessibilityState={{ expanded: isExpanded }} accessibilityHint="Double tap to expand or collapse folder" onPress={() => toggleFolder(node.fullPath)} style={[
-                bundleStyles.treeFolderRow,
-                { paddingLeft: indentLeft },
-            ]}>
+        <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel={`Folder ${node.name}, ${node.fileCount} ${node.fileCount === 1 ? 'file' : 'files'}, ${node.sizeKb >= 1024
+                ? `${(node.sizeKb / 1024).toFixed(2)} MB`
+                : `${node.sizeKb} KB`}`} accessibilityState={{ expanded: isExpanded }} accessibilityHint="Double tap to expand or collapse folder" onPress={() => toggleFolder(node.fullPath)} style={[bundleStyles.treeFolderRow, { paddingLeft: indentLeft }]}>
           <react_native_1.View style={bundleStyles.treeRowLeft}>
             <react_native_1.Text style={bundleStyles.treeChevron}>
               {isCollapsed ? '▸' : '▾'}
@@ -431,7 +441,8 @@ const BundleTreeNodeView = ({ node, level, search, totalBundleKb, expandedFolder
             <HighlightText_1.default text={node.name + '/'} search={search} style={bundleStyles.treeFolderName} highlightStyle={bundleStyles.searchHighlight}/>
             <react_native_1.View style={bundleStyles.treeCountBadge}>
               <react_native_1.Text style={bundleStyles.treeCountBadgeText}>
-                {node.fileCount} {node.fileCount === 1 ? (0, i18n_1.t)('bundle.file') : (0, i18n_1.t)('bundle.files')}
+                {node.fileCount}{' '}
+                {node.fileCount === 1 ? (0, i18n_1.t)('bundle.file') : (0, i18n_1.t)('bundle.files')}
               </react_native_1.Text>
             </react_native_1.View>
           </react_native_1.View>
@@ -439,7 +450,9 @@ const BundleTreeNodeView = ({ node, level, search, totalBundleKb, expandedFolder
           <react_native_1.View style={bundleStyles.treeRowRight}>
             <react_native_1.Text style={bundleStyles.treeFolderSize}>
               {node.sizeKb >= 1024
-                ? (0, i18n_1.t)('bundle.fileSizeMb', { size: (node.sizeKb / 1024).toFixed(2) })
+                ? (0, i18n_1.t)('bundle.fileSizeMb', {
+                    size: (node.sizeKb / 1024).toFixed(2),
+                })
                 : (0, i18n_1.t)('bundle.fileSizeKb', { size: node.sizeKb })}
             </react_native_1.Text>
             <CopyButton_1.default value={() => ({
@@ -478,13 +491,18 @@ const BundleTreeNodeView = ({ node, level, search, totalBundleKb, expandedFolder
         <HighlightText_1.default text={file.name} search={search} style={bundleStyles.treeFileName} highlightStyle={bundleStyles.searchHighlight}/>
 
         {isUnused && (<react_native_1.View style={bundleStyles.treeUnusedPill}>
-            <react_native_1.Text style={bundleStyles.treeUnusedPillText}>{(0, i18n_1.t)('bundle.notConsumed')}</react_native_1.Text>
+            <react_native_1.Text style={bundleStyles.treeUnusedPillText}>
+              {(0, i18n_1.t)('bundle.notConsumed')}
+            </react_native_1.Text>
           </react_native_1.View>)}
       </react_native_1.View>
 
       <react_native_1.View style={bundleStyles.treeRowRight}>
         <react_native_1.View style={bundleStyles.treeFileSizeGroup}>
-          <react_native_1.Text style={[bundleStyles.treeFileSizeText, isUnused && { color: AppColors_1.AppColors.red600 }]}>
+          <react_native_1.Text style={[
+            bundleStyles.treeFileSizeText,
+            isUnused && { color: AppColors_1.AppColors.red600 },
+        ]}>
             {file.sizeKb >= 1024
             ? (0, i18n_1.t)('bundle.fileSizeMb', { size: (file.sizeKb / 1024).toFixed(2) })
             : (0, i18n_1.t)('bundle.fileSizeKb', { size: file.sizeKb })}
@@ -507,17 +525,41 @@ const CATEGORY_TABS = [
     { key: 'UNUSED', labelKey: 'bundle.catUnused', iconType: 'ban' },
     { key: 'CONSUMED', labelKey: 'bundle.catConsumed', iconType: 'bolt' },
     { key: 'image', labelKey: 'bundle.catImages', iconType: 'image' },
-    { key: 'typescript', labelKey: 'bundle.catTypescript', iconType: 'typescript' },
-    { key: 'javascript', labelKey: 'bundle.catJavascript', iconType: 'javascript' },
+    {
+        key: 'typescript',
+        labelKey: 'bundle.catTypescript',
+        iconType: 'typescript',
+    },
+    {
+        key: 'javascript',
+        labelKey: 'bundle.catJavascript',
+        iconType: 'javascript',
+    },
     { key: 'font', labelKey: 'bundle.catFonts', iconType: 'font' },
     { key: 'json', labelKey: 'bundle.catJson', iconType: 'json' },
 ];
 const CATEGORY_COLORS = {
-    image: { label: 'Images & Media', color: AppColors_1.AppColors.pink500, bg: AppColors_1.AppColors.pink100 },
-    typescript: { label: 'TypeScript', color: AppColors_1.AppColors.sky500, bg: AppColors_1.AppColors.sky100 },
-    javascript: { label: 'JavaScript', color: AppColors_1.AppColors.indigo500, bg: AppColors_1.AppColors.indigo50 },
+    image: {
+        label: 'Images & Media',
+        color: AppColors_1.AppColors.pink500,
+        bg: AppColors_1.AppColors.pink100,
+    },
+    typescript: {
+        label: 'TypeScript',
+        color: AppColors_1.AppColors.sky500,
+        bg: AppColors_1.AppColors.sky100,
+    },
+    javascript: {
+        label: 'JavaScript',
+        color: AppColors_1.AppColors.indigo500,
+        bg: AppColors_1.AppColors.indigo50,
+    },
     font: { label: 'Fonts', color: AppColors_1.AppColors.purple500, bg: AppColors_1.AppColors.purple100 },
-    json: { label: 'JSON / Data', color: AppColors_1.AppColors.emerald500, bg: AppColors_1.AppColors.emerald100 },
+    json: {
+        label: 'JSON / Data',
+        color: AppColors_1.AppColors.emerald500,
+        bg: AppColors_1.AppColors.emerald100,
+    },
 };
 const BundleTab = react_1.default.memo(() => {
     const { t } = (0, i18n_1.useTranslation)();
@@ -564,8 +606,13 @@ const BundleTab = react_1.default.memo(() => {
     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 ? Math.round(analysis.totalDevBytes / 1024) : 6144);
-        const totalMb = analysis?.totalDevMb ? analysis.totalDevMb.toFixed(2) : (totalKb / 1024).toFixed(2);
+        const totalKb = analysis?.totalDevKb ||
+            (analysis?.totalDevBytes
+                ? Math.round(analysis.totalDevBytes / 1024)
+                : 6144);
+        const totalMb = analysis?.totalDevMb
+            ? analysis.totalDevMb.toFixed(2)
+            : (totalKb / 1024).toFixed(2);
         const nodeModulesKb = analysis?.splitUp?.nodeModules?.kb || Math.round(totalKb * 0.52);
         const nodeModulesPct = analysis?.splitUp?.nodeModules?.pct || 52.0;
         const metroKb = analysis?.splitUp?.metroDevOverhead?.kb || Math.round(totalKb * 0.21);
@@ -616,7 +663,9 @@ const BundleTab = react_1.default.memo(() => {
                 iconType: 'image',
                 title: 'Images & Static Media',
                 targetTab: 'media',
-                count: bundleFiles.filter(f => f.category === 'image' || f.category === 'font' || f.category === 'json').length || 3,
+                count: bundleFiles.filter(f => f.category === 'image' ||
+                    f.category === 'font' ||
+                    f.category === 'json').length || 3,
                 sizeKb: assetsMediaKb,
                 sizeMb: (assetsMediaKb / 1024).toFixed(2),
                 pct: assetsMediaPct,
@@ -800,7 +849,7 @@ const BundleTab = react_1.default.memo(() => {
               </TouchableScale_1.default>);
         })}
         </react_native_1.ScrollView>
-        <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel={isAnalyzing ? "Analyzing Metro bundle" : "Reload bundle analysis"} accessibilityHint="Re-probes Metro dev server and refreshes bundle statistics" onPress={refreshAnalysis} style={bundleStyles.reloadButton} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
+        <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel={isAnalyzing ? 'Analyzing Metro bundle' : 'Reload bundle analysis'} accessibilityHint="Re-probes Metro dev server and refreshes bundle statistics" onPress={refreshAnalysis} style={bundleStyles.reloadButton} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
           {isAnalyzing ? (<react_native_1.ActivityIndicator size="small" color={AppColors_1.AppColors.brandPurple}/>) : (<NetworkIcons_1.RefreshCcwIcon color={AppColors_1.AppColors.brandPurple} size={14}/>)}
         </TouchableScale_1.default>
       </react_native_1.View>
@@ -809,7 +858,6 @@ const BundleTab = react_1.default.memo(() => {
       {/* ── 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}>
@@ -817,7 +865,9 @@ const BundleTab = react_1.default.memo(() => {
                 <NetworkIcons_1.PackageIcon color={AppColors_1.AppColors.brandPurple} size={24}/>
               </react_native_1.View>
               <react_native_1.View style={{ flex: 1 }}>
-                <react_native_1.Text style={bundleStyles.heroTitle}>{t('bundle.heroTitle')}</react_native_1.Text>
+                <react_native_1.Text style={bundleStyles.heroTitle}>
+                  {t('bundle.heroTitle')}
+                </react_native_1.Text>
                 {analysis?.isLive && analysis.scriptURL ? (<react_native_1.View style={{ marginTop: 4, gap: 4 }}>
                     <react_native_1.Text style={bundleStyles.heroSubtitle}>
                       {t('bundle.heroSubtitle')}
@@ -836,7 +886,11 @@ const BundleTab = react_1.default.memo(() => {
                     justifyContent: 'space-between',
                     marginBottom: 3,
                 }}>
-                        <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+                        <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 4,
+                }}>
                           <NetworkIcons_1.ExternalLinkIcon color={AppColors_1.AppColors.skyBlue} size={11}/>
                           <react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interBold,
@@ -876,7 +930,9 @@ const BundleTab = react_1.default.memo(() => {
             {/* 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}>{t('bundle.devBundleSize')}</react_native_1.Text>
+                <react_native_1.Text style={bundleStyles.metricLabel}>
+                  {t('bundle.devBundleSize')}
+                </react_native_1.Text>
                 <react_native_1.Text style={bundleStyles.metricValue}>
                   {t('bundle.mbValue', {
                 size: analysis ? analysis.totalDevMb : summary.totalMb,
@@ -893,8 +949,13 @@ const BundleTab = react_1.default.memo(() => {
               </react_native_1.View>
 
               <react_native_1.View style={bundleStyles.metricBox}>
-                <react_native_1.Text style={bundleStyles.metricLabel}>{t('bundle.imagesMedia')}</react_native_1.Text>
-                <react_native_1.Text style={[bundleStyles.metricValue, { color: AppColors_1.AppColors.pink500 }]}>
+                <react_native_1.Text style={bundleStyles.metricLabel}>
+                  {t('bundle.imagesMedia')}
+                </react_native_1.Text>
+                <react_native_1.Text style={[
+                bundleStyles.metricValue,
+                { color: AppColors_1.AppColors.pink500 },
+            ]}>
                   {t('bundle.fileSizeKb', { size: summary.images.kb })}
                 </react_native_1.Text>
                 <react_native_1.Text style={bundleStyles.metricHint}>
@@ -903,9 +964,13 @@ const BundleTab = react_1.default.memo(() => {
               </react_native_1.View>
 
               <react_native_1.View style={bundleStyles.metricBox}>
-                <react_native_1.Text style={bundleStyles.metricLabel}>{t('bundle.tsJsSource')}</react_native_1.Text>
+                <react_native_1.Text style={bundleStyles.metricLabel}>
+                  {t('bundle.tsJsSource')}
+                </react_native_1.Text>
                 <react_native_1.Text style={[bundleStyles.metricValue, { color: AppColors_1.AppColors.sky500 }]}>
-                  {t('bundle.fileSizeKb', { size: summary.ts.kb + summary.js.kb })}
+                  {t('bundle.fileSizeKb', {
+                size: summary.ts.kb + summary.js.kb,
+            })}
                 </react_native_1.Text>
                 <react_native_1.Text style={bundleStyles.metricHint}>
                   {t('bundle.pctOfTrackedAssets', {
@@ -915,11 +980,22 @@ const BundleTab = react_1.default.memo(() => {
               </react_native_1.View>
 
               <react_native_1.View style={bundleStyles.metricBox}>
-                <react_native_1.Text style={bundleStyles.metricLabel}>{t('bundle.jsEngine')}</react_native_1.Text>
-                <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 5, marginTop: 2 }}>
+                <react_native_1.Text style={bundleStyles.metricLabel}>
+                  {t('bundle.jsEngine')}
+                </react_native_1.Text>
+                <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 5,
+                marginTop: 2,
+            }}>
                   <react_native_1.View style={[
                 bundleStyles.statusIndicator,
-                { backgroundColor: isHermes ? AppColors_1.AppColors.greenColor : AppColors_1.AppColors.darkOrange },
+                {
+                    backgroundColor: isHermes
+                        ? AppColors_1.AppColors.greenColor
+                        : AppColors_1.AppColors.darkOrange,
+                },
             ]}/>
                   <react_native_1.Text style={bundleStyles.metricValue}>
                     {isHermes ? 'Hermes' : 'JSC'}
@@ -934,7 +1010,12 @@ const BundleTab = react_1.default.memo(() => {
 
           {/* Live analysis unavailable warning */}
           {analysis && !analysis.isLive && (<react_native_1.View style={bundleStyles.liveWarningCard}>
-              <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flex: 1 }}>
+              <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 6,
+                    flex: 1,
+                }}>
                 <NetworkIcons_1.CircleAlertIcon color={AppColors_1.AppColors.amber700} size={16}/>
                 <react_native_1.View style={{ flex: 1 }}>
                   <react_native_1.Text style={bundleStyles.liveWarningTitle}>
@@ -947,13 +1028,13 @@ 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>
-                <react_native_1.Text style={bundleStyles.sectionTitle}>{t('bundle.treemapTitle')}</react_native_1.Text>
+              <react_native_1.View style={{ flex: 1, paddingRight: 4 }}>
+                <react_native_1.Text style={bundleStyles.sectionTitle}>
+                  {t('bundle.treemapTitle')}
+                </react_native_1.Text>
                 <react_native_1.Text style={bundleStyles.sectionSub}>
                   {t('bundle.treemapSub', { mb: summary.totalMb })}
                 </react_native_1.Text>
@@ -961,19 +1042,44 @@ const BundleTab = react_1.default.memo(() => {
               <CopyButton_1.default value={() => ({
                 totalMb: summary.totalMb,
                 totalKb: summary.totalKb,
-                nodeModules: { kb: summary.nodeModulesKb, pct: summary.nodeModulesPct },
+                nodeModules: {
+                    kb: summary.nodeModulesKb,
+                    pct: summary.nodeModulesPct,
+                },
                 metroRuntime: { kb: summary.metroKb, pct: summary.metroPct },
-                appSource: { kb: summary.appSourceKb, pct: summary.appSourcePct },
-                assetsMedia: { kb: summary.assetsMediaKb, pct: summary.assetsMediaPct },
+                appSource: {
+                    kb: summary.appSourceKb,
+                    pct: summary.appSourcePct,
+                },
+                assetsMedia: {
+                    kb: summary.assetsMediaKb,
+                    pct: summary.assetsMediaPct,
+                },
             })} 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, backgroundColor: AppColors_1.AppColors.indigo500, height: 16 }}/>
-              <react_native_1.View style={{ flex: summary.metroPct, backgroundColor: AppColors_1.AppColors.amber500, height: 16 }}/>
-              <react_native_1.View style={{ flex: summary.appSourcePct, backgroundColor: AppColors_1.AppColors.sky500, height: 16 }}/>
-              <react_native_1.View style={{ flex: summary.assetsMediaPct, backgroundColor: AppColors_1.AppColors.pink500, height: 16 }}/>
+              <react_native_1.View style={{
+                flex: summary.nodeModulesPct,
+                backgroundColor: AppColors_1.AppColors.indigo500,
+                height: 16,
+            }}/>
+              <react_native_1.View style={{
+                flex: summary.metroPct,
+                backgroundColor: AppColors_1.AppColors.amber500,
+                height: 16,
+            }}/>
+              <react_native_1.View style={{
+                flex: summary.appSourcePct,
+                backgroundColor: AppColors_1.AppColors.sky500,
+                height: 16,
+            }}/>
+              <react_native_1.View style={{
+                flex: summary.assetsMediaPct,
+                backgroundColor: AppColors_1.AppColors.pink500,
+                height: 16,
+            }}/>
             </react_native_1.View>
 
             {/* Legend Grid */}
@@ -985,7 +1091,8 @@ const BundleTab = react_1.default.memo(() => {
                   <react_native_1.Text style={bundleStyles.legendVal}>
                     {summary.nodeModulesKb >= 1024
                 ? `${(summary.nodeModulesKb / 1024).toFixed(1)} MB`
-                : `${summary.nodeModulesKb} KB`} ({summary.nodeModulesPct}%)
+                : `${summary.nodeModulesKb} KB`}{' '}
+                    ({summary.nodeModulesPct}%)
                   </react_native_1.Text>
                 </react_native_1.Text>
               </react_native_1.View>
@@ -996,7 +1103,8 @@ const BundleTab = react_1.default.memo(() => {
                   <react_native_1.Text style={bundleStyles.legendVal}>
                     {summary.metroKb >= 1024
                 ? `${(summary.metroKb / 1024).toFixed(1)} MB`
-                : `${summary.metroKb} KB`} ({summary.metroPct}%)
+                : `${summary.metroKb} KB`}{' '}
+                    ({summary.metroPct}%)
                   </react_native_1.Text>
                 </react_native_1.Text>
               </react_native_1.View>
@@ -1007,7 +1115,8 @@ const BundleTab = react_1.default.memo(() => {
                   <react_native_1.Text style={bundleStyles.legendVal}>
                     {summary.appSourceKb >= 1024
                 ? `${(summary.appSourceKb / 1024).toFixed(1)} MB`
-                : `${summary.appSourceKb} KB`} ({summary.appSourcePct}%)
+                : `${summary.appSourceKb} KB`}{' '}
+                    ({summary.appSourcePct}%)
                   </react_native_1.Text>
                 </react_native_1.Text>
               </react_native_1.View>
@@ -1018,7 +1127,8 @@ const BundleTab = react_1.default.memo(() => {
                   <react_native_1.Text style={bundleStyles.legendVal}>
                     {summary.assetsMediaKb >= 1024
                 ? `${(summary.assetsMediaKb / 1024).toFixed(1)} MB`
-                : `${summary.assetsMediaKb} KB`} ({summary.assetsMediaPct}%)
+                : `${summary.assetsMediaKb} KB`}{' '}
+                    ({summary.assetsMediaPct}%)
                   </react_native_1.Text>
                 </react_native_1.Text>
               </react_native_1.View>
@@ -1028,10 +1138,12 @@ const BundleTab = react_1.default.memo(() => {
           {/* 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}>{t('bundle.categoryBreakdown')}</react_native_1.Text>
+              <react_native_1.Text style={bundleStyles.sectionTitle}>
+                {t('bundle.categoryBreakdown')}
+              </react_native_1.Text>
               <CopyButton_1.default value={() => summary} label={t('bundle.categoriesJson')}/>
             </react_native_1.View>
-            
+
             {summary.categories.map((cat, cIdx) => (<react_native_1.Pressable key={cIdx} accessible={true} accessibilityRole="button" accessibilityLabel={`${cat.title}, ${cat.sizeKb >= 1024 ? `${cat.sizeMb} MB` : `${cat.sizeKb} KB`}, ${cat.pct}% of bundle`} accessibilityHint={`Double tap to view ${cat.title} details`} style={({ pressed }) => [
                     bundleStyles.catRowCard,
                     pressed && { opacity: 0.85, transform: [{ scale: 0.99 }] },
@@ -1039,25 +1151,42 @@ const BundleTab = react_1.default.memo(() => {
                 <react_native_1.View style={bundleStyles.catRowTop}>
                   <react_native_1.View style={[
                     bundleStyles.catIconBox,
-                    { backgroundColor: `${cat.color}15`, borderColor: `${cat.color}30` },
+                    {
+                        backgroundColor: `${cat.color}15`,
+                        borderColor: `${cat.color}30`,
+                    },
                 ]}>
                     <BundleCategoryIcon type={cat.iconType} size={18} color={cat.color}/>
                   </react_native_1.View>
 
                   <react_native_1.View style={bundleStyles.catRowTitleWrap}>
-                    <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 6 }}>
+                    <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    gap: 6,
+                }}>
                       <react_native_1.Text style={bundleStyles.catRowTitle} numberOfLines={1}>
                         {cat.title}
                       </react_native_1.Text>
-                      <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                      <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 6,
+                }}>
                         <react_native_1.Text style={bundleStyles.catRowSize}>
-                          {cat.sizeKb >= 1024 ? `${cat.sizeMb} MB` : `${cat.sizeKb} KB`}
+                          {cat.sizeKb >= 1024
+                    ? `${cat.sizeMb} MB`
+                    : `${cat.sizeKb} KB`}
                         </react_native_1.Text>
                         <react_native_1.View style={[
                     bundleStyles.catPctPill,
                     { backgroundColor: `${cat.color}18` },
                 ]}>
-                          <react_native_1.Text style={[bundleStyles.catPctText, { color: cat.color }]}>
+                          <react_native_1.Text style={[
+                    bundleStyles.catPctText,
+                    { color: cat.color },
+                ]}>
                             {cat.pct}%
                           </react_native_1.Text>
                         </react_native_1.View>
@@ -1108,20 +1237,43 @@ const BundleTab = react_1.default.memo(() => {
               {/* 4-Pill Chip Breakdown */}
               <react_native_1.View style={bundleStyles.totalFormulaGrid}>
                 <react_native_1.View style={bundleStyles.totalChip}>
-                  <react_native_1.View style={[bundleStyles.totalDot, { backgroundColor: AppColors_1.AppColors.indigo500 }]}/>
-                  <react_native_1.Text style={bundleStyles.totalChipText}>NPM: {(summary.nodeModulesKb / 1024).toFixed(1)}M ({summary.nodeModulesPct}%)</react_native_1.Text>
+                  <react_native_1.View style={[
+                bundleStyles.totalDot,
+                { backgroundColor: AppColors_1.AppColors.indigo500 },
+            ]}/>
+                  <react_native_1.Text style={bundleStyles.totalChipText}>
+                    NPM: {(summary.nodeModulesKb / 1024).toFixed(1)}M (
+                    {summary.nodeModulesPct}%)
+                  </react_native_1.Text>
                 </react_native_1.View>
                 <react_native_1.View style={bundleStyles.totalChip}>
-                  <react_native_1.View style={[bundleStyles.totalDot, { backgroundColor: AppColors_1.AppColors.amber500 }]}/>
-                  <react_native_1.Text style={bundleStyles.totalChipText}>Metro: {(summary.metroKb / 1024).toFixed(1)}M ({summary.metroPct}%)</react_native_1.Text>
+                  <react_native_1.View style={[
+                bundleStyles.totalDot,
+                { backgroundColor: AppColors_1.AppColors.amber500 },
+            ]}/>
+                  <react_native_1.Text style={bundleStyles.totalChipText}>
+                    Metro: {(summary.metroKb / 1024).toFixed(1)}M (
+                    {summary.metroPct}%)
+                  </react_native_1.Text>
                 </react_native_1.View>
                 <react_native_1.View style={bundleStyles.totalChip}>
-                  <react_native_1.View style={[bundleStyles.totalDot, { backgroundColor: AppColors_1.AppColors.sky500 }]}/>
-                  <react_native_1.Text style={bundleStyles.totalChipText}>Source: {(summary.appSourceKb / 1024).toFixed(1)}M ({summary.appSourcePct}%)</react_native_1.Text>
+                  <react_native_1.View style={[
+                bundleStyles.totalDot,
+                { backgroundColor: AppColors_1.AppColors.sky500 },
+            ]}/>
+                  <react_native_1.Text style={bundleStyles.totalChipText}>
+                    Source: {(summary.appSourceKb / 1024).toFixed(1)}M (
+                    {summary.appSourcePct}%)
+                  </react_native_1.Text>
                 </react_native_1.View>
                 <react_native_1.View style={bundleStyles.totalChip}>
-                  <react_native_1.View style={[bundleStyles.totalDot, { backgroundColor: AppColors_1.AppColors.pink500 }]}/>
-                  <react_native_1.Text style={bundleStyles.totalChipText}>Media: {summary.assetsMediaKb}K ({summary.assetsMediaPct}%)</react_native_1.Text>
+                  <react_native_1.View style={[
+                bundleStyles.totalDot,
+                { backgroundColor: AppColors_1.AppColors.pink500 },
+            ]}/>
+                  <react_native_1.Text style={bundleStyles.totalChipText}>
+                    Media: {summary.assetsMediaKb}K ({summary.assetsMediaPct}%)
+                  </react_native_1.Text>
                 </react_native_1.View>
               </react_native_1.View>
             </react_native_1.View>
@@ -1130,10 +1282,13 @@ const BundleTab = react_1.default.memo(() => {
           {/* Detailed Subsystem Architecture Split-up */}
           <react_native_1.View style={bundleStyles.sectionCard}>
             <react_native_1.View style={bundleStyles.sectionHeaderRow}>
-              <react_native_1.View>
-                <react_native_1.Text style={bundleStyles.sectionTitle}>Bundle Subsystem Breakdown</react_native_1.Text>
+              <react_native_1.View style={{ flex: 1, paddingRight: 4 }}>
+                <react_native_1.Text style={bundleStyles.sectionTitle}>
+                  Bundle Subsystem Breakdown
+                </react_native_1.Text>
                 <react_native_1.Text style={bundleStyles.sectionSub}>
-                  Granular analysis of packages, application source, engine runtime & assets
+                  Granular analysis of packages, application source, engine
+                  runtime & assets
                 </react_native_1.Text>
               </react_native_1.View>
               <CopyButton_1.default value={() => ({
@@ -1142,8 +1297,11 @@ const BundleTab = react_1.default.memo(() => {
                 hermesEngine: isHermes ? 'Hermes (Bytecode)' : 'JSC (Source)',
                 jsDevKb: summary.totalKb,
                 jsHermesReleaseKb: Math.round(summary.totalKb * 0.38),
-                appSourceFiles: bundleFiles.filter(f => f.category === 'typescript' || f.category === 'javascript').length,
-                mediaAssets: bundleFiles.filter(f => f.category === 'image' || f.category === 'font' || f.category === 'json').length,
+                appSourceFiles: bundleFiles.filter(f => f.category === 'typescript' ||
+                    f.category === 'javascript').length,
+                mediaAssets: bundleFiles.filter(f => f.category === 'image' ||
+                    f.category === 'font' ||
+                    f.category === 'json').length,
             })} label="Subsystem Split JSON"/>
             </react_native_1.View>
 
@@ -1152,28 +1310,51 @@ const BundleTab = react_1.default.memo(() => {
               <react_native_1.View style={bundleStyles.subsystemHeader}>
                 <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
                   <BundleCategoryIcon type="deps" size={16} color={AppColors_1.AppColors.indigo500}/>
-                  <react_native_1.Text style={bundleStyles.subsystemTitle}>NPM & Third-Party Dependencies</react_native_1.Text>
+                  <react_native_1.Text style={bundleStyles.subsystemTitle}>
+                    NPM & Third-Party Dependencies
+                  </react_native_1.Text>
                 </react_native_1.View>
-                <react_native_1.View style={[bundleStyles.subsystemBadge, { backgroundColor: `${AppColors_1.AppColors.indigo500}18` }]}>
-                  <react_native_1.Text style={[bundleStyles.subsystemBadgeText, { color: AppColors_1.AppColors.indigo500 }]}>
-                    {(summary.nodeModulesKb / 1024).toFixed(1)} MB • {summary.nodeModulesPct}%
+                <react_native_1.View style={[
+                bundleStyles.subsystemBadge,
+                { backgroundColor: `${AppColors_1.AppColors.indigo500}18` },
+            ]}>
+                  <react_native_1.Text style={[
+                bundleStyles.subsystemBadgeText,
+                { color: AppColors_1.AppColors.indigo500 },
+            ]}>
+                    {(summary.nodeModulesKb / 1024).toFixed(1)} MB •{' '}
+                    {summary.nodeModulesPct}%
                   </react_native_1.Text>
                 </react_native_1.View>
               </react_native_1.View>
               <react_native_1.View style={bundleStyles.subsystemGrid}>
                 <react_native_1.View style={bundleStyles.subsystemItem}>
                   <react_native_1.Text style={bundleStyles.subsystemItemText}>
-                    Direct: <react_native_1.Text style={bundleStyles.subsystemItemVal}>{bundlePackages.filter(p => p.type === 'direct').length || 12} pkgs</react_native_1.Text>
+                    Direct:{' '}
+                    <react_native_1.Text style={bundleStyles.subsystemItemVal}>
+                      {bundlePackages.filter(p => p.type === 'direct').length ||
+                12}{' '}
+                      pkgs
+                    </react_native_1.Text>
                   </react_native_1.Text>
                 </react_native_1.View>
                 <react_native_1.View style={bundleStyles.subsystemItem}>
                   <react_native_1.Text style={bundleStyles.subsystemItemText}>
-                    Transitive: <react_native_1.Text style={bundleStyles.subsystemItemVal}>{bundlePackages.filter(p => p.type !== 'direct').length || 41} pkgs</react_native_1.Text>
+                    Transitive:{' '}
+                    <react_native_1.Text style={bundleStyles.subsystemItemVal}>
+                      {bundlePackages.filter(p => p.type !== 'direct').length ||
+                41}{' '}
+                      pkgs
+                    </react_native_1.Text>
                   </react_native_1.Text>
                 </react_native_1.View>
                 <react_native_1.View style={bundleStyles.subsystemItem}>
                   <react_native_1.Text style={bundleStyles.subsystemItemText}>
-                    Top Package: <react_native_1.Text style={bundleStyles.subsystemItemVal}>{bundlePackages[0]?.name || 'react-native'} ({bundlePackages[0]?.sizeKb || 1240} KB)</react_native_1.Text>
+                    Top Package:{' '}
+                    <react_native_1.Text style={bundleStyles.subsystemItemVal}>
+                      {bundlePackages[0]?.name || 'react-native'} (
+                      {bundlePackages[0]?.sizeKb || 1240} KB)
+                    </react_native_1.Text>
                   </react_native_1.Text>
                 </react_native_1.View>
               </react_native_1.View>
@@ -1184,28 +1365,50 @@ const BundleTab = react_1.default.memo(() => {
               <react_native_1.View style={bundleStyles.subsystemHeader}>
                 <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
                   <BundleCategoryIcon type="source" size={16} color={AppColors_1.AppColors.sky500}/>
-                  <react_native_1.Text style={bundleStyles.subsystemTitle}>Application Source Code</react_native_1.Text>
+                  <react_native_1.Text style={bundleStyles.subsystemTitle}>
+                    Application Source Code
+                  </react_native_1.Text>
                 </react_native_1.View>
-                <react_native_1.View style={[bundleStyles.subsystemBadge, { backgroundColor: `${AppColors_1.AppColors.sky500}18` }]}>
-                  <react_native_1.Text style={[bundleStyles.subsystemBadgeText, { color: AppColors_1.AppColors.sky500 }]}>
-                    {(summary.appSourceKb / 1024).toFixed(1)} MB • {summary.appSourcePct}%
+                <react_native_1.View style={[
+                bundleStyles.subsystemBadge,
+                { backgroundColor: `${AppColors_1.AppColors.sky500}18` },
+            ]}>
+                  <react_native_1.Text style={[
+                bundleStyles.subsystemBadgeText,
+                { color: AppColors_1.AppColors.sky500 },
+            ]}>
+                    {(summary.appSourceKb / 1024).toFixed(1)} MB •{' '}
+                    {summary.appSourcePct}%
                   </react_native_1.Text>
                 </react_native_1.View>
               </react_native_1.View>
               <react_native_1.View style={bundleStyles.subsystemGrid}>
                 <react_native_1.View style={bundleStyles.subsystemItem}>
                   <react_native_1.Text style={bundleStyles.subsystemItemText}>
-                    TypeScript/TSX: <react_native_1.Text style={bundleStyles.subsystemItemVal}>{bundleFiles.filter(f => f.category === 'typescript').length || 14} files</react_native_1.Text>
+                    TypeScript/TSX:{' '}
+                    <react_native_1.Text style={bundleStyles.subsystemItemVal}>
+                      {bundleFiles.filter(f => f.category === 'typescript')
+                .length || 14}{' '}
+                      files
+                    </react_native_1.Text>
                   </react_native_1.Text>
                 </react_native_1.View>
                 <react_native_1.View style={bundleStyles.subsystemItem}>
                   <react_native_1.Text style={bundleStyles.subsystemItemText}>
-                    JavaScript/JSX: <react_native_1.Text style={bundleStyles.subsystemItemVal}>{bundleFiles.filter(f => f.category === 'javascript').length || 3} files</react_native_1.Text>
+                    JavaScript/JSX:{' '}
+                    <react_native_1.Text style={bundleStyles.subsystemItemVal}>
+                      {bundleFiles.filter(f => f.category === 'javascript')
+                .length || 3}{' '}
+                      files
+                    </react_native_1.Text>
                   </react_native_1.Text>
                 </react_native_1.View>
                 <react_native_1.View style={bundleStyles.subsystemItem}>
                   <react_native_1.Text style={bundleStyles.subsystemItemText}>
-                    Tracked Modules: <react_native_1.Text style={bundleStyles.subsystemItemVal}>{bundleFiles.length || 18} files</react_native_1.Text>
+                    Tracked Modules:{' '}
+                    <react_native_1.Text style={bundleStyles.subsystemItemVal}>
+                      {bundleFiles.length || 18} files
+                    </react_native_1.Text>
                   </react_native_1.Text>
                 </react_native_1.View>
               </react_native_1.View>
@@ -1216,10 +1419,18 @@ const BundleTab = react_1.default.memo(() => {
               <react_native_1.View style={bundleStyles.subsystemHeader}>
                 <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
                   <BundleCategoryIcon type="bolt" size={16} color={AppColors_1.AppColors.emerald600}/>
-                  <react_native_1.Text style={bundleStyles.subsystemTitle}>Hermes Bytecode Engine</react_native_1.Text>
+                  <react_native_1.Text style={bundleStyles.subsystemTitle}>
+                    Hermes Bytecode Engine
+                  </react_native_1.Text>
                 </react_native_1.View>
-                <react_native_1.View style={[bundleStyles.subsystemBadge, { backgroundColor: `${AppColors_1.AppColors.emerald500}18` }]}>
-                  <react_native_1.Text style={[bundleStyles.subsystemBadgeText, { color: AppColors_1.AppColors.emerald700 }]}>
+                <react_native_1.View style={[
+                bundleStyles.subsystemBadge,
+                { backgroundColor: `${AppColors_1.AppColors.emerald500}18` },
+            ]}>
+                  <react_native_1.Text style={[
+                bundleStyles.subsystemBadgeText,
+                { color: AppColors_1.AppColors.emerald700 },
+            ]}>
                     ~62% AOT Compression
                   </react_native_1.Text>
                 </react_native_1.View>
@@ -1227,17 +1438,26 @@ const BundleTab = react_1.default.memo(() => {
               <react_native_1.View style={bundleStyles.subsystemGrid}>
                 <react_native_1.View style={bundleStyles.subsystemItem}>
                   <react_native_1.Text style={bundleStyles.subsystemItemText}>
-                    Dev JS Size: <react_native_1.Text style={bundleStyles.subsystemItemVal}>{summary.totalMb} MB</react_native_1.Text>
+                    Dev JS Size:{' '}
+                    <react_native_1.Text style={bundleStyles.subsystemItemVal}>
+                      {summary.totalMb} MB
+                    </react_native_1.Text>
                   </react_native_1.Text>
                 </react_native_1.View>
                 <react_native_1.View style={bundleStyles.subsystemItem}>
                   <react_native_1.Text style={bundleStyles.subsystemItemText}>
-                    Hermes Bytecode: <react_native_1.Text style={bundleStyles.subsystemItemVal}>{((summary.totalKb * 0.38) / 1024).toFixed(2)} MB</react_native_1.Text>
+                    Hermes Bytecode:{' '}
+                    <react_native_1.Text style={bundleStyles.subsystemItemVal}>
+                      {((summary.totalKb * 0.38) / 1024).toFixed(2)} MB
+                    </react_native_1.Text>
                   </react_native_1.Text>
                 </react_native_1.View>
                 <react_native_1.View style={bundleStyles.subsystemItem}>
                   <react_native_1.Text style={bundleStyles.subsystemItemText}>
-                    Execution: <react_native_1.Text style={bundleStyles.subsystemItemVal}>{isHermes ? 'Hermes JSI Direct' : 'JSC Standard'}</react_native_1.Text>
+                    Execution:{' '}
+                    <react_native_1.Text style={bundleStyles.subsystemItemVal}>
+                      {isHermes ? 'Hermes JSI Direct' : 'JSC Standard'}
+                    </react_native_1.Text>
                   </react_native_1.Text>
                 </react_native_1.View>
               </react_native_1.View>
@@ -1248,10 +1468,18 @@ const BundleTab = react_1.default.memo(() => {
               <react_native_1.View style={bundleStyles.subsystemHeader}>
                 <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
                   <BundleCategoryIcon type="media" size={16} color={AppColors_1.AppColors.pink500}/>
-                  <react_native_1.Text style={bundleStyles.subsystemTitle}>Images, Fonts & Static Assets</react_native_1.Text>
+                  <react_native_1.Text style={bundleStyles.subsystemTitle}>
+                    Images, Fonts & Static Assets
+                  </react_native_1.Text>
                 </react_native_1.View>
-                <react_native_1.View style={[bundleStyles.subsystemBadge, { backgroundColor: `${AppColors_1.AppColors.pink500}18` }]}>
-                  <react_native_1.Text style={[bundleStyles.subsystemBadgeText, { color: AppColors_1.AppColors.pink500 }]}>
+                <react_native_1.View style={[
+                bundleStyles.subsystemBadge,
+                { backgroundColor: `${AppColors_1.AppColors.pink500}18` },
+            ]}>
+                  <react_native_1.Text style={[
+                bundleStyles.subsystemBadgeText,
+                { color: AppColors_1.AppColors.pink500 },
+            ]}>
                     {summary.assetsMediaKb} KB • {summary.assetsMediaPct}%
                   </react_native_1.Text>
                 </react_native_1.View>
@@ -1259,17 +1487,32 @@ const BundleTab = react_1.default.memo(() => {
               <react_native_1.View style={bundleStyles.subsystemGrid}>
                 <react_native_1.View style={bundleStyles.subsystemItem}>
                   <react_native_1.Text style={bundleStyles.subsystemItemText}>
-                    Images & Icons: <react_native_1.Text style={bundleStyles.subsystemItemVal}>{bundleFiles.filter(f => f.category === 'image').length || 2} assets</react_native_1.Text>
+                    Images & Icons:{' '}
+                    <react_native_1.Text style={bundleStyles.subsystemItemVal}>
+                      {bundleFiles.filter(f => f.category === 'image').length ||
+                2}{' '}
+                      assets
+                    </react_native_1.Text>
                   </react_native_1.Text>
                 </react_native_1.View>
                 <react_native_1.View style={bundleStyles.subsystemItem}>
                   <react_native_1.Text style={bundleStyles.subsystemItemText}>
-                    JSON Data: <react_native_1.Text style={bundleStyles.subsystemItemVal}>{bundleFiles.filter(f => f.category === 'json').length || 1} files</react_native_1.Text>
+                    JSON Data:{' '}
+                    <react_native_1.Text style={bundleStyles.subsystemItemVal}>
+                      {bundleFiles.filter(f => f.category === 'json').length ||
+                1}{' '}
+                      files
+                    </react_native_1.Text>
                   </react_native_1.Text>
                 </react_native_1.View>
                 <react_native_1.View style={bundleStyles.subsystemItem}>
                   <react_native_1.Text style={bundleStyles.subsystemItemText}>
-                    Custom Fonts: <react_native_1.Text style={bundleStyles.subsystemItemVal}>{bundleFiles.filter(f => f.category === 'font').length || 0} fonts</react_native_1.Text>
+                    Custom Fonts:{' '}
+                    <react_native_1.Text style={bundleStyles.subsystemItemVal}>
+                      {bundleFiles.filter(f => f.category === 'font').length ||
+                0}{' '}
+                      fonts
+                    </react_native_1.Text>
                   </react_native_1.Text>
                 </react_native_1.View>
               </react_native_1.View>
@@ -1281,13 +1524,24 @@ const BundleTab = react_1.default.memo(() => {
       {/* ── 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}>
             {[
-                { key: 'ios', label: 'iOS App (.ipa)', badge: `${analysis?.production.ios.totalDownloadMb || 111.9} MB` },
-                { key: 'androidAab', label: 'Android AAB (.aab)', badge: `${analysis?.production.androidAab.totalDownloadMb || 38.5} MB` },
-                { key: 'androidApk', label: 'Universal APK (.apk)', badge: `${analysis?.production.androidApk.totalInstallMb || 364.0} MB` },
+                {
+                    key: 'ios',
+                    label: 'iOS App (.ipa)',
+                    badge: `${analysis?.production.ios.totalDownloadMb || 111.9} MB`,
+                },
+                {
+                    key: 'androidAab',
+                    label: 'Android AAB (.aab)',
+                    badge: `${analysis?.production.androidAab.totalDownloadMb || 38.5} MB`,
+                },
+                {
+                    key: 'androidApk',
+                    label: 'Universal APK (.apk)',
+                    badge: `${analysis?.production.androidApk.totalInstallMb || 364.0} MB`,
+                },
             ].map(tab => {
                 const isSelected = prodPlatform === tab.key;
                 return (<TouchableScale_1.default key={tab.key} accessible={true} accessibilityRole="tab" accessibilityLabel={`${tab.label}, ${tab.badge}`} accessibilityState={{ selected: isSelected }} accessibilityHint={`Switches production estimate to ${tab.label}`} onPress={() => setProdPlatform(tab.key)} style={[
@@ -1344,31 +1598,51 @@ const BundleTab = react_1.default.memo(() => {
               <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>
-                  <react_native_1.Text style={[bundleStyles.metricValue, { color: AppColors_1.AppColors.purple }]}>
+                  <react_native_1.Text style={[
+                    bundleStyles.metricValue,
+                    { color: AppColors_1.AppColors.purple },
+                ]}>
                     {analysis.production[prodPlatform].totalInstallMb} MB
                   </react_native_1.Text>
-                  <react_native_1.Text style={bundleStyles.metricHint}>On-device uncompressed footprint</react_native_1.Text>
+                  <react_native_1.Text style={bundleStyles.metricHint}>
+                    On-device uncompressed footprint
+                  </react_native_1.Text>
                 </react_native_1.View>
 
                 <react_native_1.View style={bundleStyles.metricBox}>
                   <react_native_1.Text style={bundleStyles.metricLabel}>DOWNLOAD SIZE</react_native_1.Text>
-                  <react_native_1.Text style={[bundleStyles.metricValue, { color: AppColors_1.AppColors.emerald600 }]}>
+                  <react_native_1.Text style={[
+                    bundleStyles.metricValue,
+                    { color: AppColors_1.AppColors.emerald600 },
+                ]}>
                     ~{analysis.production[prodPlatform].totalDownloadMb} MB
                   </react_native_1.Text>
-                  <react_native_1.Text style={bundleStyles.metricHint}>Store network transfer payload</react_native_1.Text>
+                  <react_native_1.Text style={bundleStyles.metricHint}>
+                    Store network transfer payload
+                  </react_native_1.Text>
                 </react_native_1.View>
 
                 <react_native_1.View style={bundleStyles.metricBox}>
                   <react_native_1.Text style={bundleStyles.metricLabel}>COMPRESSION</react_native_1.Text>
-                  <react_native_1.Text style={[bundleStyles.metricValue, { color: AppColors_1.AppColors.sky500 }]}>
+                  <react_native_1.Text style={[
+                    bundleStyles.metricValue,
+                    { color: AppColors_1.AppColors.sky500 },
+                ]}>
                     {analysis.production[prodPlatform].compressionRatioPct}%
                   </react_native_1.Text>
-                  <react_native_1.Text style={bundleStyles.metricHint}>Bytecode & asset ratio</react_native_1.Text>
+                  <react_native_1.Text style={bundleStyles.metricHint}>
+                    Bytecode & asset ratio
+                  </react_native_1.Text>
                 </react_native_1.View>
 
                 <react_native_1.View style={bundleStyles.metricBox}>
-                  <react_native_1.Text style={bundleStyles.metricLabel}>FORMAT ARCHITECTURE</react_native_1.Text>
-                  <react_native_1.Text style={[bundleStyles.metricValue, { color: AppColors_1.AppColors.amber700 }]}>
+                  <react_native_1.Text style={bundleStyles.metricLabel}>
+                    FORMAT ARCHITECTURE
+                  </react_native_1.Text>
+                  <react_native_1.Text style={[
+                    bundleStyles.metricValue,
+                    { color: AppColors_1.AppColors.amber700 },
+                ]}>
                     {prodPlatform === 'ios'
                     ? 'Mach-O 64-bit'
                     : prodPlatform === 'androidAab'
@@ -1389,10 +1663,13 @@ const BundleTab = react_1.default.memo(() => {
           {/* Component Breakdown Cards */}
           {analysis && (<react_native_1.View style={bundleStyles.sectionCard}>
               <react_native_1.View style={bundleStyles.sectionHeaderRow}>
-                <react_native_1.View>
-                  <react_native_1.Text style={bundleStyles.sectionTitle}>Binary Component Architecture</react_native_1.Text>
+                <react_native_1.View style={{ flex: 1, paddingRight: 4 }}>
+                  <react_native_1.Text style={bundleStyles.sectionTitle}>
+                    Binary Component Architecture
+                  </react_native_1.Text>
                   <react_native_1.Text style={bundleStyles.sectionSub}>
-                    Compiled native libraries, runtime bytecodes, assets, and signature blocks
+                    Compiled native libraries, runtime bytecodes, assets, and
+                    signature blocks
                   </react_native_1.Text>
                 </react_native_1.View>
                 <CopyButton_1.default value={() => analysis.production[prodPlatform].components} label="Components JSON"/>
@@ -1410,26 +1687,29 @@ const BundleTab = react_1.default.memo(() => {
               {/* 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={{
+                      <react_native_1.View style={{
                         width: 8,
                         height: 8,
                         borderRadius: 4,
                         backgroundColor: comp.color,
                     }}/>
-                    <react_native_1.Text style={bundleStyles.legendText} numberOfLines={1}>
-                      {comp.name}{' '}
-                      <react_native_1.Text style={bundleStyles.legendVal}>
-                        {comp.sizeMb} MB ({comp.pct}%)
+                      <react_native_1.Text style={bundleStyles.legendText} numberOfLines={1}>
+                        {comp.name}{' '}
+                        <react_native_1.Text style={bundleStyles.legendVal}>
+                          {comp.sizeMb} MB ({comp.pct}%)
+                        </react_native_1.Text>
                       </react_native_1.Text>
-                    </react_native_1.Text>
-                  </react_native_1.View>))}
+                    </react_native_1.View>))}
               </react_native_1.View>
 
               {analysis.production[prodPlatform].components.map((comp, idx) => (<react_native_1.View key={idx} style={bundleStyles.catRowCard}>
                   <react_native_1.View style={bundleStyles.catRowTop}>
                     <react_native_1.View style={[
                         bundleStyles.catIconBox,
-                        { backgroundColor: `${comp.color}15`, borderColor: `${comp.color}30` },
+                        {
+                            backgroundColor: `${comp.color}15`,
+                            borderColor: `${comp.color}30`,
+                        },
                     ]}>
                       <BundleCategoryIcon type={comp.category === 'native'
                         ? 'source'
@@ -1443,17 +1723,31 @@ const BundleTab = react_1.default.memo(() => {
                     </react_native_1.View>
 
                     <react_native_1.View style={bundleStyles.catRowTitleWrap}>
-                      <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 6 }}>
+                      <react_native_1.View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        gap: 6,
+                    }}>
                         <react_native_1.Text style={bundleStyles.catRowTitle} numberOfLines={1}>
                           {comp.name}
                         </react_native_1.Text>
-                        <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-                          <react_native_1.Text style={bundleStyles.catRowSize}>{comp.sizeMb} MB</react_native_1.Text>
+                        <react_native_1.View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 6,
+                    }}>
+                          <react_native_1.Text style={bundleStyles.catRowSize}>
+                            {comp.sizeMb} MB
+                          </react_native_1.Text>
                           <react_native_1.View style={[
                         bundleStyles.catPctPill,
                         { backgroundColor: `${comp.color}18` },
                     ]}>
-                            <react_native_1.Text style={[bundleStyles.catPctText, { color: comp.color }]}>
+                            <react_native_1.Text style={[
+                        bundleStyles.catPctText,
+                        { color: comp.color },
+                    ]}>
                               {comp.pct}%
                             </react_native_1.Text>
                           </react_native_1.View>
@@ -1473,9 +1767,16 @@ const BundleTab = react_1.default.memo(() => {
                     ]}/>
                   </react_native_1.View>
 
-                  {comp.advice ? (<react_native_1.View style={[bundleStyles.adviceBadge, bundleStyles.adviceOptimal, { marginTop: 6 }]}>
+                  {comp.advice ? (<react_native_1.View style={[
+                            bundleStyles.adviceBadge,
+                            bundleStyles.adviceOptimal,
+                            { marginTop: 6 },
+                        ]}>
                       <NetworkIcons_1.LightbulbIcon color={AppColors_1.AppColors.emerald700} size={13}/>
-                      <react_native_1.Text style={[bundleStyles.adviceText, { color: AppColors_1.AppColors.emerald700, flex: 1, marginLeft: 4 }]}>
+                      <react_native_1.Text style={[
+                            bundleStyles.adviceText,
+                            { color: AppColors_1.AppColors.emerald700, flex: 1, marginLeft: 4 },
+                        ]}>
                         {comp.advice}
                       </react_native_1.Text>
                     </react_native_1.View>) : null}
@@ -1510,21 +1811,33 @@ const BundleTab = react_1.default.memo(() => {
                 {/* Platform Metric Grid Chips */}
                 <react_native_1.View style={bundleStyles.totalFormulaGrid}>
                   <react_native_1.View style={bundleStyles.totalChip}>
-                    <react_native_1.View style={[bundleStyles.totalDot, { backgroundColor: AppColors_1.AppColors.purple }]}/>
+                    <react_native_1.View style={[
+                    bundleStyles.totalDot,
+                    { backgroundColor: AppColors_1.AppColors.purple },
+                ]}/>
                     <react_native_1.Text style={bundleStyles.totalChipText}>
-                      Install: {analysis.production[prodPlatform].totalInstallMb} MB
+                      Install:{' '}
+                      {analysis.production[prodPlatform].totalInstallMb} MB
                     </react_native_1.Text>
                   </react_native_1.View>
                   <react_native_1.View style={bundleStyles.totalChip}>
-                    <react_native_1.View style={[bundleStyles.totalDot, { backgroundColor: AppColors_1.AppColors.sky500 }]}/>
+                    <react_native_1.View style={[
+                    bundleStyles.totalDot,
+                    { backgroundColor: AppColors_1.AppColors.sky500 },
+                ]}/>
                     <react_native_1.Text style={bundleStyles.totalChipText}>
-                      Download: ~{analysis.production[prodPlatform].totalDownloadMb} MB
+                      Download: ~
+                      {analysis.production[prodPlatform].totalDownloadMb} MB
                     </react_native_1.Text>
                   </react_native_1.View>
                   <react_native_1.View style={bundleStyles.totalChip}>
-                    <react_native_1.View style={[bundleStyles.totalDot, { backgroundColor: AppColors_1.AppColors.emerald500 }]}/>
+                    <react_native_1.View style={[
+                    bundleStyles.totalDot,
+                    { backgroundColor: AppColors_1.AppColors.emerald500 },
+                ]}/>
                     <react_native_1.Text style={bundleStyles.totalChipText}>
-                      Compression: {analysis.production[prodPlatform].compressionRatioPct}%
+                      Compression:{' '}
+                      {analysis.production[prodPlatform].compressionRatioPct}%
                     </react_native_1.Text>
                   </react_native_1.View>
                 </react_native_1.View>
@@ -1561,8 +1874,16 @@ const BundleTab = react_1.default.memo(() => {
                 return (<TouchableScale_1.default key={tab.key} accessible={true} accessibilityRole="button" accessibilityLabel={`Filter by ${t(tab.labelKey)}, ${count} items`} accessibilityState={{ selected: isActive }} accessibilityHint={`Filters files list to ${t(tab.labelKey)}`} onPress={() => setActiveCategory(tab.key)} style={[
                         bundleStyles.catPill,
                         isActive && bundleStyles.catPillActive,
-                        tab.key === 'UNUSED' && isActive && { backgroundColor: AppColors_1.AppColors.red500, borderColor: AppColors_1.AppColors.red600 },
-                        tab.key === 'CONSUMED' && isActive && { backgroundColor: AppColors_1.AppColors.emerald600, borderColor: AppColors_1.AppColors.emerald700 },
+                        tab.key === 'UNUSED' &&
+                            isActive && {
+                            backgroundColor: AppColors_1.AppColors.red500,
+                            borderColor: AppColors_1.AppColors.red600,
+                        },
+                        tab.key === 'CONSUMED' &&
+                            isActive && {
+                            backgroundColor: AppColors_1.AppColors.emerald600,
+                            borderColor: AppColors_1.AppColors.emerald700,
+                        },
                     ]}>
                     <BundleCategoryIcon type={tab.iconType} size={12} color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayTextStrong}/>
                     <react_native_1.Text style={[
@@ -1578,7 +1899,6 @@ const BundleTab = react_1.default.memo(() => {
 
           {/* 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}>
@@ -1588,7 +1908,8 @@ const BundleTab = react_1.default.memo(() => {
             ]}>
                   <react_native_1.Text style={[
                 bundleStyles.viewModeBtnText,
-                filesViewMode === 'tree' && bundleStyles.viewModeBtnTextActive,
+                filesViewMode === 'tree' &&
+                    bundleStyles.viewModeBtnTextActive,
             ]}>
                     {t('bundle.treeView')}
                   </react_native_1.Text>
@@ -1599,7 +1920,8 @@ const BundleTab = react_1.default.memo(() => {
             ]}>
                   <react_native_1.Text style={[
                 bundleStyles.viewModeBtnText,
-                filesViewMode === 'list' && bundleStyles.viewModeBtnTextActive,
+                filesViewMode === 'list' &&
+                    bundleStyles.viewModeBtnTextActive,
             ]}>
                     {t('bundle.flatList')}
                   </react_native_1.Text>
@@ -1608,11 +1930,17 @@ const BundleTab = react_1.default.memo(() => {
 
               {filesViewMode === 'tree' ? (<react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                   <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel="Expand all folders" onPress={expandAllFolders}>
-                    <react_native_1.Text style={bundleStyles.treeActionLink}>{t('bundle.expand')}</react_native_1.Text>
+                    <react_native_1.Text style={bundleStyles.treeActionLink}>
+                      {t('bundle.expand')}
+                    </react_native_1.Text>
                   </TouchableScale_1.default>
-                  <react_native_1.Text style={{ color: AppColors_1.AppColors.grayTextWeak, fontSize: 11 }}>•</react_native_1.Text>
+                  <react_native_1.Text style={{ color: AppColors_1.AppColors.grayTextWeak, fontSize: 11 }}>
+                    •
+                  </react_native_1.Text>
                   <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel="Collapse all folders" onPress={collapseAllFolders}>
-                    <react_native_1.Text style={bundleStyles.treeActionLink}>{t('bundle.collapse')}</react_native_1.Text>
+                    <react_native_1.Text style={bundleStyles.treeActionLink}>
+                      {t('bundle.collapse')}
+                    </react_native_1.Text>
                   </TouchableScale_1.default>
                 </react_native_1.View>) : (<react_native_1.Text style={bundleStyles.listHeaderCount}>
                   {t('bundle.showingFilesOf', {
@@ -1629,9 +1957,13 @@ const BundleTab = react_1.default.memo(() => {
             /* ── MODE 2: FLAT LIST VIEW ── */
             filteredFiles.map((file, index) => {
                 const categoryMeta = CATEGORY_COLORS[file.category] || CATEGORY_COLORS.typescript;
-                const pctOfTotal = ((file.sizeKb / summary.totalKb) * 100).toFixed(1);
+                const pctOfTotal = ((file.sizeKb / summary.totalKb) *
+                    100).toFixed(1);
                 const isUnused = file.isConsumed === false;
-                return (<react_native_1.View key={file.id} style={[bundleStyles.fileCard, isUnused && bundleStyles.treeFileCardUnused]}>
+                return (<react_native_1.View key={file.id} style={[
+                        bundleStyles.fileCard,
+                        isUnused && bundleStyles.treeFileCardUnused,
+                    ]}>
                     <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>
@@ -1640,25 +1972,45 @@ const BundleTab = react_1.default.memo(() => {
                       <MediaPreviewThumbnail file={file}/>
 
                       <react_native_1.View style={{ flex: 1, paddingHorizontal: 4 }}>
-                        <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
+                        <react_native_1.View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 6,
+                        flexWrap: 'wrap',
+                    }}>
                           <HighlightText_1.default text={file.name} search={search} style={bundleStyles.fileName} highlightStyle={bundleStyles.searchHighlight}/>
                           {isUnused ? (<react_native_1.View style={bundleStyles.unusedBadge}>
-                              <react_native_1.Text style={bundleStyles.unusedBadgeText}>{t('bundle.notConsumed')}</react_native_1.Text>
+                              <react_native_1.Text style={bundleStyles.unusedBadgeText}>
+                                {t('bundle.notConsumed')}
+                              </react_native_1.Text>
                             </react_native_1.View>) : (<react_native_1.View style={bundleStyles.consumedBadge}>
-                              <react_native_1.Text style={bundleStyles.consumedBadgeText}>{t('bundle.consumed')}</react_native_1.Text>
+                              <react_native_1.Text style={bundleStyles.consumedBadgeText}>
+                                {t('bundle.consumed')}
+                              </react_native_1.Text>
                             </react_native_1.View>)}
                         </react_native_1.View>
                         <HighlightText_1.default text={file.path} search={search} style={bundleStyles.filePath} highlightStyle={bundleStyles.searchHighlight} numberOfLines={1}/>
                       </react_native_1.View>
 
-                      <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                      <react_native_1.View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 6,
+                    }}>
                         <react_native_1.View style={bundleStyles.fileSizeBox}>
-                          <react_native_1.Text style={[bundleStyles.fileSizeKb, isUnused && { color: AppColors_1.AppColors.amber800Warm }]}>
+                          <react_native_1.Text style={[
+                        bundleStyles.fileSizeKb,
+                        isUnused && { color: AppColors_1.AppColors.amber800Warm },
+                    ]}>
                             {file.sizeKb >= 1024
-                        ? t('bundle.fileSizeMb', { size: (file.sizeKb / 1024).toFixed(2) })
+                        ? t('bundle.fileSizeMb', {
+                            size: (file.sizeKb / 1024).toFixed(2),
+                        })
                         : t('bundle.fileSizeKb', { size: file.sizeKb })}
                           </react_native_1.Text>
-                          <react_native_1.Text style={bundleStyles.filePercent}>{pctOfTotal}%</react_native_1.Text>
+                          <react_native_1.Text style={bundleStyles.filePercent}>
+                            {pctOfTotal}%
+                          </react_native_1.Text>
                         </react_native_1.View>
                         <TouchableScale_1.default onPress={() => (0, exports.downloadBundleFile)(file, analysis?.scriptURL)} style={bundleStyles.downloadFileBtn} hitSlop={8}>
                           <NetworkIcons_1.DownloadIcon size={14} color={AppColors_1.AppColors.sky500}/>
@@ -1672,7 +2024,9 @@ const BundleTab = react_1.default.memo(() => {
                         bundleStyles.fileProgressBar,
                         {
                             width: `${Math.min(100, Math.max(4, Number(pctOfTotal) * 4))}%`,
-                            backgroundColor: isUnused ? AppColors_1.AppColors.red500 : categoryMeta.color,
+                            backgroundColor: isUnused
+                                ? AppColors_1.AppColors.red500
+                                : categoryMeta.color,
                         },
                     ]}/>
                     </react_native_1.View>
@@ -1731,7 +2085,6 @@ const BundleTab = react_1.default.memo(() => {
       {/* ══════════════════════════════════════════════════════════════════════ */}
       {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}>
               <react_native_1.View style={bundleStyles.searchRow}>
                 <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={15}/>
@@ -1744,14 +2097,25 @@ const BundleTab = react_1.default.memo(() => {
             </react_native_1.View>
 
             <react_native_1.Text style={bundleStyles.listHeaderCount}>
-              {t('bundle.showingDependencies', { count: filteredPackages.length })}
+              {t('bundle.showingDependencies', {
+                count: filteredPackages.length,
+            })}
             </react_native_1.Text>
 
             {filteredPackages.map((pkg, index) => {
-                const cleanInstalledVersion = pkg.version ? pkg.version.replace(/^\^/, '') : '';
-                const hasUpdate = !!pkg.latestVersion && !!cleanInstalledVersion &&
+                const cleanInstalledVersion = pkg.version
+                    ? pkg.version.replace(/^\^/, '')
+                    : '';
+                const hasUpdate = !!pkg.latestVersion &&
+                    !!cleanInstalledVersion &&
                     pkg.latestVersion !== cleanInstalledVersion;
-                return (<react_native_1.View key={pkg.id} style={[bundleStyles.fileCard, pkg.isDeprecated && { borderColor: AppColors_1.AppColors.errorBorder, backgroundColor: AppColors_1.AppColors.errorCardBg }]}>
+                return (<react_native_1.View key={pkg.id} style={[
+                        bundleStyles.fileCard,
+                        pkg.isDeprecated && {
+                            borderColor: AppColors_1.AppColors.errorBorder,
+                            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}>
@@ -1761,12 +2125,19 @@ const BundleTab = react_1.default.memo(() => {
                     <PackageLogoRenderer name={pkg.name} color={pkg.color} size={28}/>
 
                     <react_native_1.View style={{ flex: 1, paddingHorizontal: 4 }}>
-                      <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
+                      <react_native_1.View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 6,
+                        flexWrap: 'wrap',
+                    }}>
                         <HighlightText_1.default text={pkg.name} search={search} style={bundleStyles.fileName} highlightStyle={bundleStyles.searchHighlight}/>
                         <react_native_1.View style={bundleStyles.versionPill}>
                           <react_native_1.Text style={bundleStyles.versionPillText}>
                             {cleanInstalledVersion
-                        ? t('bundle.versionPrefix', { version: cleanInstalledVersion })
+                        ? t('bundle.versionPrefix', {
+                            version: cleanInstalledVersion,
+                        })
                         : t('bundle.bundled')}
                           </react_native_1.Text>
                         </react_native_1.View>
@@ -1777,34 +2148,72 @@ const BundleTab = react_1.default.memo(() => {
                             </react_native_1.Text>
                           </react_native_1.View>) : hasUpdate ? (<react_native_1.View style={bundleStyles.updateBadge}>
                             <react_native_1.Text style={bundleStyles.updateBadgeText}>
-                              {t('bundle.updateAvailable', { version: pkg.latestVersion })}
+                              {t('bundle.updateAvailable', {
+                            version: pkg.latestVersion,
+                        })}
                             </react_native_1.Text>
-                          </react_native_1.View>) : cleanInstalledVersion ? (<react_native_1.View style={[bundleStyles.updateBadge, { backgroundColor: AppColors_1.AppColors.gray100, borderColor: AppColors_1.AppColors.gray200 }]}>
-                            <react_native_1.Text style={[bundleStyles.updateBadgeText, { color: AppColors_1.AppColors.gray600 }]}>
+                          </react_native_1.View>) : cleanInstalledVersion ? (<react_native_1.View style={[
+                            bundleStyles.updateBadge,
+                            {
+                                backgroundColor: AppColors_1.AppColors.gray100,
+                                borderColor: AppColors_1.AppColors.gray200,
+                            },
+                        ]}>
+                            <react_native_1.Text style={[
+                            bundleStyles.updateBadgeText,
+                            { color: AppColors_1.AppColors.gray600 },
+                        ]}>
                               {t('bundle.upToDate')}
                             </react_native_1.Text>
-                          </react_native_1.View>) : (<react_native_1.View style={[bundleStyles.updateBadge, { backgroundColor: AppColors_1.AppColors.gray100, borderColor: AppColors_1.AppColors.gray200 }]}>
-                            <react_native_1.Text style={[bundleStyles.updateBadgeText, { color: AppColors_1.AppColors.gray600 }]}>
+                          </react_native_1.View>) : (<react_native_1.View style={[
+                            bundleStyles.updateBadge,
+                            {
+                                backgroundColor: AppColors_1.AppColors.gray100,
+                                borderColor: AppColors_1.AppColors.gray200,
+                            },
+                        ]}>
+                            <react_native_1.Text style={[
+                            bundleStyles.updateBadgeText,
+                            { color: AppColors_1.AppColors.gray600 },
+                        ]}>
                               {t('bundle.bundledBadge')}
                             </react_native_1.Text>
                           </react_native_1.View>)}
                       </react_native_1.View>
                     </react_native_1.View>
 
-                    <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                    <react_native_1.View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 6,
+                    }}>
                       <react_native_1.View style={bundleStyles.fileSizeBox}>
                         <react_native_1.Text style={bundleStyles.fileSizeKb}>
                           {t('bundle.fileSizeKb', { size: pkg.sizeKb })}
                         </react_native_1.Text>
-                        <react_native_1.Text style={bundleStyles.filePercent}>{pkg.percentage}%</react_native_1.Text>
+                        <react_native_1.Text style={bundleStyles.filePercent}>
+                          {pkg.percentage}%
+                        </react_native_1.Text>
                       </react_native_1.View>
                       <CopyButton_1.default value={() => pkg} label={t('bundle.packageDetailsJson')}/>
                     </react_native_1.View>
                   </react_native_1.View>
 
                   {/* Subtitle Row: Category Chip + Description */}
-                  <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, marginTop: 4, marginBottom: 2 }}>
-                    <react_native_1.View style={[bundleStyles.pkgBadge, { backgroundColor: `${pkg.color}1F`, borderColor: `${pkg.color}4D` }]}>
+                  <react_native_1.View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 6,
+                        marginTop: 4,
+                        marginBottom: 2,
+                    }}>
+                    <react_native_1.View style={[
+                        bundleStyles.pkgBadge,
+                        {
+                            backgroundColor: `${pkg.color}1F`,
+                            borderColor: `${pkg.color}4D`,
+                        },
+                    ]}>
                       <react_native_1.Text style={[bundleStyles.pkgBadgeText, { color: pkg.color }]}>
                         {pkg.category.toUpperCase()}
                       </react_native_1.Text>
@@ -1816,7 +2225,11 @@ const BundleTab = react_1.default.memo(() => {
 
                   {/* Deprecation Warning Banner if deprecated */}
                   {pkg.isDeprecated && pkg.deprecationReason && (<react_native_1.View style={bundleStyles.deprecationBox}>
-                      <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
+                      <react_native_1.View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 5,
+                        }}>
                         <NetworkIcons_1.CircleAlertIcon color={AppColors_1.AppColors.errorColor} size={12}/>
                         <react_native_1.Text style={bundleStyles.deprecationText}>
                           {pkg.deprecationReason}
@@ -1827,19 +2240,39 @@ const BundleTab = react_1.default.memo(() => {
                   <react_native_1.View style={bundleStyles.fileProgressTrack}>
                     <react_native_1.View style={[
                         bundleStyles.fileProgressBar,
-                        { width: `${pkg.percentage * 2}%`, backgroundColor: pkg.isDeprecated ? AppColors_1.AppColors.red500 : pkg.color },
+                        {
+                            width: `${pkg.percentage * 2}%`,
+                            backgroundColor: pkg.isDeprecated
+                                ? AppColors_1.AppColors.red500
+                                : pkg.color,
+                        },
                     ]}/>
                   </react_native_1.View>
 
                   {/* Footer Row: Type Tag + Last Active + NPM Link Button */}
-                  <react_native_1.View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: 3 }}>
-                    <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+                  <react_native_1.View style={{
+                        flexDirection: 'row',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        marginTop: 3,
+                    }}>
+                    <react_native_1.View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 8,
+                    }}>
                       <react_native_1.View style={bundleStyles.typeTag}>
                         <react_native_1.Text style={bundleStyles.typeTagText}>
-                          {pkg.type === 'direct' ? t('bundle.direct') : t('bundle.transitive')}
+                          {pkg.type === 'direct'
+                        ? t('bundle.direct')
+                        : t('bundle.transitive')}
                         </react_native_1.Text>
                       </react_native_1.View>
-                      {pkg.lastActive && (<react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+                      {pkg.lastActive && (<react_native_1.View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 4,
+                        }}>
                           <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.grayTextWeak} size={11}/>
                           <react_native_1.Text style={bundleStyles.lastActiveText}>
                             {pkg.lastActive}
@@ -1847,15 +2280,22 @@ const BundleTab = react_1.default.memo(() => {
                         </react_native_1.View>)}
                     </react_native_1.View>
 
-                    <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+                    <react_native_1.View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 8,
+                    }}>
                       <react_native_1.Text style={bundleStyles.fileMetaText}>
                         {t('bundle.minified', { size: pkg.sizeKb })}
                       </react_native_1.Text>
                       <TouchableScale_1.default accessible={true} accessibilityRole="link" accessibilityLabel={`Open ${pkg.name} on NPM`} accessibilityHint="Opens NPM package page in browser" onPress={() => {
-                        const url = pkg.npmUrl || `https://www.npmjs.com/package/${pkg.name}`;
+                        const url = pkg.npmUrl ||
+                            `https://www.npmjs.com/package/${pkg.name}`;
                         react_native_1.Linking.openURL(url).catch(() => { });
                     }} style={bundleStyles.npmLinkBtn}>
-                        <react_native_1.Text style={bundleStyles.npmLinkText}>{t('bundle.npmLink')}</react_native_1.Text>
+                        <react_native_1.Text style={bundleStyles.npmLinkText}>
+                          {t('bundle.npmLink')}
+                        </react_native_1.Text>
                       </TouchableScale_1.default>
                     </react_native_1.View>
                   </react_native_1.View>
@@ -1868,7 +2308,9 @@ const BundleTab = react_1.default.memo(() => {
             <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
               <NetworkIcons_1.PackageIcon color={AppColors_1.AppColors.purple} size={14}/>
               <react_native_1.Text style={bundleStyles.footerTitle}>
-                {t('bundle.dependenciesCount', { count: filteredPackages.length })}
+                {t('bundle.dependenciesCount', {
+                count: filteredPackages.length,
+            })}
               </react_native_1.Text>
             </react_native_1.View>
             <react_native_1.Text style={bundleStyles.footerSizeVal}>
@@ -1885,22 +2327,36 @@ const BundleTab = react_1.default.memo(() => {
       {/* ══════════════════════════════════════════════════════════════════════ */}
       {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}>
-              <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
+              <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                marginBottom: 8,
+            }}>
                 <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
                   <NetworkIcons_1.StorageIcon color={AppColors_1.AppColors.purple} size={18}/>
-                  <react_native_1.Text style={bundleStyles.tipsHeading}>{t('bundle.mediaAuditorTitle')}</react_native_1.Text>
+                  <react_native_1.Text style={bundleStyles.tipsHeading}>
+                    {t('bundle.mediaAuditorTitle')}
+                  </react_native_1.Text>
                 </react_native_1.View>
                 <CopyButton_1.default value={() => mediaFiles} label={t('bundle.mediaAssetsJson')}/>
               </react_native_1.View>
               <react_native_1.Text style={bundleStyles.tipDesc}>
                 {t('bundle.mediaAuditorPrefix')}{' '}
-                <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, color: AppColors_1.AppColors.purple }}>
+                <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                color: AppColors_1.AppColors.purple,
+            }}>
                   {summary.images.pct + summary.fonts.pct}%
                 </react_native_1.Text>{' '}
-                {t('bundle.mediaAuditorMid', { kb: summary.images.kb + summary.fonts.kb })}{' '}
-                <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, color: AppColors_1.AppColors.emerald700 }}>
+                {t('bundle.mediaAuditorMid', {
+                kb: summary.images.kb + summary.fonts.kb,
+            })}{' '}
+                <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                color: AppColors_1.AppColors.emerald700,
+            }}>
                   {t('bundle.mediaSavings', { size: 540 })}
                 </react_native_1.Text>{' '}
                 {t('bundle.mediaAuditorSuffix')}
@@ -1924,7 +2380,11 @@ const BundleTab = react_1.default.memo(() => {
                     <react_native_1.Text style={bundleStyles.filePath}>{file.path}</react_native_1.Text>
                   </react_native_1.View>
 
-                  <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                  <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 6,
+                }}>
                     <react_native_1.View style={bundleStyles.fileSizeBox}>
                       <react_native_1.Text style={bundleStyles.fileSizeKb}>
                         {t('bundle.fileSizeKb', { size: file.sizeKb })}
@@ -1982,12 +2442,18 @@ const BundleTab = react_1.default.memo(() => {
       {/* ── 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={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
+            <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                marginBottom: 12,
+            }}>
               <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
                 <NetworkIcons_1.CircleAlertIcon color={AppColors_1.AppColors.purple} size={18}/>
-                <react_native_1.Text style={bundleStyles.tipsHeading}>{t('bundle.optimizerTitle')}</react_native_1.Text>
+                <react_native_1.Text style={bundleStyles.tipsHeading}>
+                  {t('bundle.optimizerTitle')}
+                </react_native_1.Text>
               </react_native_1.View>
               <CopyButton_1.default value={() => [
                 t('bundle.optTip1Title'),
@@ -2014,8 +2480,12 @@ const BundleTab = react_1.default.memo(() => {
                     desc: isHermes
                         ? t('bundle.optTip2DescActive')
                         : t('bundle.optTip2DescInactive'),
-                    badge: isHermes ? t('bundle.active') : t('bundle.actionRequired'),
-                    badgeColor: isHermes ? AppColors_1.AppColors.emerald500 : AppColors_1.AppColors.amber500,
+                    badge: isHermes
+                        ? t('bundle.active')
+                        : t('bundle.actionRequired'),
+                    badgeColor: isHermes
+                        ? AppColors_1.AppColors.emerald500
+                        : AppColors_1.AppColors.amber500,
                 },
                 {
                     iconType: 'font',
@@ -2051,8 +2521,17 @@ const BundleTab = react_1.default.memo(() => {
                     <react_native_1.Text style={bundleStyles.tipTitle}>{tip.title}</react_native_1.Text>
                   </react_native_1.View>
                   <react_native_1.View style={bundleStyles.tipActionWrap}>
-                    <react_native_1.View style={[bundleStyles.impactBadge, { backgroundColor: `${tip.badgeColor}18`, borderColor: `${tip.badgeColor}40` }]}>
-                      <react_native_1.Text style={[bundleStyles.impactBadgeText, { color: tip.badgeColor }]}>
+                    <react_native_1.View style={[
+                    bundleStyles.impactBadge,
+                    {
+                        backgroundColor: `${tip.badgeColor}18`,
+                        borderColor: `${tip.badgeColor}40`,
+                    },
+                ]}>
+                      <react_native_1.Text style={[
+                    bundleStyles.impactBadgeText,
+                    { color: tip.badgeColor },
+                ]}>
                         {tip.badge}
                       </react_native_1.Text>
                     </react_native_1.View>
@@ -2275,12 +2754,14 @@ const bundleStyles = react_native_1.StyleSheet.create({
         padding: 14,
         borderWidth: 1,
         borderColor: AppColors_1.AppColors.dividerColor,
+        overflow: 'hidden',
     },
     sectionHeaderRow: {
         flexDirection: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',
         marginBottom: 10,
+        gap: 8,
     },
     sectionTitle: {
         fontFamily: AppFonts_1.AppFonts.interBold,
@@ -3121,7 +3602,8 @@ const bundleStyles = react_native_1.StyleSheet.create({
         alignItems: 'center',
         backgroundColor: AppColors_1.AppColors.white,
         paddingHorizontal: 16,
-        paddingVertical: 10,
+        paddingTop: 10,
+        paddingBottom: react_native_1.Platform.OS === 'ios' ? 24 : 12,
         borderTopWidth: 1,
         borderTopColor: AppColors_1.AppColors.dividerColor,
         shadowColor: AppColors_1.AppColors.primaryBlack,