react-native-inapp-inspector 2.3.18 → 2.3.20

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

@@ -1,3624 +1,1297 @@
-import React, { useState, useEffect, useMemo, useCallback } from 'react';
-import { ActivityIndicator, Image, Linking, Platform, Pressable, ScrollView, Share, StyleSheet, Text, TextInput, View, } from 'react-native';
-import { useTranslation, t } from '../../i18n';
-import TouchableScale from '../TouchableScale';
-import CopyButton from '../CopyButton';
-import HighlightText from '../HighlightText';
-import FeatureUnderDevNotice from './FeatureUnderDevNotice';
-import { AppColors } from '../../styles/AppColors';
-import { AppFonts } from '../../styles/AppFonts';
-import { copyToClipboard } from '../../helpers';
-import { PackageIcon, SearchIcon, ClearIcon, CircleAlertIcon, LayersIcon, TimelineIcon, LiveStateIcon, StorageIcon, MetadataIcon, FolderIcon, FolderOpenIcon, TrashIcon, LightbulbIcon, SparkleIcon, ClockIcon, RefreshCcwIcon, ExternalLinkIcon, DownloadIcon, ChevronIcon, } from '../NetworkIcons';
-import Svg, { Path, Rect, Circle, Ellipse, G, Defs, LinearGradient, Stop, } from 'react-native-svg';
-import { analyzeHostAppBundle, getCachedBundleAnalysis, getInitialBundleAnalysis, getHostScriptURL, } from '../../customHooks/bundleAnalyzer';
-const PackageLogoRenderer = ({ name, size = 28 }) => {
-    const lowerName = name.toLowerCase();
-    if (lowerName === 'react' ||
-        (lowerName.includes('react-native') &&
-            !lowerName.includes('svg') &&
-            !lowerName.includes('screens') &&
-            !lowerName.includes('gradient'))) {
-        return (<View style={[
-                bundleStyles.pkgLogoWrap,
-                { width: size, height: size, backgroundColor: AppColors.npmDark },
-            ]}>
-        <Svg width={size - 6} height={size - 6} viewBox="0 0 100 100" fill="none">
-          <Circle cx="50" cy="50" r="9" fill={AppColors.reactCyan}/>
-          <Ellipse cx="50" cy="50" rx="42" ry="16" stroke={AppColors.reactCyan} strokeWidth="6"/>
-          <Ellipse cx="50" cy="50" rx="42" ry="16" stroke={AppColors.reactCyan} strokeWidth="6" transform="rotate(60 50 50)"/>
-          <Ellipse cx="50" cy="50" rx="42" ry="16" stroke={AppColors.reactCyan} strokeWidth="6" transform="rotate(120 50 50)"/>
-        </Svg>
-      </View>);
-    }
-    if (lowerName.includes('navigation')) {
-        return (<View style={[
-                bundleStyles.pkgLogoWrap,
-                { width: size, height: size, backgroundColor: AppColors.hermesPurple },
-            ]}>
-        <Svg width={size - 8} height={size - 8} viewBox="0 0 100 100" fill="none">
-          <Circle cx="50" cy="50" r="38" stroke={AppColors.white} strokeWidth="8"/>
-          <Path d="M50 20 L68 50 L50 80 L32 50 Z" fill={AppColors.reactCyan}/>
-          <Circle cx="50" cy="50" r="6" fill={AppColors.white}/>
-        </Svg>
-      </View>);
-    }
-    if (lowerName.includes('svg')) {
-        return (<View style={[
-                bundleStyles.pkgLogoWrap,
-                { width: size, height: size, backgroundColor: AppColors.pink400 },
-            ]}>
-        <Svg width={size - 8} height={size - 8} viewBox="0 0 100 100" fill="none">
-          <Path d="M20 75 C35 25, 65 25, 80 75" stroke={AppColors.white} strokeWidth="10" strokeLinecap="round"/>
-          <Circle cx="20" cy="75" r="8" fill={AppColors.white}/>
-          <Circle cx="80" cy="75" r="8" fill={AppColors.white}/>
-          <Circle cx="50" cy="38" r="7" fill="#FCE7F3" stroke={AppColors.white} strokeWidth="3"/>
-        </Svg>
-      </View>);
-    }
-    if (lowerName.includes('axios')) {
-        return (<View style={[
-                bundleStyles.pkgLogoWrap,
-                { width: size, height: size, backgroundColor: AppColors.expoViolet },
-            ]}>
-        <Svg width={size - 6} height={size - 6} viewBox="0 0 100 100" fill="none">
-          <Path d="M22 75 L50 20 L78 75 M33 58 L67 58" stroke={AppColors.white} strokeWidth="12" strokeLinecap="round" strokeLinejoin="round"/>
-          <Circle cx="50" cy="20" r="7" fill={AppColors.reactCyan}/>
-        </Svg>
-      </View>);
-    }
-    if (lowerName.includes('screens') || lowerName.includes('software-mansion')) {
-        return (<View style={[
-                bundleStyles.pkgLogoWrap,
-                {
-                    width: size,
-                    height: size,
-                    backgroundColor: AppColors.reanimatedNavy,
-                },
-            ]}>
-        <Svg width={size - 8} height={size - 8} viewBox="0 0 100 100" fill="none">
-          <Path d="M50 15 L88 35 L50 55 L12 35 Z" fill={AppColors.sky400}/>
-          <Path d="M12 50 L50 70 L88 50" stroke={AppColors.white} strokeWidth="8" strokeLinecap="round"/>
-          <Path d="M12 65 L50 85 L88 65" stroke="#93C5FD" strokeWidth="8" strokeLinecap="round"/>
-        </Svg>
-      </View>);
-    }
-    if (lowerName.includes('gradient')) {
-        return (<View style={[
-                bundleStyles.pkgLogoWrap,
-                { width: size, height: size, backgroundColor: AppColors.rose600 },
-            ]}>
-        <Svg width={size - 4} height={size - 4} viewBox="0 0 100 100" fill="none">
-          <Defs>
-            <LinearGradient id="pkgGrad" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
-              <Stop offset="0" stopColor="#FF0080"/>
-              <Stop offset="0.5" stopColor="#7928CA"/>
-              <Stop offset="1" stopColor="#0070F3"/>
-            </LinearGradient>
-          </Defs>
-          <Rect width="100" height="100" rx="18" fill="url(#pkgGrad)"/>
-        </Svg>
-      </View>);
-    }
-    if (lowerName.includes('i18n')) {
-        return (<View style={[
-                bundleStyles.pkgLogoWrap,
-                { width: size, height: size, backgroundColor: AppColors.emerald600 },
-            ]}>
-        <Svg width={size - 8} height={size - 8} viewBox="0 0 100 100" fill="none">
-          <Circle cx="50" cy="50" r="38" stroke={AppColors.white} strokeWidth="8"/>
-          <Ellipse cx="50" cy="50" rx="18" ry="38" stroke={AppColors.white} strokeWidth="6"/>
-          <Path d="M14 50 L86 50" stroke={AppColors.white} strokeWidth="7"/>
-        </Svg>
-      </View>);
-    }
-    return (<View style={[
-            bundleStyles.pkgLogoWrap,
-            { width: size, height: size, backgroundColor: AppColors.npmRed },
-        ]}>
-      <Svg width={size - 4} height={size - 4} viewBox="0 0 100 100" fill="none">
-        <Rect width="100" height="100" rx="14" fill={AppColors.npmRed}/>
-        <Path d="M18 24 H82 V76 H50 V40 H38 V76 H18 Z" fill={AppColors.white}/>
-      </Svg>
-    </View>);
-};
-const BundleCategoryIcon = ({ type, size = 16, color = AppColors.purple }) => {
-    const stroke = {
-        stroke: color,
-        strokeWidth: 1.7,
-        strokeLinecap: 'round',
-        strokeLinejoin: 'round',
-    };
-    const renderGlyph = () => {
-        switch (type) {
-            case 'folder':
-                return (<G>
-            <Path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" {...stroke}/>
-          </G>);
-            case 'ban':
-                return (<G>
-            <Circle cx="12" cy="12" r="8.5" {...stroke}/>
-            <Path d="M5.5 5.5 18.5 18.5" {...stroke}/>
-          </G>);
-            case 'bolt':
-                return (<G>
-            <Path d="M13 2 4.5 13.5 H10.5 L9 22 19.5 9.5 H13.5 Z" {...stroke}/>
-          </G>);
-            case 'source':
-                return (<G>
-            <Path d="M8.5 7 L4 12 L8.5 17" {...stroke}/>
-            <Path d="M15.5 7 L20 12 L15.5 17" {...stroke}/>
-            <Path d="M13.5 4.5 L10.5 19.5" {...stroke}/>
-          </G>);
-            case 'deps':
-                return (<G>
-            <Rect x="4" y="4" width="16" height="16" rx="2.5" {...stroke}/>
-            <Path d="M4 9.5 H20" {...stroke}/>
-            <Path d="M9.5 9.5 V20" {...stroke}/>
-          </G>);
-            case 'media':
-            case 'image':
-                return (<G>
-            <Rect x="3.5" y="4.5" width="17" height="15" rx="2" {...stroke}/>
-            <Circle cx="9" cy="10" r="1.5" {...stroke}/>
-            <Path d="M3.5 17.5 L9.5 12.5 L14 16.5 L17 13.5 L20.5 17.5" {...stroke}/>
-          </G>);
-            case 'overhead':
-                return (<G>
-            <Circle cx="12" cy="12" r="3.2" {...stroke}/>
-            <Path d="M12 2.5 V5.5 M12 18.5 V21.5 M2.5 12 H5.5 M18.5 12 H21.5 M5.3 5.3 L7.4 7.4 M16.6 16.6 L18.7 18.7 M18.7 5.3 L16.6 7.4 M7.4 16.6 L5.3 18.7" {...stroke}/>
-          </G>);
-            case 'typescript':
-                return (<G>
-            <Path d="M6.5 3.5 H14 L18.5 8 V20.5 H6.5 Z" {...stroke}/>
-            <Path d="M14 3.5 V8 H18.5" {...stroke}/>
-            <Path d="M9.5 13.5 H15 M12 13.5 V16.5 M9.5 16.5 H13" {...stroke}/>
-          </G>);
-            case 'javascript':
-                return (<G>
-            <Path d="M9.5 3.5 C7.5 3.5 7.5 6.5 7.5 9 C7.5 11 6.5 12 5 12 C6.5 12 7.5 13 7.5 15 C7.5 17.5 7.5 20.5 9.5 20.5" {...stroke}/>
-            <Path d="M14.5 3.5 C16.5 3.5 16.5 6.5 16.5 9 C16.5 11 17.5 12 19 12 C17.5 12 16.5 13 16.5 15 C16.5 17.5 16.5 20.5 14.5 20.5" {...stroke}/>
-          </G>);
-            case 'font':
-                return (<G>
-            <Path d="M8 19 L12 5.5 L16 19" {...stroke}/>
-            <Path d="M9.4 14.5 H14.6" {...stroke}/>
-          </G>);
-            case 'json':
-                return (<G>
-            <Path d="M9 3.5 C7 3.5 7 6 7 8.5 C7 10.5 6 11.5 5 12 C6 12.5 7 13.5 7 15.5 C7 18 7 20.5 9 20.5" {...stroke}/>
-            <Circle cx="12" cy="12" r="1.1" fill={color}/>
-            <Path d="M15 3.5 C17 3.5 17 6 17 8.5 C17 10.5 18 11.5 19 12 C18 12.5 17 13.5 17 15.5 C17 18 17 20.5 15 20.5" {...stroke}/>
-          </G>);
-            default:
-                return null;
-        }
-    };
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      {renderGlyph()}
-    </Svg>);
-};
-const MediaPreviewThumbnail = ({ file }) => {
-    const [loadError, setLoadError] = useState(false);
-    if (file.ext === 'SVG' || file.name.toLowerCase().endsWith('.svg')) {
-        return (<View style={[
-                bundleStyles.mediaThumbWrap,
-                {
-                    backgroundColor: AppColors.errorCardBg,
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    borderColor: AppColors.errorBorder,
-                },
-            ]}>
-        <Svg width={22} height={22} viewBox="0 0 100 100" fill="none">
-          <Defs>
-            <LinearGradient id="svgGradThumb" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
-              <Stop offset="0" stopColor={AppColors.rose500}/>
-              <Stop offset="1" stopColor={AppColors.rose600}/>
-            </LinearGradient>
-          </Defs>
-          <Circle cx="50" cy="50" r="44" fill="url(#svgGradThumb)"/>
+import Ot,{useState as Q,useEffect as tt,useMemo as q,useCallback as Ae}from"react";import{ActivityIndicator as Tt,Image as Ut,Linking as Ct,Platform as kt,Pressable as He,ScrollView as Te,Share as Nt,StyleSheet as je,Text as C,TextInput as St,View as T}from"react-native";import{useTranslation as jt,t as Ce}from"../../i18n";import G from"../TouchableScale";import K from"../CopyButton";import Ie from"../HighlightText";import Gt from"./FeatureUnderDevNotice";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as S}from"../../styles/AppFonts";import{copyToClipboard as Et}from"../../helpers";import{PackageIcon as Pe,SearchIcon as Bt,ClearIcon as Vt,CircleAlertIcon as Ge,LayersIcon as Mt,TimelineIcon as Jt,LiveStateIcon as Zt,StorageIcon as Ee,MetadataIcon as _t,FolderIcon as Xt,FolderOpenIcon as Yt,TrashIcon as Qt,LightbulbIcon as Je,SparkleIcon as Pt,ClockIcon as To,RefreshCcwIcon as Rt,ExternalLinkIcon as Co,DownloadIcon as Ze,ChevronIcon as So}from"../NetworkIcons";import X,{Path as F,Rect as Ke,Circle as $,Ellipse as $e,G as _,Defs as It,LinearGradient as Ft,Stop as Fe}from"react-native-svg";import{analyzeHostAppBundle as Lt,getCachedBundleAnalysis as Bo,getInitialBundleAnalysis as Vo,getHostScriptURL as vo}from"../../customHooks/bundleAnalyzer";const Mo=({name:k,size:M=28})=>{const R=k.toLowerCase();return R==="react"||R.includes("react-native")&&!R.includes("svg")&&!R.includes("screens")&&!R.includes("gradient")?<T style={[e.pkgLogoWrap,{width:M,height:M,backgroundColor:t.npmDark}]}>
+        <X width={M-6}height={M-6}viewBox="0 0 100 100"fill="none">
+          <$ cx="50"cy="50"r="9"fill={t.reactCyan}/>
+          <$e cx="50"cy="50"rx="42"ry="16"stroke={t.reactCyan}strokeWidth="6"/>
+          <$e cx="50"cy="50"rx="42"ry="16"stroke={t.reactCyan}strokeWidth="6"transform="rotate(60 50 50)"/>
+          <$e cx="50"cy="50"rx="42"ry="16"stroke={t.reactCyan}strokeWidth="6"transform="rotate(120 50 50)"/>
+        </X>
+      </T>:R.includes("navigation")?<T style={[e.pkgLogoWrap,{width:M,height:M,backgroundColor:t.hermesPurple}]}>
+        <X width={M-8}height={M-8}viewBox="0 0 100 100"fill="none">
+          <$ cx="50"cy="50"r="38"stroke={t.white}strokeWidth="8"/>
+          <F d="M50 20 L68 50 L50 80 L32 50 Z"fill={t.reactCyan}/>
+          <$ cx="50"cy="50"r="6"fill={t.white}/>
+        </X>
+      </T>:R.includes("svg")?<T style={[e.pkgLogoWrap,{width:M,height:M,backgroundColor:t.pink400}]}>
+        <X width={M-8}height={M-8}viewBox="0 0 100 100"fill="none">
+          <F d="M20 75 C35 25, 65 25, 80 75"stroke={t.white}strokeWidth="10"strokeLinecap="round"/>
+          <$ cx="20"cy="75"r="8"fill={t.white}/>
+          <$ cx="80"cy="75"r="8"fill={t.white}/>
+          <$ cx="50"cy="38"r="7"fill="#FCE7F3"stroke={t.white}strokeWidth="3"/>
+        </X>
+      </T>:R.includes("axios")?<T style={[e.pkgLogoWrap,{width:M,height:M,backgroundColor:t.expoViolet}]}>
+        <X width={M-6}height={M-6}viewBox="0 0 100 100"fill="none">
+          <F d="M22 75 L50 20 L78 75 M33 58 L67 58"stroke={t.white}strokeWidth="12"strokeLinecap="round"strokeLinejoin="round"/>
+          <$ cx="50"cy="20"r="7"fill={t.reactCyan}/>
+        </X>
+      </T>:R.includes("screens")||R.includes("software-mansion")?<T style={[e.pkgLogoWrap,{width:M,height:M,backgroundColor:t.reanimatedNavy}]}>
+        <X width={M-8}height={M-8}viewBox="0 0 100 100"fill="none">
+          <F d="M50 15 L88 35 L50 55 L12 35 Z"fill={t.sky400}/>
+          <F d="M12 50 L50 70 L88 50"stroke={t.white}strokeWidth="8"strokeLinecap="round"/>
+          <F d="M12 65 L50 85 L88 65"stroke="#93C5FD"strokeWidth="8"strokeLinecap="round"/>
+        </X>
+      </T>:R.includes("gradient")?<T style={[e.pkgLogoWrap,{width:M,height:M,backgroundColor:t.rose600}]}>
+        <X width={M-4}height={M-4}viewBox="0 0 100 100"fill="none">
+          <It>
+            <Ft id="pkgGrad"x1="0"y1="0"x2="100"y2="100"gradientUnits="userSpaceOnUse">
+              <Fe offset="0"stopColor="#FF0080"/>
+              <Fe offset="0.5"stopColor="#7928CA"/>
+              <Fe offset="1"stopColor="#0070F3"/>
+            </Ft>
+          </It>
+          <Ke width="100"height="100"rx="18"fill="url(#pkgGrad)"/>
+        </X>
+      </T>:R.includes("i18n")?<T style={[e.pkgLogoWrap,{width:M,height:M,backgroundColor:t.emerald600}]}>
+        <X width={M-8}height={M-8}viewBox="0 0 100 100"fill="none">
+          <$ cx="50"cy="50"r="38"stroke={t.white}strokeWidth="8"/>
+          <$e cx="50"cy="50"rx="18"ry="38"stroke={t.white}strokeWidth="6"/>
+          <F d="M14 50 L86 50"stroke={t.white}strokeWidth="7"/>
+        </X>
+      </T>:<T style={[e.pkgLogoWrap,{width:M,height:M,backgroundColor:t.npmRed}]}>
+      <X width={M-4}height={M-4}viewBox="0 0 100 100"fill="none">
+        <Ke width="100"height="100"rx="14"fill={t.npmRed}/>
+        <F d="M18 24 H82 V76 H50 V40 H38 V76 H18 Z"fill={t.white}/>
+      </X>
+    </T>},Z=({type:k,size:M=16,color:R=t.purple})=>{const v={stroke:R,strokeWidth:1.7,strokeLinecap:"round",strokeLinejoin:"round"},U=()=>{switch(k){case"folder":return<_>
+            <F d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"{...v}/>
+          </_>;case"ban":return<_>
+            <$ cx="12"cy="12"r="8.5"{...v}/>
+            <F d="M5.5 5.5 18.5 18.5"{...v}/>
+          </_>;case"bolt":return<_>
+            <F d="M13 2 4.5 13.5 H10.5 L9 22 19.5 9.5 H13.5 Z"{...v}/>
+          </_>;case"source":return<_>
+            <F d="M8.5 7 L4 12 L8.5 17"{...v}/>
+            <F d="M15.5 7 L20 12 L15.5 17"{...v}/>
+            <F d="M13.5 4.5 L10.5 19.5"{...v}/>
+          </_>;case"deps":return<_>
+            <Ke x="4"y="4"width="16"height="16"rx="2.5"{...v}/>
+            <F d="M4 9.5 H20"{...v}/>
+            <F d="M9.5 9.5 V20"{...v}/>
+          </_>;case"media":case"image":return<_>
+            <Ke x="3.5"y="4.5"width="17"height="15"rx="2"{...v}/>
+            <$ cx="9"cy="10"r="1.5"{...v}/>
+            <F d="M3.5 17.5 L9.5 12.5 L14 16.5 L17 13.5 L20.5 17.5"{...v}/>
+          </_>;case"overhead":return<_>
+            <$ cx="12"cy="12"r="3.2"{...v}/>
+            <F d="M12 2.5 V5.5 M12 18.5 V21.5 M2.5 12 H5.5 M18.5 12 H21.5 M5.3 5.3 L7.4 7.4 M16.6 16.6 L18.7 18.7 M18.7 5.3 L16.6 7.4 M7.4 16.6 L5.3 18.7"{...v}/>
+          </_>;case"typescript":return<_>
+            <F d="M6.5 3.5 H14 L18.5 8 V20.5 H6.5 Z"{...v}/>
+            <F d="M14 3.5 V8 H18.5"{...v}/>
+            <F d="M9.5 13.5 H15 M12 13.5 V16.5 M9.5 16.5 H13"{...v}/>
+          </_>;case"javascript":return<_>
+            <F d="M9.5 3.5 C7.5 3.5 7.5 6.5 7.5 9 C7.5 11 6.5 12 5 12 C6.5 12 7.5 13 7.5 15 C7.5 17.5 7.5 20.5 9.5 20.5"{...v}/>
+            <F d="M14.5 3.5 C16.5 3.5 16.5 6.5 16.5 9 C16.5 11 17.5 12 19 12 C17.5 12 16.5 13 16.5 15 C16.5 17.5 16.5 20.5 14.5 20.5"{...v}/>
+          </_>;case"font":return<_>
+            <F d="M8 19 L12 5.5 L16 19"{...v}/>
+            <F d="M9.4 14.5 H14.6"{...v}/>
+          </_>;case"json":return<_>
+            <F d="M9 3.5 C7 3.5 7 6 7 8.5 C7 10.5 6 11.5 5 12 C6 12.5 7 13.5 7 15.5 C7 18 7 20.5 9 20.5"{...v}/>
+            <$ cx="12"cy="12"r="1.1"fill={R}/>
+            <F d="M15 3.5 C17 3.5 17 6 17 8.5 C17 10.5 18 11.5 19 12 C18 12.5 17 13.5 17 15.5 C17 18 17 20.5 15 20.5"{...v}/>
+          </_>;default:return null}};return<X width={M}height={M}viewBox="0 0 24 24"fill="none">
+      {U()}
+    </X>},_e=({file:k})=>{const[M,R]=Q(!1);if(k.ext==="SVG"||k.name.toLowerCase().endsWith(".svg"))return<T style={[e.mediaThumbWrap,{backgroundColor:t.errorCardBg,alignItems:"center",justifyContent:"center",borderColor:t.errorBorder}]}>
+        <X width={22}height={22}viewBox="0 0 100 100"fill="none">
+          <It>
+            <Ft id="svgGradThumb"x1="0"y1="0"x2="100"y2="100"gradientUnits="userSpaceOnUse">
+              <Fe offset="0"stopColor={t.rose500}/>
+              <Fe offset="1"stopColor={t.rose600}/>
+            </Ft>
+          </It>
+          <$ cx="50"cy="50"r="44"fill="url(#svgGradThumb)"/>
           
-          <Path d="M25 70 C35 30, 65 30, 75 70" stroke={AppColors.white} strokeWidth="8" strokeLinecap="round"/>
-          <Circle cx="25" cy="70" r="7" fill={AppColors.white}/>
-          <Circle cx="75" cy="70" r="7" fill={AppColors.white}/>
-          <Circle cx="50" cy="40" r="6" fill="#FFE4E6" stroke={AppColors.white} strokeWidth="2"/>
-        </Svg>
-      </View>);
-    }
-    if (file.category === 'image' && file.previewUri && !loadError) {
-        return (<View style={bundleStyles.mediaThumbWrap}>
-        <Image source={{ uri: file.previewUri }} style={bundleStyles.mediaThumbImg} resizeMode="cover" onError={() => setLoadError(true)}/>
-      </View>);
-    }
-    const categoryMeta = CATEGORY_COLORS[file.category] || CATEGORY_COLORS.typescript;
-    return (<View style={[
-            bundleStyles.extChip,
-            {
-                backgroundColor: categoryMeta.bg,
-                borderColor: `${categoryMeta.color}40`,
-            },
-        ]}>
-      <Text style={[bundleStyles.extChipText, { color: categoryMeta.color }]}>
-        {file.ext}
-      </Text>
-    </View>);
-};
-function buildBundleFileTree(files) {
-    const rootMap = new Map();
-    for (const file of files) {
-        const cleanPath = file.path.replace(/^\/+/, '');
-        const parts = cleanPath.split('/').filter(Boolean);
-        if (parts.length === 0)
-            continue;
-        let currentLevel = rootMap;
-        for (let i = 0; i < parts.length; i++) {
-            const part = parts[i];
-            const isFile = i === parts.length - 1;
-            if (!currentLevel.has(part)) {
-                currentLevel.set(part, {
-                    name: part,
-                    fullPath: parts.slice(0, i + 1).join('/'),
-                    isFile,
-                    fileItem: isFile ? file : undefined,
-                    children: new Map(),
-                });
-            }
-            if (!isFile) {
-                currentLevel = currentLevel.get(part).children;
-            }
-        }
-    }
-    function convertMapToNodes(map) {
-        const nodes = [];
-        for (const [, val] of map.entries()) {
-            const children = convertMapToNodes(val.children);
-            const isFolder = !val.isFile;
-            const fileCount = isFolder
-                ? children.reduce((acc, c) => acc + (c.isFolder ? c.fileCount : 1), 0)
-                : 1;
-            const sizeKb = isFolder
-                ? children.reduce((acc, c) => acc + c.sizeKb, 0)
-                : val.fileItem
-                    ? val.fileItem.sizeKb
-                    : 0;
-            nodes.push({
-                id: val.fullPath,
-                name: val.name,
-                fullPath: val.fullPath,
-                isFolder,
-                fileItem: val.fileItem,
-                sizeKb,
-                fileCount,
-                children,
-            });
-        }
-        return nodes.sort((a, b) => {
-            if (a.isFolder && !b.isFolder)
-                return -1;
-            if (!a.isFolder && b.isFolder)
-                return 1;
-            return a.name.localeCompare(b.name);
-        });
-    }
-    return convertMapToNodes(rootMap);
-}
-export const downloadBundleFile = async (file, scriptURL) => {
-    let content = '';
-    try {
-        let devServerOrigin = '';
-        const activeUrl = scriptURL || getHostScriptURL();
-        if (activeUrl && activeUrl.startsWith('http')) {
-            const match = activeUrl.match(/^(https?:\/\/[^/]+)/);
-            if (match) {
-                devServerOrigin = match[1];
-            }
-        }
-        if (devServerOrigin) {
-            const cleanPath = file.path.replace(/^\/+/, '');
-            const url = `${devServerOrigin}/${cleanPath}`;
-            const res = await fetch(url);
-            if (res.ok) {
-                const text = await res.text();
-                if (text && text.length > 0) {
-                    content = text;
-                }
-            }
-        }
-    }
-    catch { }
-    if (!content) {
-        content = `// ─────────────────────────────────────────────────────────────
-// File: ${file.name}
-// Path: ${file.path}
-// Category: ${file.category.toUpperCase()}
-// Size: ${file.sizeKb} KB
-// Status: ${file.status === 'optimal'
-            ? 'Active in Dependency Graph'
-            : 'Not consumed / Static'}
-// Meta: ${file.meta}
-// ─────────────────────────────────────────────────────────────
+          <F d="M25 70 C35 30, 65 30, 75 70"stroke={t.white}strokeWidth="8"strokeLinecap="round"/>
+          <$ cx="25"cy="70"r="7"fill={t.white}/>
+          <$ cx="75"cy="70"r="7"fill={t.white}/>
+          <$ cx="50"cy="40"r="6"fill="#FFE4E6"stroke={t.white}strokeWidth="2"/>
+        </X>
+      </T>;if(k.category==="image"&&k.previewUri&&!M)return<T style={e.mediaThumbWrap}>
+        <Ut source={{uri:k.previewUri}}style={e.mediaThumbImg}resizeMode="cover"onError={()=>R(!0)}/>
+      </T>;const v=Oe[k.category]||Oe.typescript;return<T style={[e.extChip,{backgroundColor:v.bg,borderColor:`${v.color}40`}]}>
+      <C style={[e.extChipText,{color:v.color}]}>
+        {k.ext}
+      </C>
+    </T>};function Po(k){const M=new Map;for(const v of k){const P=v.path.replace(/^\/+/,"").split("/").filter(Boolean);if(P.length===0)continue;let W=M;for(let D=0;D<P.length;D++){const O=P[D],V=D===P.length-1;W.has(O)||W.set(O,{name:O,fullPath:P.slice(0,D+1).join("/"),isFile:V,fileItem:V?v:void 0,children:new Map}),V||(W=W.get(O).children)}}function R(v){const U=[];for(const[,P]of v.entries()){const W=R(P.children),D=!P.isFile,O=D?W.reduce((Y,A)=>Y+(A.isFolder?A.fileCount:1),0):1,V=D?W.reduce((Y,A)=>Y+A.sizeKb,0):P.fileItem?P.fileItem.sizeKb:0;U.push({id:P.fullPath,name:P.name,fullPath:P.fullPath,isFolder:D,fileItem:P.fileItem,sizeKb:V,fileCount:O,children:W})}return U.sort((P,W)=>P.isFolder&&!W.isFolder?-1:!P.isFolder&&W.isFolder?1:P.name.localeCompare(W.name))}return R(M)}export const downloadBundleFile=async(k,M)=>{let R="";try{let v="";const U=M||vo();if(U&&U.startsWith("http")){const P=U.match(/^(https?:\/\/[^/]+)/);P&&(v=P[1])}if(v){const P=k.path.replace(/^\/+/,""),W=`${v}/${P}`,D=await fetch(W);if(D.ok){const O=await D.text();O&&O.length>0&&(R=O)}}}catch{}R||(R=`// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+// File: ${k.name}
+// Path: ${k.path}
+// Category: ${k.category.toUpperCase()}
+// Size: ${k.sizeKb} KB
+// Status: ${k.status==="optimal"?"Active in Dependency Graph":"Not consumed / Static"}
+// Meta: ${k.meta}
+// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 
 export default {
-  id: ${JSON.stringify(file.id)},
-  name: ${JSON.stringify(file.name)},
-  path: ${JSON.stringify(file.path)},
-  category: ${JSON.stringify(file.category)},
-  sizeKb: ${file.sizeKb},
-  meta: ${JSON.stringify(file.meta)},
-  status: ${JSON.stringify(file.status || 'optimal')},
-};
-`;
-    }
-    try {
-        await Share.share(Platform.OS === 'ios'
-            ? {
-                title: file.name,
-                message: content,
-            }
-            : {
-                title: `Download ${file.name}`,
-                message: content,
-            }, {
-            dialogTitle: `Download / Save ${file.name}`,
-        });
-    }
-    catch { }
-    try {
-        copyToClipboard(content, file.name);
-    }
-    catch { }
-};
-const BundleTreeNodeView = ({ node, level, search, totalBundleKb, expandedFolders, toggleFolder, isLastChild, onDownload, }) => {
-    const isExpanded = search ? true : !!expandedFolders[node.fullPath];
-    const isCollapsed = !isExpanded;
-    const indentLeft = level * 16 + 10;
-    if (node.isFolder) {
-        return (<View style={bundleStyles.treeFolderBlock}>
-        <TouchableScale 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 }]}>
-          <View style={bundleStyles.treeRowLeft}>
-            <View style={{ marginRight: 4 }}>
-              <ChevronIcon direction={isCollapsed ? 'right' : 'down'} size={12} color={AppColors.grayTextWeak}/>
-            </View>
-            {isCollapsed ? (<FolderIcon color={AppColors.amber500} size={15}/>) : (<FolderOpenIcon color={AppColors.amber500} size={15}/>)}
-            <HighlightText text={node.name + '/'} search={search} style={bundleStyles.treeFolderName} highlightStyle={bundleStyles.searchHighlight}/>
-            <View style={bundleStyles.treeCountBadge}>
-              <Text style={bundleStyles.treeCountBadgeText}>
-                {node.fileCount}{' '}
-                {node.fileCount === 1 ? t('bundle.file') : t('bundle.files')}
-              </Text>
-            </View>
-          </View>
-
-          <View style={bundleStyles.treeRowRight}>
-            <Text style={bundleStyles.treeFolderSize}>
-              {node.sizeKb >= 1024
-                ? t('bundle.fileSizeMb', {
-                    size: (node.sizeKb / 1024).toFixed(2),
-                })
-                : t('bundle.fileSizeKb', { size: node.sizeKb })}
-            </Text>
-            <CopyButton value={() => ({
-                folder: node.fullPath,
-                sizeKb: node.sizeKb,
-                fileCount: node.fileCount,
-            })} label={t('bundle.copyFileInfo', { name: node.name })}/>
-          </View>
-        </TouchableScale>
-
-        {!isCollapsed && (<View style={bundleStyles.treeChildrenContainer}>
-            {node.children.map((child, cIdx) => (<BundleTreeNodeView key={child.id} node={child} level={level + 1} search={search} totalBundleKb={totalBundleKb} expandedFolders={expandedFolders} toggleFolder={toggleFolder} isLastChild={cIdx === node.children.length - 1} onDownload={onDownload}/>))}
-          </View>)}
-      </View>);
-    }
-    const file = node.fileItem;
-    if (!file)
-        return null;
-    const pctOfTotal = totalBundleKb > 0 ? ((file.sizeKb / totalBundleKb) * 100).toFixed(1) : '0';
-    const isUnused = file.isConsumed === false;
-    return (<View style={[
-            bundleStyles.treeFileRow,
-            { paddingLeft: indentLeft },
-            isUnused && bundleStyles.treeFileRowUnused,
-        ]}>
-      <View style={bundleStyles.treeRowLeft}>
-        <View style={bundleStyles.treeBranchGuide}>
-          <Text style={bundleStyles.treeBranchGuideText}>
-            {isLastChild ? '└' : '├'}
-          </Text>
-        </View>
-
-        <MediaPreviewThumbnail file={file}/>
-
-        <HighlightText text={file.name} search={search} style={bundleStyles.treeFileName} highlightStyle={bundleStyles.searchHighlight}/>
-
-        {isUnused && (<View style={bundleStyles.treeUnusedPill}>
-            <Text style={bundleStyles.treeUnusedPillText}>
-              {t('bundle.notConsumed')}
-            </Text>
-          </View>)}
-      </View>
-
-      <View style={bundleStyles.treeRowRight}>
-        <View style={bundleStyles.treeFileSizeGroup}>
-          <Text style={[
-            bundleStyles.treeFileSizeText,
-            isUnused && { color: AppColors.red600 },
-        ]}>
-            {file.sizeKb >= 1024
-            ? t('bundle.fileSizeMb', { size: (file.sizeKb / 1024).toFixed(2) })
-            : t('bundle.fileSizeKb', { size: file.sizeKb })}
-          </Text>
-          <Text style={bundleStyles.treeFilePctText}>{pctOfTotal}%</Text>
-        </View>
-
-        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
-          {onDownload && (<TouchableScale accessible={true} accessibilityRole="button" accessibilityLabel={`Download source code for ${file.name}`} accessibilityHint="Fetches module source code from Metro dev server" onPress={() => onDownload(file)} style={bundleStyles.treeActionBtn} hitSlop={8}>
-              <DownloadIcon size={13} color={AppColors.sky500}/>
-            </TouchableScale>)}
-
-          <CopyButton value={() => file} label={t('bundle.fileDetailsJson')}/>
-        </View>
-      </View>
-    </View>);
-};
-const CATEGORY_TABS = [
-    { key: 'ALL', labelKey: 'bundle.catAll', iconType: 'folder' },
-    { 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: 'font', labelKey: 'bundle.catFonts', iconType: 'font' },
-    { key: 'json', labelKey: 'bundle.catJson', iconType: 'json' },
-];
-const CATEGORY_COLORS = {
-    image: {
-        label: 'Images & Media',
-        color: AppColors.pink500,
-        bg: AppColors.pink100,
-    },
-    typescript: {
-        label: 'TypeScript',
-        color: AppColors.sky500,
-        bg: AppColors.sky100,
-    },
-    javascript: {
-        label: 'JavaScript',
-        color: AppColors.indigo500,
-        bg: AppColors.indigo50,
-    },
-    font: { label: 'Fonts', color: AppColors.purple500, bg: AppColors.purple100 },
-    json: {
-        label: 'JSON / Data',
-        color: AppColors.emerald500,
-        bg: AppColors.emerald100,
-    },
+  id: ${JSON.stringify(k.id)},
+  name: ${JSON.stringify(k.name)},
+  path: ${JSON.stringify(k.path)},
+  category: ${JSON.stringify(k.category)},
+  sizeKb: ${k.sizeKb},
+  meta: ${JSON.stringify(k.meta)},
+  status: ${JSON.stringify(k.status||"optimal")},
 };
-const BundleTab = React.memo(() => {
-    const { t } = useTranslation();
-    const [activeSubTab, setActiveSubTab] = useState('overview');
-    const [prodPlatform, setProdPlatform] = useState('ios');
-    const [search, setSearch] = useState('');
-    const [activeCategory, setActiveCategory] = useState('ALL');
-    const [analysis, setAnalysis] = useState(() => getCachedBundleAnalysis() || getInitialBundleAnalysis());
-    const [isAnalyzing, setIsAnalyzing] = useState(false);
-    const refreshAnalysis = useCallback(() => {
-        setIsAnalyzing(true);
-        analyzeHostAppBundle(true)
-            .then(result => {
-            setAnalysis(result);
-            setIsAnalyzing(false);
-        })
-            .catch(() => {
-            setIsAnalyzing(false);
-        });
-    }, []);
-    useEffect(() => {
-        let mounted = true;
-        analyzeHostAppBundle()
-            .then(result => {
-            if (mounted) {
-                setAnalysis(result);
-                setIsAnalyzing(false);
-            }
-        })
-            .catch(() => {
-            if (mounted) {
-                setIsAnalyzing(false);
-            }
-        });
-        return () => {
-            mounted = false;
-        };
-    }, []);
-    const isHermes = Boolean(global.HermesInternal);
-    const bundleFiles = useMemo(() => (analysis ? analysis.files : []), [analysis]);
-    const bundlePackages = useMemo(() => (analysis ? analysis.packages : []), [analysis]);
-    const summary = 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 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);
-        const metroPct = analysis?.splitUp?.metroDevOverhead?.pct || 21.0;
-        const appSourceKb = analysis?.splitUp?.appSource?.kb || Math.round(totalKb * 0.15);
-        const appSourcePct = analysis?.splitUp?.appSource?.pct || 15.0;
-        const assetsMediaKb = analysis?.splitUp?.assetsMedia?.kb || Math.round(totalKb * 0.12);
-        const assetsMediaPct = analysis?.splitUp?.assetsMedia?.pct || 12.0;
-        const categories = [
-            {
-                key: 'node_modules',
-                iconType: 'javascript',
-                title: 'NPM Dependencies',
-                targetTab: 'packages',
-                count: analysis?.packageCount || bundlePackages.length || 53,
-                sizeKb: nodeModulesKb,
-                sizeMb: (nodeModulesKb / 1024).toFixed(2),
-                pct: nodeModulesPct,
-                color: AppColors.indigo500,
-                desc: `${analysis?.packageCount || bundlePackages.length || 53} node_modules packages (React Native, React, navigation, axios)`,
-            },
-            {
-                key: 'metro_runtime',
-                iconType: 'bolt',
-                title: 'Metro Dev Runtime',
-                targetTab: 'optimizer',
-                count: 1,
-                sizeKb: metroKb,
-                sizeMb: (metroKb / 1024).toFixed(2),
-                pct: metroPct,
-                color: AppColors.amber500,
-                desc: 'Module loader, polyfills, HMR client, and prelude runtime',
-            },
-            {
-                key: 'app_source',
-                iconType: 'typescript',
-                title: 'App Source Code (TSX/JS)',
-                targetTab: 'files',
-                count: bundleFiles.filter(f => f.category === 'typescript' || f.category === 'javascript').length || 7,
-                sizeKb: appSourceKb,
-                sizeMb: (appSourceKb / 1024).toFixed(2),
-                pct: appSourcePct,
-                color: AppColors.sky500,
-                desc: 'Screens, components, navigation, Redux store, and hooks',
-            },
-            {
-                key: 'assets_media',
-                iconType: 'image',
-                title: 'Images & Static Media',
-                targetTab: 'media',
-                count: bundleFiles.filter(f => f.category === 'image' ||
-                    f.category === 'font' ||
-                    f.category === 'json').length || 3,
-                sizeKb: assetsMediaKb,
-                sizeMb: (assetsMediaKb / 1024).toFixed(2),
-                pct: assetsMediaPct,
-                color: AppColors.pink500,
-                desc: 'Bundled PNG/JPG/SVG drawables, custom fonts, and JSON assets',
-            },
-        ];
-        return {
-            totalKb,
-            totalMb,
-            totalCount: (analysis?.packageCount || 53) + bundleFiles.length + 1,
-            categories,
-            nodeModulesKb,
-            nodeModulesPct,
-            metroKb,
-            metroPct,
-            appSourceKb,
-            appSourcePct,
-            assetsMediaKb,
-            assetsMediaPct,
-            images: {
-                count: bundleFiles.filter(f => f.category === 'image').length,
-                kb: assetsMediaKb,
-                pct: assetsMediaPct,
-            },
-            ts: {
-                count: bundleFiles.filter(f => f.category === 'typescript').length,
-                kb: appSourceKb,
-                pct: appSourcePct,
-            },
-            js: {
-                count: (analysis?.packageCount || 53) + 1,
-                kb: nodeModulesKb + metroKb,
-                pct: Number((nodeModulesPct + metroPct).toFixed(1)),
-            },
-            fonts: {
-                count: bundleFiles.filter(f => f.category === 'font').length,
-                kb: 0,
-                pct: 0,
-            },
-            json: {
-                count: bundleFiles.filter(f => f.category === 'json').length,
-                kb: Math.round(assetsMediaKb * 0.1),
-                pct: Number((assetsMediaPct * 0.1).toFixed(1)),
-            },
-        };
-    }, [analysis, bundleFiles, bundlePackages]);
-    const filteredFiles = useMemo(() => {
-        return bundleFiles.filter(file => {
-            const matchSearch = !search ||
-                file.name.toLowerCase().includes(search.toLowerCase()) ||
-                file.path.toLowerCase().includes(search.toLowerCase()) ||
-                file.ext.toLowerCase().includes(search.toLowerCase()) ||
-                file.meta.toLowerCase().includes(search.toLowerCase());
-            const matchCategory = activeCategory === 'ALL'
-                ? true
-                : activeCategory === 'UNUSED'
-                    ? file.isConsumed === false
-                    : activeCategory === 'CONSUMED'
-                        ? file.isConsumed !== false
-                        : file.category === activeCategory;
-            return matchSearch && matchCategory;
-        });
-    }, [search, activeCategory, bundleFiles]);
-    const filteredTotalKb = useMemo(() => {
-        return filteredFiles.reduce((acc, f) => acc + f.sizeKb, 0);
-    }, [filteredFiles]);
-    const [filesViewMode, setFilesViewMode] = useState('tree');
-    const [expandedFolders, setExpandedFolders] = useState({});
-    const fileTreeNodes = useMemo(() => {
-        return buildBundleFileTree(filteredFiles);
-    }, [filteredFiles]);
-    useEffect(() => {
-        if (fileTreeNodes.length > 0 && Object.keys(expandedFolders).length === 0) {
-            const initial = {};
-            fileTreeNodes.forEach(node => {
-                if (node.isFolder) {
-                    initial[node.fullPath] = true;
-                    node.children.forEach(child => {
-                        if (child.isFolder) {
-                            initial[child.fullPath] = true;
-                        }
-                    });
-                }
-            });
-            setExpandedFolders(initial);
-        }
-    }, [fileTreeNodes]);
-    const toggleFolder = useCallback((path) => {
-        setExpandedFolders(prev => ({
-            ...prev,
-            [path]: !prev[path],
-        }));
-    }, []);
-    const expandAllFolders = useCallback(() => {
-        const all = {};
-        function collect(nodes) {
-            for (const n of nodes) {
-                if (n.isFolder) {
-                    all[n.fullPath] = true;
-                    collect(n.children);
-                }
-            }
-        }
-        collect(fileTreeNodes);
-        setExpandedFolders(all);
-    }, [fileTreeNodes]);
-    const collapseAllFolders = useCallback(() => {
-        setExpandedFolders({});
-    }, []);
-    const filteredPackages = useMemo(() => {
-        if (!search)
-            return bundlePackages;
-        const q = search.toLowerCase();
-        return bundlePackages.filter(pkg => pkg.name.toLowerCase().includes(q) ||
-            pkg.description.toLowerCase().includes(q) ||
-            pkg.category.toLowerCase().includes(q));
-    }, [search, bundlePackages]);
-    const packagesTotalKb = useMemo(() => {
-        return filteredPackages.reduce((acc, p) => acc + p.sizeKb, 0);
-    }, [filteredPackages]);
-    const mediaFiles = useMemo(() => {
-        return bundleFiles.filter(f => f.category === 'image' || f.category === 'font');
-    }, [bundleFiles]);
-    const mediaTotalKb = useMemo(() => {
-        return mediaFiles.reduce((acc, m) => acc + m.sizeKb, 0);
-    }, [mediaFiles]);
-    const subTabs = [
-        {
-            key: 'overview',
-            label: t('bundle.tabOverview'),
-            icon: (isActive) => (<LiveStateIcon color={isActive ? AppColors.white : AppColors.purple} size={12}/>),
-        },
-        {
-            key: 'production',
-            label: t('bundle.tabProduction', { count: 3 }),
-            icon: (isActive) => (<TimelineIcon color={isActive ? AppColors.white : AppColors.purple} size={12}/>),
-        },
-        {
-            key: 'files',
-            label: t('bundle.tabFiles', { count: bundleFiles.length }),
-            icon: (isActive) => (<LayersIcon color={isActive ? AppColors.white : AppColors.purple} size={12}/>),
-        },
-        {
-            key: 'packages',
-            label: t('bundle.tabPackages', { count: bundlePackages.length }),
-            icon: (isActive) => (<PackageIcon color={isActive ? AppColors.white : AppColors.purple} size={12}/>),
-        },
-        {
-            key: 'media',
-            label: t('bundle.tabMedia', { count: mediaFiles.length }),
-            icon: (isActive) => (<StorageIcon color={isActive ? AppColors.white : AppColors.purple} size={12}/>),
-        },
-        {
-            key: 'optimizer',
-            label: t('bundle.tabOptimizer'),
-            icon: (isActive) => (<MetadataIcon color={isActive ? AppColors.white : AppColors.purple} size={12}/>),
-        },
-    ];
-    return (<View style={{ flex: 1, backgroundColor: AppColors.grayBackground }}>
+`);try{await Nt.share(kt.OS==="ios"?{title:k.name,message:R}:{title:`Download ${k.name}`,message:R},{dialogTitle:`Download / Save ${k.name}`})}catch{}try{Et(R,k.name)}catch{}};const Dt=({node:k,level:M,search:R,totalBundleKb:v,expandedFolders:U,toggleFolder:P,isLastChild:W,onDownload:D})=>{const O=R?!0:!!U[k.fullPath],V=!O,Y=M*16+10;if(k.isFolder)return<T style={e.treeFolderBlock}>
+        <G accessible={!0}accessibilityRole="button"accessibilityLabel={`Folder ${k.name}, ${k.fileCount} ${k.fileCount===1?"file":"files"}, ${k.sizeKb>=1024?`${(k.sizeKb/1024).toFixed(2)} MB`:`${k.sizeKb} KB`}`}accessibilityState={{expanded:O}}accessibilityHint="Double tap to expand or collapse folder"onPress={()=>P(k.fullPath)}style={[e.treeFolderRow,{paddingLeft:Y}]}>
+          <T style={e.treeRowLeft}>
+            <T style={{marginRight:4}}>
+              <So direction={V?"right":"down"}size={12}color={t.grayTextWeak}/>
+            </T>
+            {V?<Xt color={t.amber500}size={15}/>:<Yt color={t.amber500}size={15}/>}
+            <Ie text={k.name+"/"}search={R}style={e.treeFolderName}highlightStyle={e.searchHighlight}/>
+            <T style={e.treeCountBadge}>
+              <C style={e.treeCountBadgeText}>
+                {k.fileCount}{" "}
+                {k.fileCount===1?Ce("bundle.file"):Ce("bundle.files")}
+              </C>
+            </T>
+          </T>
+
+          <T style={e.treeRowRight}>
+            <C style={e.treeFolderSize}>
+              {k.sizeKb>=1024?Ce("bundle.fileSizeMb",{size:(k.sizeKb/1024).toFixed(2)}):Ce("bundle.fileSizeKb",{size:k.sizeKb})}
+            </C>
+            <K value={()=>({folder:k.fullPath,sizeKb:k.sizeKb,fileCount:k.fileCount})}label={Ce("bundle.copyFileInfo",{name:k.name})}/>
+          </T>
+        </G>
+
+        {!V&&<T style={e.treeChildrenContainer}>
+            {k.children.map((E,I)=><Dt key={E.id}node={E}level={M+1}search={R}totalBundleKb={v}expandedFolders={U}toggleFolder={P}isLastChild={I===k.children.length-1}onDownload={D}/>)}
+          </T>}
+      </T>;const A=k.fileItem;if(!A)return null;const Be=v>0?(A.sizeKb/v*100).toFixed(1):"0",ze=A.isConsumed===!1;return<T style={[e.treeFileRow,{paddingLeft:Y},ze&&e.treeFileRowUnused]}>
+      <T style={e.treeRowLeft}>
+        <T style={e.treeBranchGuide}>
+          <C style={e.treeBranchGuideText}>
+            {W?"\u2514":"\u251C"}
+          </C>
+        </T>
+
+        <_e file={A}/>
+
+        <Ie text={A.name}search={R}style={e.treeFileName}highlightStyle={e.searchHighlight}/>
+
+        {ze&&<T style={e.treeUnusedPill}>
+            <C style={e.treeUnusedPillText}>
+              {Ce("bundle.notConsumed")}
+            </C>
+          </T>}
+      </T>
+
+      <T style={e.treeRowRight}>
+        <T style={e.treeFileSizeGroup}>
+          <C style={[e.treeFileSizeText,ze&&{color:t.red600}]}>
+            {A.sizeKb>=1024?Ce("bundle.fileSizeMb",{size:(A.sizeKb/1024).toFixed(2)}):Ce("bundle.fileSizeKb",{size:A.sizeKb})}
+          </C>
+          <C style={e.treeFilePctText}>{Be}%</C>
+        </T>
+
+        <T style={{flexDirection:"row",alignItems:"center",gap:5}}>
+          {D&&<G accessible={!0}accessibilityRole="button"accessibilityLabel={`Download source code for ${A.name}`}accessibilityHint="Fetches module source code from Metro dev server"onPress={()=>D(A)}style={e.treeActionBtn}hitSlop={8}>
+              <Ze size={13}color={t.sky500}/>
+            </G>}
+
+          <K value={()=>A}label={Ce("bundle.fileDetailsJson")}/>
+        </T>
+      </T>
+    </T>},Ro=[{key:"ALL",labelKey:"bundle.catAll",iconType:"folder"},{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:"font",labelKey:"bundle.catFonts",iconType:"font"},{key:"json",labelKey:"bundle.catJson",iconType:"json"}],Oe={image:{label:"Images & Media",color:t.pink500,bg:t.pink100},typescript:{label:"TypeScript",color:t.sky500,bg:t.sky100},javascript:{label:"JavaScript",color:t.indigo500,bg:t.indigo50},font:{label:"Fonts",color:t.purple500,bg:t.purple100},json:{label:"JSON / Data",color:t.emerald500,bg:t.emerald100}},Io=Ot.memo(()=>{const{t:k}=jt(),[M,R]=Q("overview"),[v,U]=Q("ios"),[P,W]=Q(""),[D,O]=Q("ALL"),[V,Y]=Q(()=>Bo()||Vo()),[A,Be]=Q(!1),ze=Ae(()=>{Be(!0),Lt(!0).then(o=>{Y(o),Be(!1)}).catch(()=>{Be(!1)})},[]);tt(()=>{let o=!0;return Lt().then(z=>{o&&(Y(z),Be(!1))}).catch(()=>{o&&Be(!1)}),()=>{o=!1}},[]);const E=!!global.HermesInternal,I=q(()=>V?V.files:[],[V]),J=q(()=>V?V.packages:[],[V]),B=q(()=>{const o=V?.totalDevKb||(V?.totalDevBytes?Math.round(V.totalDevBytes/1024):6144),z=V?.totalDevMb?V.totalDevMb.toFixed(2):(o/1024).toFixed(2),L=V?.splitUp?.nodeModules?.kb||Math.round(o*.52),H=V?.splitUp?.nodeModules?.pct||52,N=V?.splitUp?.metroDevOverhead?.kb||Math.round(o*.21),Ue=V?.splitUp?.metroDevOverhead?.pct||21,De=V?.splitUp?.appSource?.kb||Math.round(o*.15),Ne=V?.splitUp?.appSource?.pct||15,Re=V?.splitUp?.assetsMedia?.kb||Math.round(o*.12),We=V?.splitUp?.assetsMedia?.pct||12,$t=[{key:"node_modules",iconType:"javascript",title:"NPM Dependencies",targetTab:"packages",count:V?.packageCount||J.length||53,sizeKb:L,sizeMb:(L/1024).toFixed(2),pct:H,color:t.indigo500,desc:`${V?.packageCount||J.length||53} node_modules packages (React Native, React, navigation, axios)`},{key:"metro_runtime",iconType:"bolt",title:"Metro Dev Runtime",targetTab:"optimizer",count:1,sizeKb:N,sizeMb:(N/1024).toFixed(2),pct:Ue,color:t.amber500,desc:"Module loader, polyfills, HMR client, and prelude runtime"},{key:"app_source",iconType:"typescript",title:"App Source Code (TSX/JS)",targetTab:"files",count:I.filter(j=>j.category==="typescript"||j.category==="javascript").length||7,sizeKb:De,sizeMb:(De/1024).toFixed(2),pct:Ne,color:t.sky500,desc:"Screens, components, navigation, Redux store, and hooks"},{key:"assets_media",iconType:"image",title:"Images & Static Media",targetTab:"media",count:I.filter(j=>j.category==="image"||j.category==="font"||j.category==="json").length||3,sizeKb:Re,sizeMb:(Re/1024).toFixed(2),pct:We,color:t.pink500,desc:"Bundled PNG/JPG/SVG drawables, custom fonts, and JSON assets"}];return{totalKb:o,totalMb:z,totalCount:(V?.packageCount||53)+I.length+1,categories:$t,nodeModulesKb:L,nodeModulesPct:H,metroKb:N,metroPct:Ue,appSourceKb:De,appSourcePct:Ne,assetsMediaKb:Re,assetsMediaPct:We,images:{count:I.filter(j=>j.category==="image").length,kb:Re,pct:We},ts:{count:I.filter(j=>j.category==="typescript").length,kb:De,pct:Ne},js:{count:(V?.packageCount||53)+1,kb:L+N,pct:Number((H+Ue).toFixed(1))},fonts:{count:I.filter(j=>j.category==="font").length,kb:0,pct:0},json:{count:I.filter(j=>j.category==="json").length,kb:Math.round(Re*.1),pct:Number((We*.1).toFixed(1))}}},[V,I,J]),ke=q(()=>I.filter(o=>{const z=!P||o.name.toLowerCase().includes(P.toLowerCase())||o.path.toLowerCase().includes(P.toLowerCase())||o.ext.toLowerCase().includes(P.toLowerCase())||o.meta.toLowerCase().includes(P.toLowerCase()),L=D==="ALL"?!0:D==="UNUSED"?o.isConsumed===!1:D==="CONSUMED"?o.isConsumed!==!1:o.category===D;return z&&L}),[P,D,I]),qe=q(()=>ke.reduce((o,z)=>o+z.sizeKb,0),[ke]),[Se,Xe]=Q("tree"),[Ye,Le]=Q({}),Ve=q(()=>Po(ke),[ke]);tt(()=>{if(Ve.length>0&&Object.keys(Ye).length===0){const o={};Ve.forEach(z=>{z.isFolder&&(o[z.fullPath]=!0,z.children.forEach(L=>{L.isFolder&&(o[L.fullPath]=!0)}))}),Le(o)}},[Ve]);const Wt=Ae(o=>{Le(z=>({...z,[o]:!z[o]}))},[]),At=Ae(()=>{const o={};function z(L){for(const H of L)H.isFolder&&(o[H.fullPath]=!0,z(H.children))}z(Ve),Le(o)},[Ve]),Ht=Ae(()=>{Le({})},[]),Me=q(()=>{if(!P)return J;const o=P.toLowerCase();return J.filter(z=>z.name.toLowerCase().includes(o)||z.description.toLowerCase().includes(o)||z.category.toLowerCase().includes(o))},[P,J]),Qe=q(()=>Me.reduce((o,z)=>o+z.sizeKb,0),[Me]),ve=q(()=>I.filter(o=>o.category==="image"||o.category==="font"),[I]),et=q(()=>ve.reduce((o,z)=>o+z.sizeKb,0),[ve]),Kt=[{key:"overview",label:k("bundle.tabOverview"),icon:o=><Zt color={o?t.white:t.purple}size={12}/>},{key:"production",label:k("bundle.tabProduction",{count:3}),icon:o=><Jt color={o?t.white:t.purple}size={12}/>},{key:"files",label:k("bundle.tabFiles",{count:I.length}),icon:o=><Mt color={o?t.white:t.purple}size={12}/>},{key:"packages",label:k("bundle.tabPackages",{count:J.length}),icon:o=><Pe color={o?t.white:t.purple}size={12}/>},{key:"media",label:k("bundle.tabMedia",{count:ve.length}),icon:o=><Ee color={o?t.white:t.purple}size={12}/>},{key:"optimizer",label:k("bundle.tabOptimizer"),icon:o=><_t color={o?t.white:t.purple}size={12}/>}];return<T style={{flex:1,backgroundColor:t.grayBackground}}>
       
-      <View style={bundleStyles.topTabWrap}>
-        <ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ flex: 1 }} contentContainerStyle={bundleStyles.subTabsScroll}>
-          {subTabs.map(tab => {
-            const isActive = activeSubTab === tab.key;
-            return (<TouchableScale key={tab.key} accessible={true} accessibilityRole="tab" accessibilityLabel={`${tab.label} tab`} accessibilityState={{ selected: isActive }} accessibilityHint={`Switches to ${tab.label} tab`} onPress={() => setActiveSubTab(tab.key)} style={[
-                    bundleStyles.subTabPill,
-                    isActive && bundleStyles.subTabPillActive,
-                ]}>
-                {tab.icon(isActive)}
-                <Text style={[
-                    bundleStyles.subTabPillText,
-                    isActive && bundleStyles.subTabPillTextActive,
-                ]}>
-                  {tab.label}
-                </Text>
-              </TouchableScale>);
-        })}
-        </ScrollView>
-        <TouchableScale 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 ? (<ActivityIndicator size="small" color={AppColors.brandPurple}/>) : (<RefreshCcwIcon color={AppColors.brandPurple} size={14}/>)}
-        </TouchableScale>
-      </View>
-
-      <FeatureUnderDevNotice featureName="Metro Bundle Analyzer"/>
+      <T style={e.topTabWrap}>
+        <Te horizontal showsHorizontalScrollIndicator={!1}style={{flex:1}}contentContainerStyle={e.subTabsScroll}>
+          {Kt.map(o=>{const z=M===o.key;return<G key={o.key}accessible={!0}accessibilityRole="tab"accessibilityLabel={`${o.label} tab`}accessibilityState={{selected:z}}accessibilityHint={`Switches to ${o.label} tab`}onPress={()=>R(o.key)}style={[e.subTabPill,z&&e.subTabPillActive]}>
+                {o.icon(z)}
+                <C style={[e.subTabPillText,z&&e.subTabPillTextActive]}>
+                  {o.label}
+                </C>
+              </G>})}
+        </Te>
+        <G accessible={!0}accessibilityRole="button"accessibilityLabel={A?"Analyzing Metro bundle":"Reload bundle analysis"}accessibilityHint="Re-probes Metro dev server and refreshes bundle statistics"onPress={ze}style={e.reloadButton}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+          {A?<Tt size="small"color={t.brandPurple}/>:<Rt color={t.brandPurple}size={14}/>}
+        </G>
+      </T>
+
+      <Gt featureName="Metro Bundle Analyzer"/>
 
       
       
       
-      {activeSubTab === 'overview' && (<ScrollView style={{ flex: 1 }} contentContainerStyle={bundleStyles.contentContainer} keyboardShouldPersistTaps="handled">
+      {M==="overview"&&<Te style={{flex:1}}contentContainerStyle={e.contentContainer}keyboardShouldPersistTaps="handled">
           
-          <View style={bundleStyles.heroCard}>
-            <View style={bundleStyles.heroTopRow}>
-              <View style={bundleStyles.heroIconWrap}>
-                <PackageIcon color={AppColors.brandPurple} size={24}/>
-              </View>
-              <View style={{ flex: 1 }}>
-                <Text style={bundleStyles.heroTitle}>
-                  {t('bundle.heroTitle')}
-                </Text>
-                {analysis?.isLive && analysis.scriptURL ? (<View style={{ marginTop: 4, gap: 4 }}>
-                    <Text style={bundleStyles.heroSubtitle}>
-                      {t('bundle.heroSubtitle')}
-                    </Text>
-                    <Pressable accessible={true} accessibilityRole="link" accessibilityLabel={`Live Metro bundle URL: ${analysis.scriptURL}`} accessibilityHint="Opens Metro bundle script in browser" style={{
-                    backgroundColor: `${AppColors.skyBlue}10`,
-                    borderColor: `${AppColors.skyBlue}30`,
-                    borderWidth: 1,
-                    borderRadius: 8,
-                    padding: 8,
-                    marginTop: 2,
-                }} onPress={() => Linking.openURL(analysis.scriptURL)}>
-                      <View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                    marginBottom: 3,
-                }}>
-                        <View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 4,
-                }}>
-                          <ExternalLinkIcon color={AppColors.skyBlue} size={11}/>
-                          <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 9.5,
-                    color: AppColors.skyBlue,
-                    letterSpacing: 0.3,
-                    textTransform: 'uppercase',
-                }}>
+          <T style={e.heroCard}>
+            <T style={e.heroTopRow}>
+              <T style={e.heroIconWrap}>
+                <Pe color={t.brandPurple}size={24}/>
+              </T>
+              <T style={{flex:1}}>
+                <C style={e.heroTitle}>
+                  {k("bundle.heroTitle")}
+                </C>
+                {V?.isLive&&V.scriptURL?<T style={{marginTop:4,gap:4}}>
+                    <C style={e.heroSubtitle}>
+                      {k("bundle.heroSubtitle")}
+                    </C>
+                    <He accessible={!0}accessibilityRole="link"accessibilityLabel={`Live Metro bundle URL: ${V.scriptURL}`}accessibilityHint="Opens Metro bundle script in browser"style={{backgroundColor:`${t.skyBlue}10`,borderColor:`${t.skyBlue}30`,borderWidth:1,borderRadius:8,padding:8,marginTop:2}}onPress={()=>Ct.openURL(V.scriptURL)}>
+                      <T style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:3}}>
+                        <T style={{flexDirection:"row",alignItems:"center",gap:4}}>
+                          <Co color={t.skyBlue}size={11}/>
+                          <C style={{fontFamily:S.interBold,fontSize:9.5,color:t.skyBlue,letterSpacing:.3,textTransform:"uppercase"}}>
                             Live Metro URL
-                          </Text>
-                        </View>
-                        <Text style={{
-                    fontFamily: AppFonts.interRegular,
-                    fontSize: 9.5,
-                    color: AppColors.grayTextWeak,
-                }}>
-                          {analysis.scriptURL.length} chars
-                        </Text>
-                      </View>
-                      <Text selectable={true} numberOfLines={1} ellipsizeMode="tail" style={{
-                    fontFamily: AppFonts.interMedium,
-                    fontSize: 11,
-                    color: AppColors.skyBlue,
-                    textDecorationLine: 'underline',
-                    lineHeight: 16,
-                }}>
-                        {analysis.scriptURL}
-                      </Text>
-                    </Pressable>
-                  </View>) : (<Text style={bundleStyles.heroSubtitle}>
-                    {t('bundle.heroSubtitle')}
-                  </Text>)}
-              </View>
-              <CopyButton value={() => ({ ...summary, bundle: analysis })} label={t('bundle.bundleOverviewJson')}/>
-            </View>
+                          </C>
+                        </T>
+                        <C style={{fontFamily:S.interRegular,fontSize:9.5,color:t.grayTextWeak}}>
+                          {V.scriptURL.length} chars
+                        </C>
+                      </T>
+                      <C selectable={!0}numberOfLines={1}ellipsizeMode="tail"style={{fontFamily:S.interMedium,fontSize:11,color:t.skyBlue,textDecorationLine:"underline",lineHeight:16}}>
+                        {V.scriptURL}
+                      </C>
+                    </He>
+                  </T>:<C style={e.heroSubtitle}>
+                    {k("bundle.heroSubtitle")}
+                  </C>}
+              </T>
+              <K value={()=>({...B,bundle:V})}label={k("bundle.bundleOverviewJson")}/>
+            </T>
 
             
-            <View style={bundleStyles.metricsGrid}>
-              <View style={bundleStyles.metricBox}>
-                <Text style={bundleStyles.metricLabel}>
-                  {t('bundle.devBundleSize')}
-                </Text>
-                <Text style={bundleStyles.metricValue}>
-                  {t('bundle.mbValue', {
-                size: analysis ? analysis.totalDevMb : summary.totalMb,
-            })}
-                </Text>
-                <Text style={bundleStyles.metricHint}>
-                  {analysis
-                ? t('bundle.devBundleHint', {
-                    kb: analysis.totalDevKb,
-                    modules: analysis.moduleCount,
-                })
-                : t('bundle.trackedFilesHint', { count: bundleFiles.length })}
-                </Text>
-              </View>
-
-              <View style={bundleStyles.metricBox}>
-                <Text style={bundleStyles.metricLabel}>
-                  {t('bundle.imagesMedia')}
-                </Text>
-                <Text style={[
-                bundleStyles.metricValue,
-                { color: AppColors.pink500 },
-            ]}>
-                  {t('bundle.fileSizeKb', { size: summary.images.kb })}
-                </Text>
-                <Text style={bundleStyles.metricHint}>
-                  {t('bundle.pctOfTrackedAssets', { pct: summary.images.pct })}
-                </Text>
-              </View>
-
-              <View style={bundleStyles.metricBox}>
-                <Text style={bundleStyles.metricLabel}>
-                  {t('bundle.tsJsSource')}
-                </Text>
-                <Text style={[bundleStyles.metricValue, { color: AppColors.sky500 }]}>
-                  {t('bundle.fileSizeKb', {
-                size: summary.ts.kb + summary.js.kb,
-            })}
-                </Text>
-                <Text style={bundleStyles.metricHint}>
-                  {t('bundle.pctOfTrackedAssets', {
-                pct: (summary.ts.pct + summary.js.pct).toFixed(1),
-            })}
-                </Text>
-              </View>
-
-              <View style={bundleStyles.metricBox}>
-                <Text style={bundleStyles.metricLabel}>
-                  {t('bundle.jsEngine')}
-                </Text>
-                <View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 5,
-                marginTop: 2,
-            }}>
-                  <View style={[
-                bundleStyles.statusIndicator,
-                {
-                    backgroundColor: isHermes
-                        ? AppColors.greenColor
-                        : AppColors.darkOrange,
-                },
-            ]}/>
-                  <Text style={bundleStyles.metricValue}>
-                    {isHermes ? 'Hermes' : 'JSC'}
-                  </Text>
-                </View>
-                <Text style={bundleStyles.metricHint}>
-                  {isHermes ? t('bundle.bytecodeAot') : t('bundle.standard')}
-                </Text>
-              </View>
-            </View>
-          </View>
+            <T style={e.metricsGrid}>
+              <T style={e.metricBox}>
+                <C style={e.metricLabel}>
+                  {k("bundle.devBundleSize")}
+                </C>
+                <C style={e.metricValue}>
+                  {k("bundle.mbValue",{size:V?V.totalDevMb:B.totalMb})}
+                </C>
+                <C style={e.metricHint}>
+                  {V?k("bundle.devBundleHint",{kb:V.totalDevKb,modules:V.moduleCount}):k("bundle.trackedFilesHint",{count:I.length})}
+                </C>
+              </T>
+
+              <T style={e.metricBox}>
+                <C style={e.metricLabel}>
+                  {k("bundle.imagesMedia")}
+                </C>
+                <C style={[e.metricValue,{color:t.pink500}]}>
+                  {k("bundle.fileSizeKb",{size:B.images.kb})}
+                </C>
+                <C style={e.metricHint}>
+                  {k("bundle.pctOfTrackedAssets",{pct:B.images.pct})}
+                </C>
+              </T>
+
+              <T style={e.metricBox}>
+                <C style={e.metricLabel}>
+                  {k("bundle.tsJsSource")}
+                </C>
+                <C style={[e.metricValue,{color:t.sky500}]}>
+                  {k("bundle.fileSizeKb",{size:B.ts.kb+B.js.kb})}
+                </C>
+                <C style={e.metricHint}>
+                  {k("bundle.pctOfTrackedAssets",{pct:(B.ts.pct+B.js.pct).toFixed(1)})}
+                </C>
+              </T>
+
+              <T style={e.metricBox}>
+                <C style={e.metricLabel}>
+                  {k("bundle.jsEngine")}
+                </C>
+                <T style={{flexDirection:"row",alignItems:"center",gap:5,marginTop:2}}>
+                  <T style={[e.statusIndicator,{backgroundColor:E?t.greenColor:t.darkOrange}]}/>
+                  <C style={e.metricValue}>
+                    {E?"Hermes":"JSC"}
+                  </C>
+                </T>
+                <C style={e.metricHint}>
+                  {k(E?"bundle.bytecodeAot":"bundle.standard")}
+                </C>
+              </T>
+            </T>
+          </T>
 
           
-          {analysis && !analysis.isLive && (<View style={bundleStyles.liveWarningCard}>
-              <View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 6,
-                    flex: 1,
-                }}>
-                <CircleAlertIcon color={AppColors.amber700} size={16}/>
-                <View style={{ flex: 1 }}>
-                  <Text style={bundleStyles.liveWarningTitle}>
-                    {t('bundle.liveAnalysisUnavailable')}
-                  </Text>
-                  <Text style={bundleStyles.liveWarningDesc}>
-                    {t('bundle.liveAnalysisUnavailableSub')}
-                  </Text>
-                </View>
-                <TouchableScale onPress={refreshAnalysis} style={{
-                    backgroundColor: `${AppColors.amber700}18`,
-                    paddingHorizontal: 8,
-                    paddingVertical: 5,
-                    borderRadius: 6,
-                    borderWidth: 1,
-                    borderColor: `${AppColors.amber700}30`,
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 4,
-                }}>
-                  {isAnalyzing ? (<ActivityIndicator size="small" color={AppColors.amber700}/>) : (<>
-                      <RefreshCcwIcon color={AppColors.amber700} size={11}/>
-                      <Text style={{
-                        fontSize: 10.5,
-                        fontFamily: AppFonts.interBold,
-                        color: AppColors.amber700,
-                    }}>
+          {V&&!V.isLive&&<T style={e.liveWarningCard}>
+              <T style={{flexDirection:"row",alignItems:"center",gap:6,flex:1}}>
+                <Ge color={t.amber700}size={16}/>
+                <T style={{flex:1}}>
+                  <C style={e.liveWarningTitle}>
+                    {k("bundle.liveAnalysisUnavailable")}
+                  </C>
+                  <C style={e.liveWarningDesc}>
+                    {k("bundle.liveAnalysisUnavailableSub")}
+                  </C>
+                </T>
+                <G onPress={ze}style={{backgroundColor:`${t.amber700}18`,paddingHorizontal:8,paddingVertical:5,borderRadius:6,borderWidth:1,borderColor:`${t.amber700}30`,flexDirection:"row",alignItems:"center",gap:4}}>
+                  {A?<Tt size="small"color={t.amber700}/>:<>
+                      <Rt color={t.amber700}size={11}/>
+                      <C style={{fontSize:10.5,fontFamily:S.interBold,color:t.amber700}}>
                         Retry
-                      </Text>
-                    </>)}
-                </TouchableScale>
-              </View>
-            </View>)}
+                      </C>
+                    </>}
+                </G>
+              </T>
+            </T>}
 
           
-          <View style={bundleStyles.sectionCard}>
-            <View style={bundleStyles.sectionHeaderRow}>
-              <View style={{ flex: 1, paddingRight: 4 }}>
-                <Text style={bundleStyles.sectionTitle}>
-                  {t('bundle.treemapTitle')}
-                </Text>
-                <Text style={bundleStyles.sectionSub}>
-                  {t('bundle.treemapSub', { mb: summary.totalMb })}
-                </Text>
-              </View>
-              <CopyButton value={() => ({
-                totalMb: summary.totalMb,
-                totalKb: summary.totalKb,
-                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,
-                },
-            })} label={t('bundle.treemapJson')}/>
-            </View>
+          <T style={e.sectionCard}>
+            <T style={e.sectionHeaderRow}>
+              <T style={{flex:1,paddingRight:4}}>
+                <C style={e.sectionTitle}>
+                  {k("bundle.treemapTitle")}
+                </C>
+                <C style={e.sectionSub}>
+                  {k("bundle.treemapSub",{mb:B.totalMb})}
+                </C>
+              </T>
+              <K value={()=>({totalMb:B.totalMb,totalKb:B.totalKb,nodeModules:{kb:B.nodeModulesKb,pct:B.nodeModulesPct},metroRuntime:{kb:B.metroKb,pct:B.metroPct},appSource:{kb:B.appSourceKb,pct:B.appSourcePct},assetsMedia:{kb:B.assetsMediaKb,pct:B.assetsMediaPct}})}label={k("bundle.treemapJson")}/>
+            </T>
 
             
-            <View style={bundleStyles.treemapBar}>
-              <View style={{
-                flex: summary.nodeModulesPct,
-                backgroundColor: AppColors.indigo500,
-                height: 16,
-            }}/>
-              <View style={{
-                flex: summary.metroPct,
-                backgroundColor: AppColors.amber500,
-                height: 16,
-            }}/>
-              <View style={{
-                flex: summary.appSourcePct,
-                backgroundColor: AppColors.sky500,
-                height: 16,
-            }}/>
-              <View style={{
-                flex: summary.assetsMediaPct,
-                backgroundColor: AppColors.pink500,
-                height: 16,
-            }}/>
-            </View>
+            <T style={e.treemapBar}>
+              <T style={{flex:B.nodeModulesPct,backgroundColor:t.indigo500,height:16}}/>
+              <T style={{flex:B.metroPct,backgroundColor:t.amber500,height:16}}/>
+              <T style={{flex:B.appSourcePct,backgroundColor:t.sky500,height:16}}/>
+              <T style={{flex:B.assetsMediaPct,backgroundColor:t.pink500,height:16}}/>
+            </T>
 
             
-            <View style={bundleStyles.legendGrid}>
-              <View style={bundleStyles.legendItem}>
-                <BundleCategoryIcon type="javascript" size={13} color={AppColors.indigo500}/>
-                <Text style={bundleStyles.legendText}>
-                  Node Modules{' '}
-                  <Text style={bundleStyles.legendVal}>
-                    {summary.nodeModulesKb >= 1024
-                ? `${(summary.nodeModulesKb / 1024).toFixed(1)} MB`
-                : `${summary.nodeModulesKb} KB`}{' '}
-                    ({summary.nodeModulesPct}%)
-                  </Text>
-                </Text>
-              </View>
-              <View style={bundleStyles.legendItem}>
-                <BundleCategoryIcon type="overhead" size={13} color={AppColors.amber500}/>
-                <Text style={bundleStyles.legendText}>
-                  Metro Runtime{' '}
-                  <Text style={bundleStyles.legendVal}>
-                    {summary.metroKb >= 1024
-                ? `${(summary.metroKb / 1024).toFixed(1)} MB`
-                : `${summary.metroKb} KB`}{' '}
-                    ({summary.metroPct}%)
-                  </Text>
-                </Text>
-              </View>
-              <View style={bundleStyles.legendItem}>
-                <BundleCategoryIcon type="typescript" size={13} color={AppColors.sky500}/>
-                <Text style={bundleStyles.legendText}>
-                  App Source{' '}
-                  <Text style={bundleStyles.legendVal}>
-                    {summary.appSourceKb >= 1024
-                ? `${(summary.appSourceKb / 1024).toFixed(1)} MB`
-                : `${summary.appSourceKb} KB`}{' '}
-                    ({summary.appSourcePct}%)
-                  </Text>
-                </Text>
-              </View>
-              <View style={bundleStyles.legendItem}>
-                <BundleCategoryIcon type="image" size={13} color={AppColors.pink500}/>
-                <Text style={bundleStyles.legendText}>
-                  Assets & Media{' '}
-                  <Text style={bundleStyles.legendVal}>
-                    {summary.assetsMediaKb >= 1024
-                ? `${(summary.assetsMediaKb / 1024).toFixed(1)} MB`
-                : `${summary.assetsMediaKb} KB`}{' '}
-                    ({summary.assetsMediaPct}%)
-                  </Text>
-                </Text>
-              </View>
-            </View>
-          </View>
+            <T style={e.legendGrid}>
+              <T style={e.legendItem}>
+                <Z type="javascript"size={13}color={t.indigo500}/>
+                <C style={e.legendText}>
+                  Node Modules{" "}
+                  <C style={e.legendVal}>
+                    {B.nodeModulesKb>=1024?`${(B.nodeModulesKb/1024).toFixed(1)} MB`:`${B.nodeModulesKb} KB`}{" "}
+                    ({B.nodeModulesPct}%)
+                  </C>
+                </C>
+              </T>
+              <T style={e.legendItem}>
+                <Z type="overhead"size={13}color={t.amber500}/>
+                <C style={e.legendText}>
+                  Metro Runtime{" "}
+                  <C style={e.legendVal}>
+                    {B.metroKb>=1024?`${(B.metroKb/1024).toFixed(1)} MB`:`${B.metroKb} KB`}{" "}
+                    ({B.metroPct}%)
+                  </C>
+                </C>
+              </T>
+              <T style={e.legendItem}>
+                <Z type="typescript"size={13}color={t.sky500}/>
+                <C style={e.legendText}>
+                  App Source{" "}
+                  <C style={e.legendVal}>
+                    {B.appSourceKb>=1024?`${(B.appSourceKb/1024).toFixed(1)} MB`:`${B.appSourceKb} KB`}{" "}
+                    ({B.appSourcePct}%)
+                  </C>
+                </C>
+              </T>
+              <T style={e.legendItem}>
+                <Z type="image"size={13}color={t.pink500}/>
+                <C style={e.legendText}>
+                  Assets & Media{" "}
+                  <C style={e.legendVal}>
+                    {B.assetsMediaKb>=1024?`${(B.assetsMediaKb/1024).toFixed(1)} MB`:`${B.assetsMediaKb} KB`}{" "}
+                    ({B.assetsMediaPct}%)
+                  </C>
+                </C>
+              </T>
+            </T>
+          </T>
 
           
-          <View style={bundleStyles.sectionCard}>
-            <View style={bundleStyles.sectionHeaderRow}>
-              <Text style={bundleStyles.sectionTitle}>
-                {t('bundle.categoryBreakdown')}
-              </Text>
-              <CopyButton value={() => summary} label={t('bundle.categoriesJson')}/>
-            </View>
-
-            {summary.categories.map((cat, cIdx) => (<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 }] },
-                ]} onPress={() => setActiveSubTab(cat.targetTab)}>
-                <View style={bundleStyles.catRowTop}>
-                  <View style={[
-                    bundleStyles.catIconBox,
-                    {
-                        backgroundColor: `${cat.color}15`,
-                        borderColor: `${cat.color}30`,
-                    },
-                ]}>
-                    <BundleCategoryIcon type={cat.iconType} size={18} color={cat.color}/>
-                  </View>
-
-                  <View style={bundleStyles.catRowTitleWrap}>
-                    <View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                    gap: 6,
-                }}>
-                      <Text style={bundleStyles.catRowTitle} numberOfLines={1}>
-                        {cat.title}
-                      </Text>
-                      <View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 6,
-                }}>
-                        <Text style={bundleStyles.catRowSize}>
-                          {cat.sizeKb >= 1024
-                    ? `${cat.sizeMb} MB`
-                    : `${cat.sizeKb} KB`}
-                        </Text>
-                        <View style={[
-                    bundleStyles.catPctPill,
-                    { backgroundColor: `${cat.color}18` },
-                ]}>
-                          <Text style={[
-                    bundleStyles.catPctText,
-                    { color: cat.color },
-                ]}>
-                            {cat.pct}%
-                          </Text>
-                        </View>
-                      </View>
-                    </View>
-
-                    <Text style={bundleStyles.catRowDesc} numberOfLines={2}>
-                      {cat.count} items • {cat.desc}
-                    </Text>
-                  </View>
-                </View>
+          <T style={e.sectionCard}>
+            <T style={e.sectionHeaderRow}>
+              <C style={e.sectionTitle}>
+                {k("bundle.categoryBreakdown")}
+              </C>
+              <K value={()=>B}label={k("bundle.categoriesJson")}/>
+            </T>
+
+            {B.categories.map((o,z)=><He key={z}accessible={!0}accessibilityRole="button"accessibilityLabel={`${o.title}, ${o.sizeKb>=1024?`${o.sizeMb} MB`:`${o.sizeKb} KB`}, ${o.pct}% of bundle`}accessibilityHint={`Double tap to view ${o.title} details`}style={({pressed:L})=>[e.catRowCard,L&&{opacity:.85,transform:[{scale:.99}]}]}onPress={()=>R(o.targetTab)}>
+                <T style={e.catRowTop}>
+                  <T style={[e.catIconBox,{backgroundColor:`${o.color}15`,borderColor:`${o.color}30`}]}>
+                    <Z type={o.iconType}size={18}color={o.color}/>
+                  </T>
+
+                  <T style={e.catRowTitleWrap}>
+                    <T style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:6}}>
+                      <C style={e.catRowTitle}numberOfLines={1}>
+                        {o.title}
+                      </C>
+                      <T style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                        <C style={e.catRowSize}>
+                          {o.sizeKb>=1024?`${o.sizeMb} MB`:`${o.sizeKb} KB`}
+                        </C>
+                        <T style={[e.catPctPill,{backgroundColor:`${o.color}18`}]}>
+                          <C style={[e.catPctText,{color:o.color}]}>
+                            {o.pct}%
+                          </C>
+                        </T>
+                      </T>
+                    </T>
+
+                    <C style={e.catRowDesc}numberOfLines={2}>
+                      {o.count} items • {o.desc}
+                    </C>
+                  </T>
+                </T>
 
                 
-                <View style={bundleStyles.catProgressTrack}>
-                  <View style={[
-                    bundleStyles.catProgressBar,
-                    { width: `${cat.pct}%`, backgroundColor: cat.color },
-                ]}/>
-                </View>
-              </Pressable>))}
+                <T style={e.catProgressTrack}>
+                  <T style={[e.catProgressBar,{width:`${o.pct}%`,backgroundColor:o.color}]}/>
+                </T>
+              </He>)}
 
             
-            <View style={bundleStyles.totalSummaryCard}>
-              <View style={bundleStyles.totalSummaryRow}>
-                <View style={bundleStyles.totalSummaryLabelWrap}>
-                  <View style={bundleStyles.totalIconBadge}>
-                    <PackageIcon color={AppColors.brandPurple} size={16}/>
-                  </View>
-                  <View>
-                    <Text style={bundleStyles.totalSummaryLabel}>
+            <T style={e.totalSummaryCard}>
+              <T style={e.totalSummaryRow}>
+                <T style={e.totalSummaryLabelWrap}>
+                  <T style={e.totalIconBadge}>
+                    <Pe color={t.brandPurple}size={16}/>
+                  </T>
+                  <T>
+                    <C style={e.totalSummaryLabel}>
                       TOTAL BUNDLE ASSETS
-                    </Text>
-                    <Text style={bundleStyles.totalSummarySub}>
-                      {summary.totalCount} Tracked Modules & Media Assets
-                    </Text>
-                  </View>
-                </View>
-                <View style={{ alignItems: 'flex-end' }}>
-                  <Text style={bundleStyles.totalSummaryValue}>
-                    {summary.totalMb} MB
-                  </Text>
-                  <Text style={bundleStyles.totalSummaryKb}>
-                    {summary.totalKb.toLocaleString()} KB
-                  </Text>
-                </View>
-              </View>
+                    </C>
+                    <C style={e.totalSummarySub}>
+                      {B.totalCount} Tracked Modules & Media Assets
+                    </C>
+                  </T>
+                </T>
+                <T style={{alignItems:"flex-end"}}>
+                  <C style={e.totalSummaryValue}>
+                    {B.totalMb} MB
+                  </C>
+                  <C style={e.totalSummaryKb}>
+                    {B.totalKb.toLocaleString()} KB
+                  </C>
+                </T>
+              </T>
 
               
-              <View style={bundleStyles.totalFormulaGrid}>
-                <View style={bundleStyles.totalChip}>
-                  <View style={[
-                bundleStyles.totalDot,
-                { backgroundColor: AppColors.indigo500 },
-            ]}/>
-                  <Text style={bundleStyles.totalChipText}>
-                    NPM: {(summary.nodeModulesKb / 1024).toFixed(1)}M (
-                    {summary.nodeModulesPct}%)
-                  </Text>
-                </View>
-                <View style={bundleStyles.totalChip}>
-                  <View style={[
-                bundleStyles.totalDot,
-                { backgroundColor: AppColors.amber500 },
-            ]}/>
-                  <Text style={bundleStyles.totalChipText}>
-                    Metro: {(summary.metroKb / 1024).toFixed(1)}M (
-                    {summary.metroPct}%)
-                  </Text>
-                </View>
-                <View style={bundleStyles.totalChip}>
-                  <View style={[
-                bundleStyles.totalDot,
-                { backgroundColor: AppColors.sky500 },
-            ]}/>
-                  <Text style={bundleStyles.totalChipText}>
-                    Source: {(summary.appSourceKb / 1024).toFixed(1)}M (
-                    {summary.appSourcePct}%)
-                  </Text>
-                </View>
-                <View style={bundleStyles.totalChip}>
-                  <View style={[
-                bundleStyles.totalDot,
-                { backgroundColor: AppColors.pink500 },
-            ]}/>
-                  <Text style={bundleStyles.totalChipText}>
-                    Media: {summary.assetsMediaKb}K ({summary.assetsMediaPct}%)
-                  </Text>
-                </View>
-              </View>
-            </View>
-          </View>
+              <T style={e.totalFormulaGrid}>
+                <T style={e.totalChip}>
+                  <T style={[e.totalDot,{backgroundColor:t.indigo500}]}/>
+                  <C style={e.totalChipText}>
+                    NPM: {(B.nodeModulesKb/1024).toFixed(1)}M (
+                    {B.nodeModulesPct}%)
+                  </C>
+                </T>
+                <T style={e.totalChip}>
+                  <T style={[e.totalDot,{backgroundColor:t.amber500}]}/>
+                  <C style={e.totalChipText}>
+                    Metro: {(B.metroKb/1024).toFixed(1)}M (
+                    {B.metroPct}%)
+                  </C>
+                </T>
+                <T style={e.totalChip}>
+                  <T style={[e.totalDot,{backgroundColor:t.sky500}]}/>
+                  <C style={e.totalChipText}>
+                    Source: {(B.appSourceKb/1024).toFixed(1)}M (
+                    {B.appSourcePct}%)
+                  </C>
+                </T>
+                <T style={e.totalChip}>
+                  <T style={[e.totalDot,{backgroundColor:t.pink500}]}/>
+                  <C style={e.totalChipText}>
+                    Media: {B.assetsMediaKb}K ({B.assetsMediaPct}%)
+                  </C>
+                </T>
+              </T>
+            </T>
+          </T>
 
           
-          <View style={bundleStyles.sectionCard}>
-            <View style={bundleStyles.sectionHeaderRow}>
-              <View style={{ flex: 1, paddingRight: 4 }}>
-                <Text style={bundleStyles.sectionTitle}>
+          <T style={e.sectionCard}>
+            <T style={e.sectionHeaderRow}>
+              <T style={{flex:1,paddingRight:4}}>
+                <C style={e.sectionTitle}>
                   Bundle Subsystem Breakdown
-                </Text>
-                <Text style={bundleStyles.sectionSub}>
+                </C>
+                <C style={e.sectionSub}>
                   Granular analysis of packages, application source, engine
                   runtime & assets
-                </Text>
-              </View>
-              <CopyButton value={() => ({
-                directPackages: bundlePackages.filter(p => p.type === 'direct').length,
-                transitivePackages: bundlePackages.filter(p => p.type !== 'direct').length,
-                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,
-            })} label="Subsystem Split JSON"/>
-            </View>
+                </C>
+              </T>
+              <K value={()=>({directPackages:J.filter(o=>o.type==="direct").length,transitivePackages:J.filter(o=>o.type!=="direct").length,hermesEngine:E?"Hermes (Bytecode)":"JSC (Source)",jsDevKb:B.totalKb,jsHermesReleaseKb:Math.round(B.totalKb*.38),appSourceFiles:I.filter(o=>o.category==="typescript"||o.category==="javascript").length,mediaAssets:I.filter(o=>o.category==="image"||o.category==="font"||o.category==="json").length})}label="Subsystem Split JSON"/>
+            </T>
 
             
-            <View style={bundleStyles.subsystemCard}>
-              <View style={bundleStyles.subsystemHeader}>
-                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-                  <BundleCategoryIcon type="deps" size={16} color={AppColors.indigo500}/>
-                  <Text style={bundleStyles.subsystemTitle}>
+            <T style={e.subsystemCard}>
+              <T style={e.subsystemHeader}>
+                <T style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                  <Z type="deps"size={16}color={t.indigo500}/>
+                  <C style={e.subsystemTitle}>
                     NPM & Third-Party Dependencies
-                  </Text>
-                </View>
-                <View style={[
-                bundleStyles.subsystemBadge,
-                { backgroundColor: `${AppColors.indigo500}18` },
-            ]}>
-                  <Text style={[
-                bundleStyles.subsystemBadgeText,
-                { color: AppColors.indigo500 },
-            ]}>
-                    {(summary.nodeModulesKb / 1024).toFixed(1)} MB •{' '}
-                    {summary.nodeModulesPct}%
-                  </Text>
-                </View>
-              </View>
-              <View style={bundleStyles.subsystemGrid}>
-                <View style={bundleStyles.subsystemItem}>
-                  <Text style={bundleStyles.subsystemItemText}>
-                    Direct:{' '}
-                    <Text style={bundleStyles.subsystemItemVal}>
-                      {bundlePackages.filter(p => p.type === 'direct').length ||
-                12}{' '}
+                  </C>
+                </T>
+                <T style={[e.subsystemBadge,{backgroundColor:`${t.indigo500}18`}]}>
+                  <C style={[e.subsystemBadgeText,{color:t.indigo500}]}>
+                    {(B.nodeModulesKb/1024).toFixed(1)} MB •{" "}
+                    {B.nodeModulesPct}%
+                  </C>
+                </T>
+              </T>
+              <T style={e.subsystemGrid}>
+                <T style={e.subsystemItem}>
+                  <C style={e.subsystemItemText}>
+                    Direct:{" "}
+                    <C style={e.subsystemItemVal}>
+                      {J.filter(o=>o.type==="direct").length||12}{" "}
                       pkgs
-                    </Text>
-                  </Text>
-                </View>
-                <View style={bundleStyles.subsystemItem}>
-                  <Text style={bundleStyles.subsystemItemText}>
-                    Transitive:{' '}
-                    <Text style={bundleStyles.subsystemItemVal}>
-                      {bundlePackages.filter(p => p.type !== 'direct').length ||
-                41}{' '}
+                    </C>
+                  </C>
+                </T>
+                <T style={e.subsystemItem}>
+                  <C style={e.subsystemItemText}>
+                    Transitive:{" "}
+                    <C style={e.subsystemItemVal}>
+                      {J.filter(o=>o.type!=="direct").length||41}{" "}
                       pkgs
-                    </Text>
-                  </Text>
-                </View>
-                <View style={bundleStyles.subsystemItem}>
-                  <Text style={bundleStyles.subsystemItemText}>
-                    Top Package:{' '}
-                    <Text style={bundleStyles.subsystemItemVal}>
-                      {bundlePackages[0]?.name || 'react-native'} (
-                      {bundlePackages[0]?.sizeKb || 1240} KB)
-                    </Text>
-                  </Text>
-                </View>
-              </View>
-            </View>
+                    </C>
+                  </C>
+                </T>
+                <T style={e.subsystemItem}>
+                  <C style={e.subsystemItemText}>
+                    Top Package:{" "}
+                    <C style={e.subsystemItemVal}>
+                      {J[0]?.name||"react-native"} (
+                      {J[0]?.sizeKb||1240} KB)
+                    </C>
+                  </C>
+                </T>
+              </T>
+            </T>
 
             
-            <View style={bundleStyles.subsystemCard}>
-              <View style={bundleStyles.subsystemHeader}>
-                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-                  <BundleCategoryIcon type="source" size={16} color={AppColors.sky500}/>
-                  <Text style={bundleStyles.subsystemTitle}>
+            <T style={e.subsystemCard}>
+              <T style={e.subsystemHeader}>
+                <T style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                  <Z type="source"size={16}color={t.sky500}/>
+                  <C style={e.subsystemTitle}>
                     Application Source Code
-                  </Text>
-                </View>
-                <View style={[
-                bundleStyles.subsystemBadge,
-                { backgroundColor: `${AppColors.sky500}18` },
-            ]}>
-                  <Text style={[
-                bundleStyles.subsystemBadgeText,
-                { color: AppColors.sky500 },
-            ]}>
-                    {(summary.appSourceKb / 1024).toFixed(1)} MB •{' '}
-                    {summary.appSourcePct}%
-                  </Text>
-                </View>
-              </View>
-              <View style={bundleStyles.subsystemGrid}>
-                <View style={bundleStyles.subsystemItem}>
-                  <Text style={bundleStyles.subsystemItemText}>
-                    TypeScript/TSX:{' '}
-                    <Text style={bundleStyles.subsystemItemVal}>
-                      {bundleFiles.filter(f => f.category === 'typescript')
-                .length || 14}{' '}
+                  </C>
+                </T>
+                <T style={[e.subsystemBadge,{backgroundColor:`${t.sky500}18`}]}>
+                  <C style={[e.subsystemBadgeText,{color:t.sky500}]}>
+                    {(B.appSourceKb/1024).toFixed(1)} MB •{" "}
+                    {B.appSourcePct}%
+                  </C>
+                </T>
+              </T>
+              <T style={e.subsystemGrid}>
+                <T style={e.subsystemItem}>
+                  <C style={e.subsystemItemText}>
+                    TypeScript/TSX:{" "}
+                    <C style={e.subsystemItemVal}>
+                      {I.filter(o=>o.category==="typescript").length||14}{" "}
                       files
-                    </Text>
-                  </Text>
-                </View>
-                <View style={bundleStyles.subsystemItem}>
-                  <Text style={bundleStyles.subsystemItemText}>
-                    JavaScript/JSX:{' '}
-                    <Text style={bundleStyles.subsystemItemVal}>
-                      {bundleFiles.filter(f => f.category === 'javascript')
-                .length || 3}{' '}
+                    </C>
+                  </C>
+                </T>
+                <T style={e.subsystemItem}>
+                  <C style={e.subsystemItemText}>
+                    JavaScript/JSX:{" "}
+                    <C style={e.subsystemItemVal}>
+                      {I.filter(o=>o.category==="javascript").length||3}{" "}
                       files
-                    </Text>
-                  </Text>
-                </View>
-                <View style={bundleStyles.subsystemItem}>
-                  <Text style={bundleStyles.subsystemItemText}>
-                    Tracked Modules:{' '}
-                    <Text style={bundleStyles.subsystemItemVal}>
-                      {bundleFiles.length || 18} files
-                    </Text>
-                  </Text>
-                </View>
-              </View>
-            </View>
+                    </C>
+                  </C>
+                </T>
+                <T style={e.subsystemItem}>
+                  <C style={e.subsystemItemText}>
+                    Tracked Modules:{" "}
+                    <C style={e.subsystemItemVal}>
+                      {I.length||18} files
+                    </C>
+                  </C>
+                </T>
+              </T>
+            </T>
 
             
-            <View style={bundleStyles.subsystemCard}>
-              <View style={bundleStyles.subsystemHeader}>
-                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-                  <BundleCategoryIcon type="bolt" size={16} color={AppColors.emerald600}/>
-                  <Text style={bundleStyles.subsystemTitle}>
+            <T style={e.subsystemCard}>
+              <T style={e.subsystemHeader}>
+                <T style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                  <Z type="bolt"size={16}color={t.emerald600}/>
+                  <C style={e.subsystemTitle}>
                     Hermes Bytecode Engine
-                  </Text>
-                </View>
-                <View style={[
-                bundleStyles.subsystemBadge,
-                { backgroundColor: `${AppColors.emerald500}18` },
-            ]}>
-                  <Text style={[
-                bundleStyles.subsystemBadgeText,
-                { color: AppColors.emerald700 },
-            ]}>
+                  </C>
+                </T>
+                <T style={[e.subsystemBadge,{backgroundColor:`${t.emerald500}18`}]}>
+                  <C style={[e.subsystemBadgeText,{color:t.emerald700}]}>
                     ~62% AOT Compression
-                  </Text>
-                </View>
-              </View>
-              <View style={bundleStyles.subsystemGrid}>
-                <View style={bundleStyles.subsystemItem}>
-                  <Text style={bundleStyles.subsystemItemText}>
-                    Dev JS Size:{' '}
-                    <Text style={bundleStyles.subsystemItemVal}>
-                      {summary.totalMb} MB
-                    </Text>
-                  </Text>
-                </View>
-                <View style={bundleStyles.subsystemItem}>
-                  <Text style={bundleStyles.subsystemItemText}>
-                    Hermes Bytecode:{' '}
-                    <Text style={bundleStyles.subsystemItemVal}>
-                      {((summary.totalKb * 0.38) / 1024).toFixed(2)} MB
-                    </Text>
-                  </Text>
-                </View>
-                <View style={bundleStyles.subsystemItem}>
-                  <Text style={bundleStyles.subsystemItemText}>
-                    Execution:{' '}
-                    <Text style={bundleStyles.subsystemItemVal}>
-                      {isHermes ? 'Hermes JSI Direct' : 'JSC Standard'}
-                    </Text>
-                  </Text>
-                </View>
-              </View>
-            </View>
+                  </C>
+                </T>
+              </T>
+              <T style={e.subsystemGrid}>
+                <T style={e.subsystemItem}>
+                  <C style={e.subsystemItemText}>
+                    Dev JS Size:{" "}
+                    <C style={e.subsystemItemVal}>
+                      {B.totalMb} MB
+                    </C>
+                  </C>
+                </T>
+                <T style={e.subsystemItem}>
+                  <C style={e.subsystemItemText}>
+                    Hermes Bytecode:{" "}
+                    <C style={e.subsystemItemVal}>
+                      {(B.totalKb*.38/1024).toFixed(2)} MB
+                    </C>
+                  </C>
+                </T>
+                <T style={e.subsystemItem}>
+                  <C style={e.subsystemItemText}>
+                    Execution:{" "}
+                    <C style={e.subsystemItemVal}>
+                      {E?"Hermes JSI Direct":"JSC Standard"}
+                    </C>
+                  </C>
+                </T>
+              </T>
+            </T>
 
             
-            <View style={bundleStyles.subsystemCard}>
-              <View style={bundleStyles.subsystemHeader}>
-                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-                  <BundleCategoryIcon type="media" size={16} color={AppColors.pink500}/>
-                  <Text style={bundleStyles.subsystemTitle}>
+            <T style={e.subsystemCard}>
+              <T style={e.subsystemHeader}>
+                <T style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                  <Z type="media"size={16}color={t.pink500}/>
+                  <C style={e.subsystemTitle}>
                     Images, Fonts & Static Assets
-                  </Text>
-                </View>
-                <View style={[
-                bundleStyles.subsystemBadge,
-                { backgroundColor: `${AppColors.pink500}18` },
-            ]}>
-                  <Text style={[
-                bundleStyles.subsystemBadgeText,
-                { color: AppColors.pink500 },
-            ]}>
-                    {summary.assetsMediaKb} KB • {summary.assetsMediaPct}%
-                  </Text>
-                </View>
-              </View>
-              <View style={bundleStyles.subsystemGrid}>
-                <View style={bundleStyles.subsystemItem}>
-                  <Text style={bundleStyles.subsystemItemText}>
-                    Images & Icons:{' '}
-                    <Text style={bundleStyles.subsystemItemVal}>
-                      {bundleFiles.filter(f => f.category === 'image').length ||
-                2}{' '}
+                  </C>
+                </T>
+                <T style={[e.subsystemBadge,{backgroundColor:`${t.pink500}18`}]}>
+                  <C style={[e.subsystemBadgeText,{color:t.pink500}]}>
+                    {B.assetsMediaKb} KB • {B.assetsMediaPct}%
+                  </C>
+                </T>
+              </T>
+              <T style={e.subsystemGrid}>
+                <T style={e.subsystemItem}>
+                  <C style={e.subsystemItemText}>
+                    Images & Icons:{" "}
+                    <C style={e.subsystemItemVal}>
+                      {I.filter(o=>o.category==="image").length||2}{" "}
                       assets
-                    </Text>
-                  </Text>
-                </View>
-                <View style={bundleStyles.subsystemItem}>
-                  <Text style={bundleStyles.subsystemItemText}>
-                    JSON Data:{' '}
-                    <Text style={bundleStyles.subsystemItemVal}>
-                      {bundleFiles.filter(f => f.category === 'json').length ||
-                1}{' '}
+                    </C>
+                  </C>
+                </T>
+                <T style={e.subsystemItem}>
+                  <C style={e.subsystemItemText}>
+                    JSON Data:{" "}
+                    <C style={e.subsystemItemVal}>
+                      {I.filter(o=>o.category==="json").length||1}{" "}
                       files
-                    </Text>
-                  </Text>
-                </View>
-                <View style={bundleStyles.subsystemItem}>
-                  <Text style={bundleStyles.subsystemItemText}>
-                    Custom Fonts:{' '}
-                    <Text style={bundleStyles.subsystemItemVal}>
-                      {bundleFiles.filter(f => f.category === 'font').length ||
-                0}{' '}
+                    </C>
+                  </C>
+                </T>
+                <T style={e.subsystemItem}>
+                  <C style={e.subsystemItemText}>
+                    Custom Fonts:{" "}
+                    <C style={e.subsystemItemVal}>
+                      {I.filter(o=>o.category==="font").length||0}{" "}
                       fonts
-                    </Text>
-                  </Text>
-                </View>
-              </View>
-            </View>
-          </View>
-        </ScrollView>)}
+                    </C>
+                  </C>
+                </T>
+              </T>
+            </T>
+          </T>
+        </Te>}
 
       
       
       
-      {activeSubTab === 'production' && (<ScrollView style={{ flex: 1 }} contentContainerStyle={bundleStyles.contentContainer} keyboardShouldPersistTaps="handled">
+      {M==="production"&&<Te style={{flex:1}}contentContainerStyle={e.contentContainer}keyboardShouldPersistTaps="handled">
           
-          <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`,
-                },
-            ].map(tab => {
-                const isSelected = prodPlatform === tab.key;
-                return (<TouchableScale 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={[
-                        bundleStyles.prodPlatformBtn,
-                        isSelected && bundleStyles.prodPlatformBtnActive,
-                    ]}>
-                  <Text style={[
-                        bundleStyles.prodPlatformBtnText,
-                        isSelected && bundleStyles.prodPlatformBtnTextActive,
-                    ]}>
-                    {tab.label}
-                  </Text>
-                  <View style={[
-                        bundleStyles.prodPlatformBadge,
-                        isSelected && bundleStyles.prodPlatformBadgeActive,
-                    ]}>
-                    <Text style={[
-                        bundleStyles.prodPlatformBadgeText,
-                        isSelected && bundleStyles.prodPlatformBadgeTextActive,
-                    ]}>
-                      {tab.badge}
-                    </Text>
-                  </View>
-                </TouchableScale>);
-            })}
-          </ScrollView>
+          <Te horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={e.prodPlatformScroll}>
+            {[{key:"ios",label:"iOS App (.ipa)",badge:`${V?.production.ios.totalDownloadMb||111.9} MB`},{key:"androidAab",label:"Android AAB (.aab)",badge:`${V?.production.androidAab.totalDownloadMb||38.5} MB`},{key:"androidApk",label:"Universal APK (.apk)",badge:`${V?.production.androidApk.totalInstallMb||364} MB`}].map(o=>{const z=v===o.key;return<G key={o.key}accessible={!0}accessibilityRole="tab"accessibilityLabel={`${o.label}, ${o.badge}`}accessibilityState={{selected:z}}accessibilityHint={`Switches production estimate to ${o.label}`}onPress={()=>U(o.key)}style={[e.prodPlatformBtn,z&&e.prodPlatformBtnActive]}>
+                  <C style={[e.prodPlatformBtnText,z&&e.prodPlatformBtnTextActive]}>
+                    {o.label}
+                  </C>
+                  <T style={[e.prodPlatformBadge,z&&e.prodPlatformBadgeActive]}>
+                    <C style={[e.prodPlatformBadgeText,z&&e.prodPlatformBadgeTextActive]}>
+                      {o.badge}
+                    </C>
+                  </T>
+                </G>})}
+          </Te>
 
           
-          {analysis && (<View style={bundleStyles.heroCard}>
-              <View style={bundleStyles.heroTopRow}>
-                <View style={bundleStyles.heroIconWrap}>
-                  <PackageIcon color={AppColors.brandPurple} size={24}/>
-                </View>
-                <View style={{ flex: 1 }}>
-                  <Text style={bundleStyles.heroTitle}>
-                    {prodPlatform === 'ios'
-                    ? 'iOS Production Binary Footprint'
-                    : prodPlatform === 'androidAab'
-                        ? 'Google Play App Bundle (.aab)'
-                        : 'Universal Standalone APK (.apk)'}
-                  </Text>
-                  <Text style={bundleStyles.heroSubtitle}>
-                    {prodPlatform === 'ios'
-                    ? 'App Store install & over-the-air cellular download estimates'
-                    : prodPlatform === 'androidAab'
-                        ? 'Optimized per-device dynamic delivery split APK architecture'
-                        : 'Multi-ABI universal install archive for sideloading & direct distribution'}
-                  </Text>
-                </View>
-                <CopyButton value={() => analysis.production[prodPlatform]} label="Production Binary JSON"/>
-              </View>
+          {V&&<T style={e.heroCard}>
+              <T style={e.heroTopRow}>
+                <T style={e.heroIconWrap}>
+                  <Pe color={t.brandPurple}size={24}/>
+                </T>
+                <T style={{flex:1}}>
+                  <C style={e.heroTitle}>
+                    {v==="ios"?"iOS Production Binary Footprint":v==="androidAab"?"Google Play App Bundle (.aab)":"Universal Standalone APK (.apk)"}
+                  </C>
+                  <C style={e.heroSubtitle}>
+                    {v==="ios"?"App Store install & over-the-air cellular download estimates":v==="androidAab"?"Optimized per-device dynamic delivery split APK architecture":"Multi-ABI universal install archive for sideloading & direct distribution"}
+                  </C>
+                </T>
+                <K value={()=>V.production[v]}label="Production Binary JSON"/>
+              </T>
 
               
-              <View style={bundleStyles.metricsGrid}>
-                <View style={bundleStyles.metricBox}>
-                  <Text style={bundleStyles.metricLabel}>INSTALL SIZE</Text>
-                  <Text style={[
-                    bundleStyles.metricValue,
-                    { color: AppColors.purple },
-                ]}>
-                    {analysis.production[prodPlatform].totalInstallMb} MB
-                  </Text>
-                  <Text style={bundleStyles.metricHint}>
+              <T style={e.metricsGrid}>
+                <T style={e.metricBox}>
+                  <C style={e.metricLabel}>INSTALL SIZE</C>
+                  <C style={[e.metricValue,{color:t.purple}]}>
+                    {V.production[v].totalInstallMb} MB
+                  </C>
+                  <C style={e.metricHint}>
                     On-device uncompressed footprint
-                  </Text>
-                </View>
-
-                <View style={bundleStyles.metricBox}>
-                  <Text style={bundleStyles.metricLabel}>DOWNLOAD SIZE</Text>
-                  <Text style={[
-                    bundleStyles.metricValue,
-                    { color: AppColors.emerald600 },
-                ]}>
-                    ~{analysis.production[prodPlatform].totalDownloadMb} MB
-                  </Text>
-                  <Text style={bundleStyles.metricHint}>
+                  </C>
+                </T>
+
+                <T style={e.metricBox}>
+                  <C style={e.metricLabel}>DOWNLOAD SIZE</C>
+                  <C style={[e.metricValue,{color:t.emerald600}]}>
+                    ~{V.production[v].totalDownloadMb} MB
+                  </C>
+                  <C style={e.metricHint}>
                     Store network transfer payload
-                  </Text>
-                </View>
-
-                <View style={bundleStyles.metricBox}>
-                  <Text style={bundleStyles.metricLabel}>COMPRESSION</Text>
-                  <Text style={[
-                    bundleStyles.metricValue,
-                    { color: AppColors.sky500 },
-                ]}>
-                    {analysis.production[prodPlatform].compressionRatioPct}%
-                  </Text>
-                  <Text style={bundleStyles.metricHint}>
+                  </C>
+                </T>
+
+                <T style={e.metricBox}>
+                  <C style={e.metricLabel}>COMPRESSION</C>
+                  <C style={[e.metricValue,{color:t.sky500}]}>
+                    {V.production[v].compressionRatioPct}%
+                  </C>
+                  <C style={e.metricHint}>
                     Bytecode & asset ratio
-                  </Text>
-                </View>
+                  </C>
+                </T>
 
-                <View style={bundleStyles.metricBox}>
-                  <Text style={bundleStyles.metricLabel}>
+                <T style={e.metricBox}>
+                  <C style={e.metricLabel}>
                     FORMAT ARCHITECTURE
-                  </Text>
-                  <Text style={[
-                    bundleStyles.metricValue,
-                    { color: AppColors.amber700 },
-                ]}>
-                    {prodPlatform === 'ios'
-                    ? 'Mach-O 64-bit'
-                    : prodPlatform === 'androidAab'
-                        ? 'Split APKs'
-                        : 'FAT Multi-ABI'}
-                  </Text>
-                  <Text style={bundleStyles.metricHint}>
-                    {prodPlatform === 'ios'
-                    ? 'Apple ARM64 runtime'
-                    : prodPlatform === 'androidAab'
-                        ? 'Dynamic Google Play delivery'
-                        : 'Sideload universal package'}
-                  </Text>
-                </View>
-              </View>
-            </View>)}
+                  </C>
+                  <C style={[e.metricValue,{color:t.amber700}]}>
+                    {v==="ios"?"Mach-O 64-bit":v==="androidAab"?"Split APKs":"FAT Multi-ABI"}
+                  </C>
+                  <C style={e.metricHint}>
+                    {v==="ios"?"Apple ARM64 runtime":v==="androidAab"?"Dynamic Google Play delivery":"Sideload universal package"}
+                  </C>
+                </T>
+              </T>
+            </T>}
 
           
-          {analysis && (<View style={bundleStyles.sectionCard}>
-              <View style={bundleStyles.sectionHeaderRow}>
-                <View style={{ flex: 1, paddingRight: 4 }}>
-                  <Text style={bundleStyles.sectionTitle}>
+          {V&&<T style={e.sectionCard}>
+              <T style={e.sectionHeaderRow}>
+                <T style={{flex:1,paddingRight:4}}>
+                  <C style={e.sectionTitle}>
                     Binary Component Architecture
-                  </Text>
-                  <Text style={bundleStyles.sectionSub}>
+                  </C>
+                  <C style={e.sectionSub}>
                     Compiled native libraries, runtime bytecodes, assets, and
                     signature blocks
-                  </Text>
-                </View>
-                <CopyButton value={() => analysis.production[prodPlatform].components} label="Components JSON"/>
-              </View>
+                  </C>
+                </T>
+                <K value={()=>V.production[v].components}label="Components JSON"/>
+              </T>
 
               
-              <View style={bundleStyles.prodTreemapBar}>
-                {analysis.production[prodPlatform].components.map((comp, cIdx) => (<View key={cIdx} style={{
-                        flex: Math.max(comp.pct, 2),
-                        backgroundColor: comp.color,
-                        height: 16,
-                    }}/>))}
-              </View>
+              <T style={e.prodTreemapBar}>
+                {V.production[v].components.map((o,z)=><T key={z}style={{flex:Math.max(o.pct,2),backgroundColor:o.color,height:16}}/>)}
+              </T>
 
               
-              <View style={[bundleStyles.legendGrid, { marginBottom: 12 }]}>
-                {analysis.production[prodPlatform].components.map((comp, cIdx) => (<View key={cIdx} style={bundleStyles.legendItem}>
-                      <View style={{
-                        width: 8,
-                        height: 8,
-                        borderRadius: 4,
-                        backgroundColor: comp.color,
-                    }}/>
-                      <Text style={bundleStyles.legendText} numberOfLines={1}>
-                        {comp.name}{' '}
-                        <Text style={bundleStyles.legendVal}>
-                          {comp.sizeMb} MB ({comp.pct}%)
-                        </Text>
-                      </Text>
-                    </View>))}
-              </View>
-
-              {analysis.production[prodPlatform].components.map((comp, idx) => (<View key={idx} style={bundleStyles.catRowCard}>
-                  <View style={bundleStyles.catRowTop}>
-                    <View style={[
-                        bundleStyles.catIconBox,
-                        {
-                            backgroundColor: `${comp.color}15`,
-                            borderColor: `${comp.color}30`,
-                        },
-                    ]}>
-                      <BundleCategoryIcon type={comp.category === 'native'
-                        ? 'source'
-                        : comp.category === 'frameworks'
-                            ? 'deps'
-                            : comp.category === 'assets'
-                                ? 'media'
-                                : comp.category === 'js'
-                                    ? 'javascript'
-                                    : 'overhead'} size={18} color={comp.color}/>
-                    </View>
-
-                    <View style={bundleStyles.catRowTitleWrap}>
-                      <View style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
-                        gap: 6,
-                    }}>
-                        <Text style={bundleStyles.catRowTitle} numberOfLines={1}>
-                          {comp.name}
-                        </Text>
-                        <View style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 6,
-                    }}>
-                          <Text style={bundleStyles.catRowSize}>
-                            {comp.sizeMb} MB
-                          </Text>
-                          <View style={[
-                        bundleStyles.catPctPill,
-                        { backgroundColor: `${comp.color}18` },
-                    ]}>
-                            <Text style={[
-                        bundleStyles.catPctText,
-                        { color: comp.color },
-                    ]}>
-                              {comp.pct}%
-                            </Text>
-                          </View>
-                        </View>
-                      </View>
-
-                      <Text style={bundleStyles.catRowDesc} numberOfLines={2}>
-                        {comp.description}
-                      </Text>
-                    </View>
-                  </View>
-
-                  <View style={bundleStyles.catProgressTrack}>
-                    <View style={[
-                        bundleStyles.catProgressBar,
-                        { width: `${comp.pct}%`, backgroundColor: comp.color },
-                    ]}/>
-                  </View>
-
-                  {comp.advice ? (<View style={[
-                            bundleStyles.adviceBadge,
-                            bundleStyles.adviceOptimal,
-                            { marginTop: 6 },
-                        ]}>
-                      <LightbulbIcon color={AppColors.emerald700} size={13}/>
-                      <Text style={[
-                            bundleStyles.adviceText,
-                            { color: AppColors.emerald700, flex: 1, marginLeft: 4 },
-                        ]}>
-                        {comp.advice}
-                      </Text>
-                    </View>) : null}
-                </View>))}
+              <T style={[e.legendGrid,{marginBottom:12}]}>
+                {V.production[v].components.map((o,z)=><T key={z}style={e.legendItem}>
+                      <T style={{width:8,height:8,borderRadius:4,backgroundColor:o.color}}/>
+                      <C style={e.legendText}numberOfLines={1}>
+                        {o.name}{" "}
+                        <C style={e.legendVal}>
+                          {o.sizeMb} MB ({o.pct}%)
+                        </C>
+                      </C>
+                    </T>)}
+              </T>
+
+              {V.production[v].components.map((o,z)=><T key={z}style={e.catRowCard}>
+                  <T style={e.catRowTop}>
+                    <T style={[e.catIconBox,{backgroundColor:`${o.color}15`,borderColor:`${o.color}30`}]}>
+                      <Z type={o.category==="native"?"source":o.category==="frameworks"?"deps":o.category==="assets"?"media":o.category==="js"?"javascript":"overhead"}size={18}color={o.color}/>
+                    </T>
+
+                    <T style={e.catRowTitleWrap}>
+                      <T style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:6}}>
+                        <C style={e.catRowTitle}numberOfLines={1}>
+                          {o.name}
+                        </C>
+                        <T style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                          <C style={e.catRowSize}>
+                            {o.sizeMb} MB
+                          </C>
+                          <T style={[e.catPctPill,{backgroundColor:`${o.color}18`}]}>
+                            <C style={[e.catPctText,{color:o.color}]}>
+                              {o.pct}%
+                            </C>
+                          </T>
+                        </T>
+                      </T>
+
+                      <C style={e.catRowDesc}numberOfLines={2}>
+                        {o.description}
+                      </C>
+                    </T>
+                  </T>
+
+                  <T style={e.catProgressTrack}>
+                    <T style={[e.catProgressBar,{width:`${o.pct}%`,backgroundColor:o.color}]}/>
+                  </T>
+
+                  {o.advice?<T style={[e.adviceBadge,e.adviceOptimal,{marginTop:6}]}>
+                      <Je color={t.emerald700}size={13}/>
+                      <C style={[e.adviceText,{color:t.emerald700,flex:1,marginLeft:4}]}>
+                        {o.advice}
+                      </C>
+                    </T>:null}
+                </T>)}
 
               
-              <View style={bundleStyles.totalSummaryCard}>
-                <View style={bundleStyles.totalSummaryRow}>
-                  <View style={bundleStyles.totalSummaryLabelWrap}>
-                    <View style={bundleStyles.totalIconBadge}>
-                      <PackageIcon color={AppColors.brandPurple} size={16}/>
-                    </View>
-                    <View>
-                      <Text style={bundleStyles.totalSummaryLabel}>
-                        {prodPlatform === 'ios'
-                    ? 'TOTAL IOS APP BINARY'
-                    : prodPlatform === 'androidAab'
-                        ? 'TOTAL ANDROID AAB BUNDLE'
-                        : 'TOTAL UNIVERSAL APK'}
-                      </Text>
-                      <Text style={bundleStyles.totalSummarySub}>
-                        {prodPlatform === 'ios'
-                    ? 'App Store install & cellular download estimates'
-                    : prodPlatform === 'androidAab'
-                        ? 'Google Play dynamic delivery split APK'
-                        : 'Universal standalone sideload package'}
-                      </Text>
-                    </View>
-                  </View>
-                </View>
+              <T style={e.totalSummaryCard}>
+                <T style={e.totalSummaryRow}>
+                  <T style={e.totalSummaryLabelWrap}>
+                    <T style={e.totalIconBadge}>
+                      <Pe color={t.brandPurple}size={16}/>
+                    </T>
+                    <T>
+                      <C style={e.totalSummaryLabel}>
+                        {v==="ios"?"TOTAL IOS APP BINARY":v==="androidAab"?"TOTAL ANDROID AAB BUNDLE":"TOTAL UNIVERSAL APK"}
+                      </C>
+                      <C style={e.totalSummarySub}>
+                        {v==="ios"?"App Store install & cellular download estimates":v==="androidAab"?"Google Play dynamic delivery split APK":"Universal standalone sideload package"}
+                      </C>
+                    </T>
+                  </T>
+                </T>
 
                 
-                <View style={bundleStyles.totalFormulaGrid}>
-                  <View style={bundleStyles.totalChip}>
-                    <View style={[
-                    bundleStyles.totalDot,
-                    { backgroundColor: AppColors.purple },
-                ]}/>
-                    <Text style={bundleStyles.totalChipText}>
-                      Install:{' '}
-                      {analysis.production[prodPlatform].totalInstallMb} MB
-                    </Text>
-                  </View>
-                  <View style={bundleStyles.totalChip}>
-                    <View style={[
-                    bundleStyles.totalDot,
-                    { backgroundColor: AppColors.sky500 },
-                ]}/>
-                    <Text style={bundleStyles.totalChipText}>
+                <T style={e.totalFormulaGrid}>
+                  <T style={e.totalChip}>
+                    <T style={[e.totalDot,{backgroundColor:t.purple}]}/>
+                    <C style={e.totalChipText}>
+                      Install:{" "}
+                      {V.production[v].totalInstallMb} MB
+                    </C>
+                  </T>
+                  <T style={e.totalChip}>
+                    <T style={[e.totalDot,{backgroundColor:t.sky500}]}/>
+                    <C style={e.totalChipText}>
                       Download: ~
-                      {analysis.production[prodPlatform].totalDownloadMb} MB
-                    </Text>
-                  </View>
-                  <View style={bundleStyles.totalChip}>
-                    <View style={[
-                    bundleStyles.totalDot,
-                    { backgroundColor: AppColors.emerald500 },
-                ]}/>
-                    <Text style={bundleStyles.totalChipText}>
-                      Compression:{' '}
-                      {analysis.production[prodPlatform].compressionRatioPct}%
-                    </Text>
-                  </View>
-                </View>
-              </View>
-            </View>)}
-        </ScrollView>)}
+                      {V.production[v].totalDownloadMb} MB
+                    </C>
+                  </T>
+                  <T style={e.totalChip}>
+                    <T style={[e.totalDot,{backgroundColor:t.emerald500}]}/>
+                    <C style={e.totalChipText}>
+                      Compression:{" "}
+                      {V.production[v].compressionRatioPct}%
+                    </C>
+                  </T>
+                </T>
+              </T>
+            </T>}
+        </Te>}
 
       
       
       
-      {activeSubTab === 'files' && (<View style={{ flex: 1 }}>
+      {M==="files"&&<T style={{flex:1}}>
           
-          <View style={bundleStyles.filterContainer}>
-            <View style={bundleStyles.searchRow}>
-              <SearchIcon color={AppColors.grayTextWeak} size={15}/>
-              <TextInput accessible={true} accessibilityRole="search" accessibilityLabel="Search files" accessibilityHint="Type a filename, path, or extension to filter" placeholder={t('bundle.searchFilesPlaceholder')} placeholderTextColor={AppColors.grayTextWeak} value={search} onChangeText={setSearch} style={bundleStyles.searchInput} autoCorrect={false} autoCapitalize="none"/>
-              {search.length > 0 && (<Pressable accessible={true} accessibilityRole="button" accessibilityLabel="Clear search input" onPress={() => setSearch('')} hitSlop={10}>
-                  <ClearIcon color={AppColors.grayTextWeak} size={14}/>
-                </Pressable>)}
-              <CopyButton value={() => filteredFiles} label={t('bundle.filteredFilesJson')}/>
-            </View>
+          <T style={e.filterContainer}>
+            <T style={e.searchRow}>
+              <Bt color={t.grayTextWeak}size={15}/>
+              <St accessible={!0}accessibilityRole="search"accessibilityLabel="Search files"accessibilityHint="Type a filename, path, or extension to filter"placeholder={k("bundle.searchFilesPlaceholder")}placeholderTextColor={t.grayTextWeak}value={P}onChangeText={W}style={e.searchInput}autoCorrect={!1}autoCapitalize="none"/>
+              {P.length>0&&<He accessible={!0}accessibilityRole="button"accessibilityLabel="Clear search input"onPress={()=>W("")}hitSlop={10}>
+                  <Vt color={t.grayTextWeak}size={14}/>
+                </He>}
+              <K value={()=>ke}label={k("bundle.filteredFilesJson")}/>
+            </T>
 
             
-            <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={bundleStyles.categoryPillsScroll}>
-              {CATEGORY_TABS.map(tab => {
-                const isActive = activeCategory === tab.key;
-                const count = tab.key === 'ALL'
-                    ? bundleFiles.length
-                    : tab.key === 'UNUSED'
-                        ? bundleFiles.filter(f => f.isConsumed === false).length
-                        : tab.key === 'CONSUMED'
-                            ? bundleFiles.filter(f => f.isConsumed !== false).length
-                            : bundleFiles.filter(f => f.category === tab.key).length;
-                return (<TouchableScale 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.red500,
-                            borderColor: AppColors.red600,
-                        },
-                        tab.key === 'CONSUMED' &&
-                            isActive && {
-                            backgroundColor: AppColors.emerald600,
-                            borderColor: AppColors.emerald700,
-                        },
-                    ]}>
-                    <BundleCategoryIcon type={tab.iconType} size={12} color={isActive ? AppColors.white : AppColors.grayTextStrong}/>
-                    <Text style={[
-                        bundleStyles.catPillText,
-                        isActive && bundleStyles.catPillTextActive,
-                    ]}>
-                      {t(tab.labelKey)} ({count})
-                    </Text>
-                  </TouchableScale>);
-            })}
-            </ScrollView>
-          </View>
+            <Te horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={e.categoryPillsScroll}>
+              {Ro.map(o=>{const z=D===o.key,L=o.key==="ALL"?I.length:o.key==="UNUSED"?I.filter(H=>H.isConsumed===!1).length:o.key==="CONSUMED"?I.filter(H=>H.isConsumed!==!1).length:I.filter(H=>H.category===o.key).length;return<G key={o.key}accessible={!0}accessibilityRole="button"accessibilityLabel={`Filter by ${k(o.labelKey)}, ${L} items`}accessibilityState={{selected:z}}accessibilityHint={`Filters files list to ${k(o.labelKey)}`}onPress={()=>O(o.key)}style={[e.catPill,z&&e.catPillActive,o.key==="UNUSED"&&z&&{backgroundColor:t.red500,borderColor:t.red600},o.key==="CONSUMED"&&z&&{backgroundColor:t.emerald600,borderColor:t.emerald700}]}>
+                    <Z type={o.iconType}size={12}color={z?t.white:t.grayTextStrong}/>
+                    <C style={[e.catPillText,z&&e.catPillTextActive]}>
+                      {k(o.labelKey)} ({L})
+                    </C>
+                  </G>})}
+            </Te>
+          </T>
 
           
-          <ScrollView style={{ flex: 1 }} contentContainerStyle={bundleStyles.contentContainer} keyboardShouldPersistTaps="handled">
+          <Te style={{flex:1}}contentContainerStyle={e.contentContainer}keyboardShouldPersistTaps="handled">
             
-            <View style={bundleStyles.treeHeaderRow}>
-              <View style={bundleStyles.viewModeToggleGroup}>
-                <TouchableScale accessible={true} accessibilityRole="button" accessibilityLabel="Tree folder view" accessibilityState={{ selected: filesViewMode === 'tree' }} onPress={() => setFilesViewMode('tree')} style={[
-                bundleStyles.viewModeBtn,
-                filesViewMode === 'tree' && bundleStyles.viewModeBtnActive,
-            ]}>
-                  <Text style={[
-                bundleStyles.viewModeBtnText,
-                filesViewMode === 'tree' &&
-                    bundleStyles.viewModeBtnTextActive,
-            ]}>
-                    {t('bundle.treeView')}
-                  </Text>
-                </TouchableScale>
-                <TouchableScale accessible={true} accessibilityRole="button" accessibilityLabel="Flat list view" accessibilityState={{ selected: filesViewMode === 'list' }} onPress={() => setFilesViewMode('list')} style={[
-                bundleStyles.viewModeBtn,
-                filesViewMode === 'list' && bundleStyles.viewModeBtnActive,
-            ]}>
-                  <Text style={[
-                bundleStyles.viewModeBtnText,
-                filesViewMode === 'list' &&
-                    bundleStyles.viewModeBtnTextActive,
-            ]}>
-                    {t('bundle.flatList')}
-                  </Text>
-                </TouchableScale>
-              </View>
-
-              {filesViewMode === 'tree' ? (<View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-                  <TouchableScale accessible={true} accessibilityRole="button" accessibilityLabel="Expand all folders" onPress={expandAllFolders}>
-                    <Text style={bundleStyles.treeActionLink}>
-                      {t('bundle.expand')}
-                    </Text>
-                  </TouchableScale>
-                  <Text style={{ color: AppColors.grayTextWeak, fontSize: 11 }}>
+            <T style={e.treeHeaderRow}>
+              <T style={e.viewModeToggleGroup}>
+                <G accessible={!0}accessibilityRole="button"accessibilityLabel="Tree folder view"accessibilityState={{selected:Se==="tree"}}onPress={()=>Xe("tree")}style={[e.viewModeBtn,Se==="tree"&&e.viewModeBtnActive]}>
+                  <C style={[e.viewModeBtnText,Se==="tree"&&e.viewModeBtnTextActive]}>
+                    {k("bundle.treeView")}
+                  </C>
+                </G>
+                <G accessible={!0}accessibilityRole="button"accessibilityLabel="Flat list view"accessibilityState={{selected:Se==="list"}}onPress={()=>Xe("list")}style={[e.viewModeBtn,Se==="list"&&e.viewModeBtnActive]}>
+                  <C style={[e.viewModeBtnText,Se==="list"&&e.viewModeBtnTextActive]}>
+                    {k("bundle.flatList")}
+                  </C>
+                </G>
+              </T>
+
+              {Se==="tree"?<T style={{flexDirection:"row",alignItems:"center",gap:8}}>
+                  <G accessible={!0}accessibilityRole="button"accessibilityLabel="Expand all folders"onPress={At}>
+                    <C style={e.treeActionLink}>
+                      {k("bundle.expand")}
+                    </C>
+                  </G>
+                  <C style={{color:t.grayTextWeak,fontSize:11}}>
                     •
-                  </Text>
-                  <TouchableScale accessible={true} accessibilityRole="button" accessibilityLabel="Collapse all folders" onPress={collapseAllFolders}>
-                    <Text style={bundleStyles.treeActionLink}>
-                      {t('bundle.collapse')}
-                    </Text>
-                  </TouchableScale>
-                </View>) : (<Text style={bundleStyles.listHeaderCount}>
-                  {t('bundle.showingFilesOf', {
-                    shown: filteredFiles.length,
-                    total: bundleFiles.length,
-                })}
-                </Text>)}
-            </View>
+                  </C>
+                  <G accessible={!0}accessibilityRole="button"accessibilityLabel="Collapse all folders"onPress={Ht}>
+                    <C style={e.treeActionLink}>
+                      {k("bundle.collapse")}
+                    </C>
+                  </G>
+                </T>:<C style={e.listHeaderCount}>
+                  {k("bundle.showingFilesOf",{shown:ke.length,total:I.length})}
+                </C>}
+            </T>
 
             
-            {filesViewMode === 'tree' ? (<View style={bundleStyles.treeRootCard}>
-                {fileTreeNodes.map((node, nIdx) => (<BundleTreeNodeView key={node.id} node={node} level={0} search={search} totalBundleKb={summary.totalKb} expandedFolders={expandedFolders} toggleFolder={toggleFolder} isLastChild={nIdx === fileTreeNodes.length - 1} onDownload={f => downloadBundleFile(f, analysis?.scriptURL)}/>))}
-              </View>) : (filteredFiles.map((file, index) => {
-                const categoryMeta = CATEGORY_COLORS[file.category] || CATEGORY_COLORS.typescript;
-                const pctOfTotal = ((file.sizeKb / summary.totalKb) *
-                    100).toFixed(1);
-                const isUnused = file.isConsumed === false;
-                return (<View key={file.id} style={[
-                        bundleStyles.fileCard,
-                        isUnused && bundleStyles.treeFileCardUnused,
-                    ]}>
-                    <View style={bundleStyles.fileCardTop}>
-                      <View style={bundleStyles.sNoBadge}>
-                        <Text style={bundleStyles.sNoText}>#{index + 1}</Text>
-                      </View>
-
-                      <MediaPreviewThumbnail file={file}/>
-
-                      <View style={{ flex: 1, paddingHorizontal: 4 }}>
-                        <View style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 6,
-                        flexWrap: 'wrap',
-                    }}>
-                          <HighlightText text={file.name} search={search} style={bundleStyles.fileName} highlightStyle={bundleStyles.searchHighlight}/>
-                          {isUnused ? (<View style={bundleStyles.unusedBadge}>
-                              <Text style={bundleStyles.unusedBadgeText}>
-                                {t('bundle.notConsumed')}
-                              </Text>
-                            </View>) : (<View style={bundleStyles.consumedBadge}>
-                              <Text style={bundleStyles.consumedBadgeText}>
-                                {t('bundle.consumed')}
-                              </Text>
-                            </View>)}
-                        </View>
-                        <HighlightText text={file.path} search={search} style={bundleStyles.filePath} highlightStyle={bundleStyles.searchHighlight} numberOfLines={1}/>
-                      </View>
-
-                      <View style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 6,
-                    }}>
-                        <View style={bundleStyles.fileSizeBox}>
-                          <Text style={[
-                        bundleStyles.fileSizeKb,
-                        isUnused && { color: AppColors.amber800Warm },
-                    ]}>
-                            {file.sizeKb >= 1024
-                        ? t('bundle.fileSizeMb', {
-                            size: (file.sizeKb / 1024).toFixed(2),
-                        })
-                        : t('bundle.fileSizeKb', { size: file.sizeKb })}
-                          </Text>
-                          <Text style={bundleStyles.filePercent}>
-                            {pctOfTotal}%
-                          </Text>
-                        </View>
-                        <TouchableScale onPress={() => downloadBundleFile(file, analysis?.scriptURL)} style={bundleStyles.downloadFileBtn} hitSlop={8}>
-                          <DownloadIcon size={14} color={AppColors.sky500}/>
-                        </TouchableScale>
-                        <CopyButton value={() => file} label={t('bundle.fileDetailsJson')}/>
-                      </View>
-                    </View>
-
-                    <View style={bundleStyles.fileProgressTrack}>
-                      <View style={[
-                        bundleStyles.fileProgressBar,
-                        {
-                            width: `${Math.min(100, Math.max(4, Number(pctOfTotal) * 4))}%`,
-                            backgroundColor: isUnused
-                                ? AppColors.red500
-                                : categoryMeta.color,
-                        },
-                    ]}/>
-                    </View>
-
-                    <View style={bundleStyles.fileCardBottom}>
-                      <Text style={bundleStyles.fileMetaText}>{file.meta}</Text>
-                      {file.advice && (<View style={[
-                            bundleStyles.adviceBadge,
-                            file.status === 'warning' &&
-                                bundleStyles.adviceWarning,
-                            file.status === 'optimal' &&
-                                bundleStyles.adviceOptimal,
-                            isUnused && bundleStyles.adviceUnused,
-                        ]}>
-                          {isUnused ? (<TrashIcon color={AppColors.red600} size={12}/>) : file.status === 'warning' ? (<LightbulbIcon color={AppColors.amber800Warm} size={12}/>) : (<SparkleIcon color={AppColors.emerald700} size={12}/>)}
-                          <Text style={[
-                            bundleStyles.adviceText,
-                            file.status === 'warning' && {
-                                color: AppColors.amber800Warm,
-                            },
-                            file.status === 'optimal' && {
-                                color: AppColors.emerald700,
-                            },
-                            isUnused && { color: AppColors.red600 },
-                        ]}>
-                            {file.advice}
-                          </Text>
-                        </View>)}
-                    </View>
-                  </View>);
-            }))}
-          </ScrollView>
+            {Se==="tree"?<T style={e.treeRootCard}>
+                {Ve.map((o,z)=><Dt key={o.id}node={o}level={0}search={P}totalBundleKb={B.totalKb}expandedFolders={Ye}toggleFolder={Wt}isLastChild={z===Ve.length-1}onDownload={L=>downloadBundleFile(L,V?.scriptURL)}/>)}
+              </T>:ke.map((o,z)=>{const L=Oe[o.category]||Oe.typescript,H=(o.sizeKb/B.totalKb*100).toFixed(1),N=o.isConsumed===!1;return<T key={o.id}style={[e.fileCard,N&&e.treeFileCardUnused]}>
+                    <T style={e.fileCardTop}>
+                      <T style={e.sNoBadge}>
+                        <C style={e.sNoText}>#{z+1}</C>
+                      </T>
+
+                      <_e file={o}/>
+
+                      <T style={{flex:1,paddingHorizontal:4}}>
+                        <T style={{flexDirection:"row",alignItems:"center",gap:6,flexWrap:"wrap"}}>
+                          <Ie text={o.name}search={P}style={e.fileName}highlightStyle={e.searchHighlight}/>
+                          {N?<T style={e.unusedBadge}>
+                              <C style={e.unusedBadgeText}>
+                                {k("bundle.notConsumed")}
+                              </C>
+                            </T>:<T style={e.consumedBadge}>
+                              <C style={e.consumedBadgeText}>
+                                {k("bundle.consumed")}
+                              </C>
+                            </T>}
+                        </T>
+                        <Ie text={o.path}search={P}style={e.filePath}highlightStyle={e.searchHighlight}numberOfLines={1}/>
+                      </T>
+
+                      <T style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                        <T style={e.fileSizeBox}>
+                          <C style={[e.fileSizeKb,N&&{color:t.amber800Warm}]}>
+                            {o.sizeKb>=1024?k("bundle.fileSizeMb",{size:(o.sizeKb/1024).toFixed(2)}):k("bundle.fileSizeKb",{size:o.sizeKb})}
+                          </C>
+                          <C style={e.filePercent}>
+                            {H}%
+                          </C>
+                        </T>
+                        <G onPress={()=>downloadBundleFile(o,V?.scriptURL)}style={e.downloadFileBtn}hitSlop={8}>
+                          <Ze size={14}color={t.sky500}/>
+                        </G>
+                        <K value={()=>o}label={k("bundle.fileDetailsJson")}/>
+                      </T>
+                    </T>
+
+                    <T style={e.fileProgressTrack}>
+                      <T style={[e.fileProgressBar,{width:`${Math.min(100,Math.max(4,Number(H)*4))}%`,backgroundColor:N?t.red500:L.color}]}/>
+                    </T>
+
+                    <T style={e.fileCardBottom}>
+                      <C style={e.fileMetaText}>{o.meta}</C>
+                      {o.advice&&<T style={[e.adviceBadge,o.status==="warning"&&e.adviceWarning,o.status==="optimal"&&e.adviceOptimal,N&&e.adviceUnused]}>
+                          {N?<Qt color={t.red600}size={12}/>:o.status==="warning"?<Je color={t.amber800Warm}size={12}/>:<Pt color={t.emerald700}size={12}/>}
+                          <C style={[e.adviceText,o.status==="warning"&&{color:t.amber800Warm},o.status==="optimal"&&{color:t.emerald700},N&&{color:t.red600}]}>
+                            {o.advice}
+                          </C>
+                        </T>}
+                    </T>
+                  </T>})}
+          </Te>
 
           
-          <View style={bundleStyles.stickyFooterBar}>
-            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-              <LayersIcon color={AppColors.purple} size={14}/>
-              <Text style={bundleStyles.footerTitle}>
-                {t('bundle.filesOf', {
-                count: filteredFiles.length,
-                total: summary.totalCount,
-            })}
-              </Text>
-            </View>
-            <Text style={bundleStyles.footerSizeVal}>
-              {t('bundle.kbMbValue', {
-                kb: filteredTotalKb,
-                mb: (filteredTotalKb / 1024).toFixed(2),
-            })}
-            </Text>
-          </View>
-        </View>)}
+          <T style={e.stickyFooterBar}>
+            <T style={{flexDirection:"row",alignItems:"center",gap:6}}>
+              <Mt color={t.purple}size={14}/>
+              <C style={e.footerTitle}>
+                {k("bundle.filesOf",{count:ke.length,total:B.totalCount})}
+              </C>
+            </T>
+            <C style={e.footerSizeVal}>
+              {k("bundle.kbMbValue",{kb:qe,mb:(qe/1024).toFixed(2)})}
+            </C>
+          </T>
+        </T>}
 
       
       
       
-      {activeSubTab === 'packages' && (<View style={{ flex: 1 }}>
-          <ScrollView style={{ flex: 1 }} contentContainerStyle={bundleStyles.contentContainer} keyboardShouldPersistTaps="handled">
-            <View style={bundleStyles.filterContainer}>
-              <View style={bundleStyles.searchRow}>
-                <SearchIcon color={AppColors.grayTextWeak} size={15}/>
-                <TextInput accessible={true} accessibilityRole="search" accessibilityLabel="Search packages" accessibilityHint="Type a package name or description to filter" placeholder={t('bundle.searchPackagesPlaceholder')} placeholderTextColor={AppColors.grayTextWeak} value={search} onChangeText={setSearch} style={bundleStyles.searchInput} autoCorrect={false} autoCapitalize="none"/>
-                {search.length > 0 && (<Pressable accessible={true} accessibilityRole="button" accessibilityLabel="Clear search input" onPress={() => setSearch('')} hitSlop={10}>
-                    <ClearIcon color={AppColors.grayTextWeak} size={14}/>
-                  </Pressable>)}
-                <CopyButton value={() => filteredPackages} label={t('bundle.dependenciesJson')}/>
-              </View>
-            </View>
-
-            <Text style={bundleStyles.listHeaderCount}>
-              {t('bundle.showingDependencies', {
-                count: filteredPackages.length,
-            })}
-            </Text>
-
-            {filteredPackages.map((pkg, index) => {
-                const cleanInstalledVersion = pkg.version
-                    ? pkg.version.replace(/^\^/, '')
-                    : '';
-                const hasUpdate = !!pkg.latestVersion &&
-                    !!cleanInstalledVersion &&
-                    pkg.latestVersion !== cleanInstalledVersion;
-                return (<View key={pkg.id} style={[
-                        bundleStyles.fileCard,
-                        pkg.isDeprecated && {
-                            borderColor: AppColors.errorBorder,
-                            backgroundColor: AppColors.errorCardBg,
-                        },
-                    ]}>
+      {M==="packages"&&<T style={{flex:1}}>
+          <Te style={{flex:1}}contentContainerStyle={e.contentContainer}keyboardShouldPersistTaps="handled">
+            <T style={e.filterContainer}>
+              <T style={e.searchRow}>
+                <Bt color={t.grayTextWeak}size={15}/>
+                <St accessible={!0}accessibilityRole="search"accessibilityLabel="Search packages"accessibilityHint="Type a package name or description to filter"placeholder={k("bundle.searchPackagesPlaceholder")}placeholderTextColor={t.grayTextWeak}value={P}onChangeText={W}style={e.searchInput}autoCorrect={!1}autoCapitalize="none"/>
+                {P.length>0&&<He accessible={!0}accessibilityRole="button"accessibilityLabel="Clear search input"onPress={()=>W("")}hitSlop={10}>
+                    <Vt color={t.grayTextWeak}size={14}/>
+                  </He>}
+                <K value={()=>Me}label={k("bundle.dependenciesJson")}/>
+              </T>
+            </T>
+
+            <C style={e.listHeaderCount}>
+              {k("bundle.showingDependencies",{count:Me.length})}
+            </C>
+
+            {Me.map((o,z)=>{const L=o.version?o.version.replace(/^\^/,""):"",H=!!o.latestVersion&&!!L&&o.latestVersion!==L;return<T key={o.id}style={[e.fileCard,o.isDeprecated&&{borderColor:t.errorBorder,backgroundColor:t.errorCardBg}]}>
                   
-                  <View style={bundleStyles.fileCardTop}>
-                    <View style={bundleStyles.sNoBadge}>
-                      <Text style={bundleStyles.sNoText}>#{index + 1}</Text>
-                    </View>
-
-                    <PackageLogoRenderer name={pkg.name} color={pkg.color} size={28}/>
-
-                    <View style={{ flex: 1, paddingHorizontal: 4 }}>
-                      <View style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 6,
-                        flexWrap: 'wrap',
-                    }}>
-                        <HighlightText text={pkg.name} search={search} style={bundleStyles.fileName} highlightStyle={bundleStyles.searchHighlight}/>
-                        <View style={bundleStyles.versionPill}>
-                          <Text style={bundleStyles.versionPillText}>
-                            {cleanInstalledVersion
-                        ? t('bundle.versionPrefix', {
-                            version: cleanInstalledVersion,
-                        })
-                        : t('bundle.bundled')}
-                          </Text>
-                        </View>
-
-                        {pkg.isDeprecated ? (<View style={bundleStyles.deprecatedBadge}>
-                            <Text style={bundleStyles.deprecatedBadgeText}>
-                              {t('bundle.deprecated')}
-                            </Text>
-                          </View>) : hasUpdate ? (<View style={bundleStyles.updateBadge}>
-                            <Text style={bundleStyles.updateBadgeText}>
-                              {t('bundle.updateAvailable', {
-                            version: pkg.latestVersion,
-                        })}
-                            </Text>
-                          </View>) : cleanInstalledVersion ? (<View style={[
-                            bundleStyles.updateBadge,
-                            {
-                                backgroundColor: AppColors.gray100,
-                                borderColor: AppColors.gray200,
-                            },
-                        ]}>
-                            <Text style={[
-                            bundleStyles.updateBadgeText,
-                            { color: AppColors.gray600 },
-                        ]}>
-                              {t('bundle.upToDate')}
-                            </Text>
-                          </View>) : (<View style={[
-                            bundleStyles.updateBadge,
-                            {
-                                backgroundColor: AppColors.gray100,
-                                borderColor: AppColors.gray200,
-                            },
-                        ]}>
-                            <Text style={[
-                            bundleStyles.updateBadgeText,
-                            { color: AppColors.gray600 },
-                        ]}>
-                              {t('bundle.bundledBadge')}
-                            </Text>
-                          </View>)}
-                      </View>
-                    </View>
-
-                    <View style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 6,
-                    }}>
-                      <View style={bundleStyles.fileSizeBox}>
-                        <Text style={bundleStyles.fileSizeKb}>
-                          {t('bundle.fileSizeKb', { size: pkg.sizeKb })}
-                        </Text>
-                        <Text style={bundleStyles.filePercent}>
-                          {pkg.percentage}%
-                        </Text>
-                      </View>
-                      <CopyButton value={() => pkg} label={t('bundle.packageDetailsJson')}/>
-                    </View>
-                  </View>
+                  <T style={e.fileCardTop}>
+                    <T style={e.sNoBadge}>
+                      <C style={e.sNoText}>#{z+1}</C>
+                    </T>
+
+                    <Mo name={o.name}color={o.color}size={28}/>
+
+                    <T style={{flex:1,paddingHorizontal:4}}>
+                      <T style={{flexDirection:"row",alignItems:"center",gap:6,flexWrap:"wrap"}}>
+                        <Ie text={o.name}search={P}style={e.fileName}highlightStyle={e.searchHighlight}/>
+                        <T style={e.versionPill}>
+                          <C style={e.versionPillText}>
+                            {L?k("bundle.versionPrefix",{version:L}):k("bundle.bundled")}
+                          </C>
+                        </T>
+
+                        {o.isDeprecated?<T style={e.deprecatedBadge}>
+                            <C style={e.deprecatedBadgeText}>
+                              {k("bundle.deprecated")}
+                            </C>
+                          </T>:H?<T style={e.updateBadge}>
+                            <C style={e.updateBadgeText}>
+                              {k("bundle.updateAvailable",{version:o.latestVersion})}
+                            </C>
+                          </T>:L?<T style={[e.updateBadge,{backgroundColor:t.gray100,borderColor:t.gray200}]}>
+                            <C style={[e.updateBadgeText,{color:t.gray600}]}>
+                              {k("bundle.upToDate")}
+                            </C>
+                          </T>:<T style={[e.updateBadge,{backgroundColor:t.gray100,borderColor:t.gray200}]}>
+                            <C style={[e.updateBadgeText,{color:t.gray600}]}>
+                              {k("bundle.bundledBadge")}
+                            </C>
+                          </T>}
+                      </T>
+                    </T>
+
+                    <T style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                      <T style={e.fileSizeBox}>
+                        <C style={e.fileSizeKb}>
+                          {k("bundle.fileSizeKb",{size:o.sizeKb})}
+                        </C>
+                        <C style={e.filePercent}>
+                          {o.percentage}%
+                        </C>
+                      </T>
+                      <K value={()=>o}label={k("bundle.packageDetailsJson")}/>
+                    </T>
+                  </T>
 
                   
-                  <View style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 6,
-                        marginTop: 4,
-                        marginBottom: 2,
-                    }}>
-                    <View style={[
-                        bundleStyles.pkgBadge,
-                        {
-                            backgroundColor: `${pkg.color}1F`,
-                            borderColor: `${pkg.color}4D`,
-                        },
-                    ]}>
-                      <Text style={[bundleStyles.pkgBadgeText, { color: pkg.color }]}>
-                        {pkg.category.toUpperCase()}
-                      </Text>
-                    </View>
-                    <Text style={[bundleStyles.filePath, { flex: 1, marginTop: 0 }]} numberOfLines={1}>
-                      {pkg.description}
-                    </Text>
-                  </View>
+                  <T style={{flexDirection:"row",alignItems:"center",gap:6,marginTop:4,marginBottom:2}}>
+                    <T style={[e.pkgBadge,{backgroundColor:`${o.color}1F`,borderColor:`${o.color}4D`}]}>
+                      <C style={[e.pkgBadgeText,{color:o.color}]}>
+                        {o.category.toUpperCase()}
+                      </C>
+                    </T>
+                    <C style={[e.filePath,{flex:1,marginTop:0}]}numberOfLines={1}>
+                      {o.description}
+                    </C>
+                  </T>
 
                   
-                  {pkg.isDeprecated && pkg.deprecationReason && (<View style={bundleStyles.deprecationBox}>
-                      <View style={{
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            gap: 5,
-                        }}>
-                        <CircleAlertIcon color={AppColors.errorColor} size={12}/>
-                        <Text style={bundleStyles.deprecationText}>
-                          {pkg.deprecationReason}
-                        </Text>
-                      </View>
-                    </View>)}
-
-                  <View style={bundleStyles.fileProgressTrack}>
-                    <View style={[
-                        bundleStyles.fileProgressBar,
-                        {
-                            width: `${pkg.percentage * 2}%`,
-                            backgroundColor: pkg.isDeprecated
-                                ? AppColors.red500
-                                : pkg.color,
-                        },
-                    ]}/>
-                  </View>
+                  {o.isDeprecated&&o.deprecationReason&&<T style={e.deprecationBox}>
+                      <T style={{flexDirection:"row",alignItems:"center",gap:5}}>
+                        <Ge color={t.errorColor}size={12}/>
+                        <C style={e.deprecationText}>
+                          {o.deprecationReason}
+                        </C>
+                      </T>
+                    </T>}
+
+                  <T style={e.fileProgressTrack}>
+                    <T style={[e.fileProgressBar,{width:`${o.percentage*2}%`,backgroundColor:o.isDeprecated?t.red500:o.color}]}/>
+                  </T>
 
                   
-                  <View style={{
-                        flexDirection: 'row',
-                        justifyContent: 'space-between',
-                        alignItems: 'center',
-                        marginTop: 3,
-                    }}>
-                    <View style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 8,
-                    }}>
-                      <View style={bundleStyles.typeTag}>
-                        <Text style={bundleStyles.typeTagText}>
-                          {pkg.type === 'direct'
-                        ? t('bundle.direct')
-                        : t('bundle.transitive')}
-                        </Text>
-                      </View>
-                      {pkg.lastActive && (<View style={{
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            gap: 4,
-                        }}>
-                          <ClockIcon color={AppColors.grayTextWeak} size={11}/>
-                          <Text style={bundleStyles.lastActiveText}>
-                            {pkg.lastActive}
-                          </Text>
-                        </View>)}
-                    </View>
-
-                    <View style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 8,
-                    }}>
-                      <Text style={bundleStyles.fileMetaText}>
-                        {t('bundle.minified', { size: pkg.sizeKb })}
-                      </Text>
-                      <TouchableScale 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}`;
-                        Linking.openURL(url).catch(() => { });
-                    }} style={bundleStyles.npmLinkBtn}>
-                        <Text style={bundleStyles.npmLinkText}>
-                          {t('bundle.npmLink')}
-                        </Text>
-                      </TouchableScale>
-                    </View>
-                  </View>
-                </View>);
-            })}
-          </ScrollView>
+                  <T style={{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginTop:3}}>
+                    <T style={{flexDirection:"row",alignItems:"center",gap:8}}>
+                      <T style={e.typeTag}>
+                        <C style={e.typeTagText}>
+                          {o.type==="direct"?k("bundle.direct"):k("bundle.transitive")}
+                        </C>
+                      </T>
+                      {o.lastActive&&<T style={{flexDirection:"row",alignItems:"center",gap:4}}>
+                          <To color={t.grayTextWeak}size={11}/>
+                          <C style={e.lastActiveText}>
+                            {o.lastActive}
+                          </C>
+                        </T>}
+                    </T>
+
+                    <T style={{flexDirection:"row",alignItems:"center",gap:8}}>
+                      <C style={e.fileMetaText}>
+                        {k("bundle.minified",{size:o.sizeKb})}
+                      </C>
+                      <G accessible={!0}accessibilityRole="link"accessibilityLabel={`Open ${o.name} on NPM`}accessibilityHint="Opens NPM package page in browser"onPress={()=>{const N=o.npmUrl||`https://www.npmjs.com/package/${o.name}`;Ct.openURL(N).catch(()=>{})}}style={e.npmLinkBtn}>
+                        <C style={e.npmLinkText}>
+                          {k("bundle.npmLink")}
+                        </C>
+                      </G>
+                    </T>
+                  </T>
+                </T>})}
+          </Te>
 
           
-          <View style={bundleStyles.stickyFooterBar}>
-            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-              <PackageIcon color={AppColors.purple} size={14}/>
-              <Text style={bundleStyles.footerTitle}>
-                {t('bundle.dependenciesCount', {
-                count: filteredPackages.length,
-            })}
-              </Text>
-            </View>
-            <Text style={bundleStyles.footerSizeVal}>
-              {t('bundle.kbMbValue', {
-                kb: packagesTotalKb,
-                mb: (packagesTotalKb / 1024).toFixed(2),
-            })}
-            </Text>
-          </View>
-        </View>)}
+          <T style={e.stickyFooterBar}>
+            <T style={{flexDirection:"row",alignItems:"center",gap:6}}>
+              <Pe color={t.purple}size={14}/>
+              <C style={e.footerTitle}>
+                {k("bundle.dependenciesCount",{count:Me.length})}
+              </C>
+            </T>
+            <C style={e.footerSizeVal}>
+              {k("bundle.kbMbValue",{kb:Qe,mb:(Qe/1024).toFixed(2)})}
+            </C>
+          </T>
+        </T>}
 
       
       
       
-      {activeSubTab === 'media' && (<View style={{ flex: 1 }}>
-          <ScrollView style={{ flex: 1 }} contentContainerStyle={bundleStyles.contentContainer} keyboardShouldPersistTaps="handled">
-            <View style={bundleStyles.tipsCard}>
-              <View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                marginBottom: 8,
-            }}>
-                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-                  <StorageIcon color={AppColors.purple} size={18}/>
-                  <Text style={bundleStyles.tipsHeading}>
-                    {t('bundle.mediaAuditorTitle')}
-                  </Text>
-                </View>
-                <CopyButton value={() => mediaFiles} label={t('bundle.mediaAssetsJson')}/>
-              </View>
-              <Text style={bundleStyles.tipDesc}>
-                {t('bundle.mediaAuditorPrefix')}{' '}
-                <Text style={{
-                fontFamily: AppFonts.interBold,
-                color: AppColors.purple,
-            }}>
-                  {summary.images.pct + summary.fonts.pct}%
-                </Text>{' '}
-                {t('bundle.mediaAuditorMid', {
-                kb: summary.images.kb + summary.fonts.kb,
-            })}{' '}
-                <Text style={{
-                fontFamily: AppFonts.interBold,
-                color: AppColors.emerald700,
-            }}>
-                  {t('bundle.mediaSavings', { size: 540 })}
-                </Text>{' '}
-                {t('bundle.mediaAuditorSuffix')}
-              </Text>
-            </View>
-
-            <Text style={bundleStyles.listHeaderCount}>
-              {t('bundle.mediaAssetsList', { count: mediaFiles.length })}
-            </Text>
-
-            {mediaFiles.map((file, index) => (<View key={file.id} style={bundleStyles.fileCard}>
-                <View style={bundleStyles.fileCardTop}>
-                  <View style={bundleStyles.sNoBadge}>
-                    <Text style={bundleStyles.sNoText}>#{index + 1}</Text>
-                  </View>
-
-                  <MediaPreviewThumbnail file={file}/>
-
-                  <View style={{ flex: 1 }}>
-                    <Text style={bundleStyles.fileName}>{file.name}</Text>
-                    <Text style={bundleStyles.filePath}>{file.path}</Text>
-                  </View>
-
-                  <View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 6,
-                }}>
-                    <View style={bundleStyles.fileSizeBox}>
-                      <Text style={bundleStyles.fileSizeKb}>
-                        {t('bundle.fileSizeKb', { size: file.sizeKb })}
-                      </Text>
-                    </View>
-                    <TouchableScale accessible={true} accessibilityRole="button" accessibilityLabel={`Download ${file.name}`} accessibilityHint="Downloads media asset file" onPress={() => downloadBundleFile(file, analysis?.scriptURL)} style={bundleStyles.downloadFileBtn} hitSlop={8}>
-                      <DownloadIcon size={14} color={AppColors.sky500}/>
-                    </TouchableScale>
-                    <CopyButton value={() => file} label={t('bundle.mediaItemJson')}/>
-                  </View>
-                </View>
-
-                <View style={bundleStyles.fileCardBottom}>
-                  <Text style={bundleStyles.fileMetaText}>{file.meta}</Text>
-                  {file.advice && (<View style={[
-                        bundleStyles.adviceBadge,
-                        file.status === 'warning' && bundleStyles.adviceWarning,
-                        file.status === 'optimal' && bundleStyles.adviceOptimal,
-                    ]}>
-                      {file.status === 'warning' ? (<LightbulbIcon color={AppColors.amber800Warm} size={12}/>) : (<SparkleIcon color={AppColors.emerald700} size={12}/>)}
-                      <Text style={[
-                        bundleStyles.adviceText,
-                        file.status === 'warning' && {
-                            color: AppColors.amber800Warm,
-                        },
-                        file.status === 'optimal' && {
-                            color: AppColors.emerald700,
-                        },
-                    ]}>
-                        {file.advice}
-                      </Text>
-                    </View>)}
-                </View>
-              </View>))}
-          </ScrollView>
+      {M==="media"&&<T style={{flex:1}}>
+          <Te style={{flex:1}}contentContainerStyle={e.contentContainer}keyboardShouldPersistTaps="handled">
+            <T style={e.tipsCard}>
+              <T style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:8}}>
+                <T style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                  <Ee color={t.purple}size={18}/>
+                  <C style={e.tipsHeading}>
+                    {k("bundle.mediaAuditorTitle")}
+                  </C>
+                </T>
+                <K value={()=>ve}label={k("bundle.mediaAssetsJson")}/>
+              </T>
+              <C style={e.tipDesc}>
+                {k("bundle.mediaAuditorPrefix")}{" "}
+                <C style={{fontFamily:S.interBold,color:t.purple}}>
+                  {B.images.pct+B.fonts.pct}%
+                </C>{" "}
+                {k("bundle.mediaAuditorMid",{kb:B.images.kb+B.fonts.kb})}{" "}
+                <C style={{fontFamily:S.interBold,color:t.emerald700}}>
+                  {k("bundle.mediaSavings",{size:540})}
+                </C>{" "}
+                {k("bundle.mediaAuditorSuffix")}
+              </C>
+            </T>
+
+            <C style={e.listHeaderCount}>
+              {k("bundle.mediaAssetsList",{count:ve.length})}
+            </C>
+
+            {ve.map((o,z)=><T key={o.id}style={e.fileCard}>
+                <T style={e.fileCardTop}>
+                  <T style={e.sNoBadge}>
+                    <C style={e.sNoText}>#{z+1}</C>
+                  </T>
+
+                  <_e file={o}/>
+
+                  <T style={{flex:1}}>
+                    <C style={e.fileName}>{o.name}</C>
+                    <C style={e.filePath}>{o.path}</C>
+                  </T>
+
+                  <T style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                    <T style={e.fileSizeBox}>
+                      <C style={e.fileSizeKb}>
+                        {k("bundle.fileSizeKb",{size:o.sizeKb})}
+                      </C>
+                    </T>
+                    <G accessible={!0}accessibilityRole="button"accessibilityLabel={`Download ${o.name}`}accessibilityHint="Downloads media asset file"onPress={()=>downloadBundleFile(o,V?.scriptURL)}style={e.downloadFileBtn}hitSlop={8}>
+                      <Ze size={14}color={t.sky500}/>
+                    </G>
+                    <K value={()=>o}label={k("bundle.mediaItemJson")}/>
+                  </T>
+                </T>
+
+                <T style={e.fileCardBottom}>
+                  <C style={e.fileMetaText}>{o.meta}</C>
+                  {o.advice&&<T style={[e.adviceBadge,o.status==="warning"&&e.adviceWarning,o.status==="optimal"&&e.adviceOptimal]}>
+                      {o.status==="warning"?<Je color={t.amber800Warm}size={12}/>:<Pt color={t.emerald700}size={12}/>}
+                      <C style={[e.adviceText,o.status==="warning"&&{color:t.amber800Warm},o.status==="optimal"&&{color:t.emerald700}]}>
+                        {o.advice}
+                      </C>
+                    </T>}
+                </T>
+              </T>)}
+          </Te>
 
           
-          <View style={bundleStyles.stickyFooterBar}>
-            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-              <StorageIcon color={AppColors.purple} size={14}/>
-              <Text style={bundleStyles.footerTitle}>
-                {t('bundle.mediaAndFonts', { count: mediaFiles.length })}
-              </Text>
-            </View>
-            <Text style={bundleStyles.footerSizeVal}>
-              {t('bundle.kbMbValue', {
-                kb: mediaTotalKb,
-                mb: (mediaTotalKb / 1024).toFixed(2),
-            })}
-            </Text>
-          </View>
-        </View>)}
+          <T style={e.stickyFooterBar}>
+            <T style={{flexDirection:"row",alignItems:"center",gap:6}}>
+              <Ee color={t.purple}size={14}/>
+              <C style={e.footerTitle}>
+                {k("bundle.mediaAndFonts",{count:ve.length})}
+              </C>
+            </T>
+            <C style={e.footerSizeVal}>
+              {k("bundle.kbMbValue",{kb:et,mb:(et/1024).toFixed(2)})}
+            </C>
+          </T>
+        </T>}
 
       
       
       
-      {activeSubTab === 'optimizer' && (<ScrollView style={{ flex: 1 }} contentContainerStyle={bundleStyles.contentContainer} keyboardShouldPersistTaps="handled">
-          <View style={bundleStyles.tipsCard}>
-            <View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                marginBottom: 12,
-            }}>
-              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-                <CircleAlertIcon color={AppColors.purple} size={18}/>
-                <Text style={bundleStyles.tipsHeading}>
-                  {t('bundle.optimizerTitle')}
-                </Text>
-              </View>
-              <CopyButton value={() => [
-                t('bundle.optTip1Title'),
-                `${t('bundle.optTip2Title')} (${isHermes ? t('bundle.active') : t('bundle.actionRequired')})`,
-                t('bundle.optTip3Title'),
-                t('bundle.optTip4Title'),
-                t('bundle.optTip5Title'),
-            ]} label={t('bundle.optimizationChecklist')}/>
-            </View>
-
-            {[
-                {
-                    iconType: 'image',
-                    iconColor: AppColors.pink500,
-                    title: t('bundle.optTip1Title'),
-                    desc: t('bundle.optTip1Desc'),
-                    badge: t('bundle.highImpact'),
-                    badgeColor: AppColors.pink500,
-                },
-                {
-                    iconType: 'bolt',
-                    iconColor: isHermes ? AppColors.emerald500 : AppColors.amber500,
-                    title: t('bundle.optTip2Title'),
-                    desc: isHermes
-                        ? t('bundle.optTip2DescActive')
-                        : t('bundle.optTip2DescInactive'),
-                    badge: isHermes
-                        ? t('bundle.active')
-                        : t('bundle.actionRequired'),
-                    badgeColor: isHermes
-                        ? AppColors.emerald500
-                        : AppColors.amber500,
-                },
-                {
-                    iconType: 'font',
-                    iconColor: AppColors.purple500,
-                    title: t('bundle.optTip3Title'),
-                    desc: t('bundle.optTip3Desc'),
-                    badge: t('bundle.mediumImpact'),
-                    badgeColor: AppColors.purple500,
-                },
-                {
-                    iconType: 'source',
-                    iconColor: AppColors.sky500,
-                    title: t('bundle.optTip4Title'),
-                    desc: t('bundle.optTip4Desc'),
-                    badge: t('bundle.bestPractice'),
-                    badgeColor: AppColors.sky500,
-                },
-                {
-                    iconType: 'overhead',
-                    iconColor: AppColors.indigo500,
-                    title: t('bundle.optTip5Title'),
-                    desc: t('bundle.optTip5Desc'),
-                    badge: t('bundle.bestPractice'),
-                    badgeColor: AppColors.indigo500,
-                },
-            ].map((tip, tIdx) => (<View key={tIdx} style={bundleStyles.tipItem}>
-                <View style={bundleStyles.tipItemHeader}>
-                  <View style={bundleStyles.tipTitleWrap}>
-                    <View style={bundleStyles.sNoBadge}>
-                      <Text style={bundleStyles.sNoText}>#{tIdx + 1}</Text>
-                    </View>
-                    <BundleCategoryIcon type={tip.iconType} size={14} color={tip.iconColor}/>
-                    <Text style={bundleStyles.tipTitle}>{tip.title}</Text>
-                  </View>
-                  <View style={bundleStyles.tipActionWrap}>
-                    <View style={[
-                    bundleStyles.impactBadge,
-                    {
-                        backgroundColor: `${tip.badgeColor}18`,
-                        borderColor: `${tip.badgeColor}40`,
-                    },
-                ]}>
-                      <Text style={[
-                    bundleStyles.impactBadgeText,
-                    { color: tip.badgeColor },
-                ]}>
-                        {tip.badge}
-                      </Text>
-                    </View>
-                    <CopyButton value={() => tip} label={t('bundle.tipDetails')}/>
-                  </View>
-                </View>
-                <Text style={bundleStyles.tipDesc}>{tip.desc}</Text>
-              </View>))}
-          </View>
-        </ScrollView>)}
-    </View>);
-});
-const bundleStyles = StyleSheet.create({
-    topTabWrap: {
-        backgroundColor: AppColors.white,
-        paddingVertical: 8,
-        borderBottomWidth: 1,
-        borderBottomColor: AppColors.dividerColor,
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingRight: 10,
-    },
-    reloadButton: {
-        padding: 8,
-        borderRadius: 20,
-        backgroundColor: AppColors.grayBackground,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginLeft: 4,
-    },
-    analyzingContainer: {
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-        gap: 8,
-        padding: 24,
-    },
-    analyzingText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 13,
-        color: AppColors.primaryBlack,
-    },
-    analyzingHint: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 11,
-        color: AppColors.grayTextWeak,
-    },
-    subTabsScroll: {
-        paddingHorizontal: 12,
-        gap: 8,
-        flexDirection: 'row',
-        alignItems: 'center',
-    },
-    subTabPill: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        paddingHorizontal: 12,
-        paddingVertical: 7,
-        borderRadius: 20,
-        backgroundColor: AppColors.grayBackground,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-    },
-    subTabPillActive: {
-        backgroundColor: AppColors.brandPurple,
-        borderColor: AppColors.brandPurple,
-        shadowColor: AppColors.brandPurple,
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.2,
-        shadowRadius: 3,
-        elevation: 2,
-    },
-    subTabPillText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 11.5,
-        color: AppColors.grayTextStrong,
-    },
-    subTabPillTextActive: {
-        fontFamily: AppFonts.interBold,
-        color: AppColors.white,
-    },
-    contentContainer: {
-        padding: 16,
-        paddingBottom: 40,
-        gap: 14,
-    },
-    heroCard: {
-        backgroundColor: AppColors.white,
-        borderRadius: 14,
-        padding: 16,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-        shadowColor: AppColors.primaryBlack,
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.04,
-        shadowRadius: 6,
-        elevation: 2,
-    },
-    heroTopRow: {
-        flexDirection: 'row',
-        alignItems: 'flex-start',
-        gap: 12,
-        marginBottom: 16,
-    },
-    heroIconWrap: {
-        width: 44,
-        height: 44,
-        borderRadius: 12,
-        backgroundColor: `${AppColors.brandPurple}12`,
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderWidth: 1,
-        borderColor: `${AppColors.brandPurple}25`,
-    },
-    heroTitle: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 16,
-        color: AppColors.primaryBlack,
-    },
-    heroSubtitle: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 12,
-        color: AppColors.grayTextWeak,
-        marginTop: 2,
-    },
-    metricsGrid: {
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        gap: 8,
-    },
-    metricBox: {
-        flex: 1,
-        minWidth: '45%',
-        backgroundColor: AppColors.grayBackground,
-        borderRadius: 10,
-        padding: 10,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-    },
-    metricLabel: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9.5,
-        color: AppColors.grayTextWeak,
-        letterSpacing: 0.5,
-    },
-    metricValue: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 14,
-        color: AppColors.primaryBlack,
-        marginTop: 3,
-    },
-    metricHint: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 10.5,
-        color: AppColors.grayText,
-        marginTop: 2,
-    },
-    statusIndicator: {
-        width: 8,
-        height: 8,
-        borderRadius: 4,
-    },
-    prodPlatformScroll: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 8,
-        paddingBottom: 4,
-    },
-    prodPlatformBtn: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingVertical: 7,
-        paddingHorizontal: 12,
-        borderRadius: 20,
-        backgroundColor: AppColors.white,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-        gap: 6,
-    },
-    prodPlatformBtnActive: {
-        backgroundColor: AppColors.brandPurple,
-        borderColor: AppColors.brandPurple,
-        shadowColor: AppColors.brandPurple,
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.18,
-        shadowRadius: 3,
-        elevation: 2,
-    },
-    prodPlatformBtnText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 11.5,
-        color: AppColors.grayTextStrong,
-    },
-    prodPlatformBtnTextActive: {
-        color: AppColors.white,
-    },
-    prodPlatformBadge: {
-        paddingHorizontal: 6,
-        paddingVertical: 2,
-        borderRadius: 10,
-        backgroundColor: `${AppColors.purple}14`,
-    },
-    prodPlatformBadgeActive: {
-        backgroundColor: 'rgba(255, 255, 255, 0.25)',
-    },
-    prodPlatformBadgeText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9.5,
-        color: AppColors.purple,
-    },
-    prodPlatformBadgeTextActive: {
-        color: AppColors.white,
-    },
-    sectionCard: {
-        backgroundColor: AppColors.white,
-        borderRadius: 14,
-        padding: 14,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-        overflow: 'hidden',
-    },
-    sectionHeaderRow: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        marginBottom: 10,
-        gap: 8,
-    },
-    sectionTitle: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 13,
-        color: AppColors.primaryBlack,
-    },
-    sectionSub: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 11,
-        color: AppColors.grayTextWeak,
-    },
-    treemapBar: {
-        flexDirection: 'row',
-        borderRadius: 6,
-        overflow: 'hidden',
-        height: 16,
-        marginBottom: 12,
-        backgroundColor: AppColors.slate200,
-    },
-    prodTreemapBar: {
-        flexDirection: 'row',
-        borderRadius: 6,
-        overflow: 'hidden',
-        height: 16,
-        marginBottom: 12,
-        backgroundColor: AppColors.slate200,
-    },
-    legendGrid: {
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        gap: 8,
-    },
-    legendItem: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        paddingHorizontal: 8,
-        paddingVertical: 5,
-        borderRadius: 8,
-        backgroundColor: `${AppColors.slate200}40`,
-        borderWidth: 1,
-        borderColor: `${AppColors.dividerColor}`,
-        flexShrink: 0,
-    },
-    legendText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 11,
-        color: AppColors.grayTextStrong,
-    },
-    legendVal: {
-        fontFamily: AppFonts.interBold,
-        color: AppColors.primaryBlack,
-    },
-    subsystemCard: {
-        backgroundColor: AppColors.white,
-        borderRadius: 12,
-        padding: 12,
-        marginBottom: 8,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-        gap: 8,
-    },
-    subsystemHeader: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        gap: 8,
-    },
-    subsystemTitle: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 12.5,
-        color: AppColors.primaryBlack,
-    },
-    subsystemBadge: {
-        paddingHorizontal: 6,
-        paddingVertical: 2,
-        borderRadius: 6,
-    },
-    subsystemBadgeText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 10,
-    },
-    subsystemGrid: {
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        gap: 6,
-    },
-    subsystemItem: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 5,
-        paddingHorizontal: 8,
-        paddingVertical: 4,
-        borderRadius: 6,
-        backgroundColor: AppColors.grayBackground,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-    },
-    subsystemItemText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 10.5,
-        color: AppColors.grayTextStrong,
-    },
-    subsystemItemVal: {
-        fontFamily: AppFonts.interBold,
-        color: AppColors.primaryBlack,
-    },
-    catRowCard: {
-        backgroundColor: AppColors.grayBackground,
-        borderRadius: 12,
-        padding: 12,
-        marginBottom: 8,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-        gap: 8,
-    },
-    catRowTop: {
-        flexDirection: 'row',
-        alignItems: 'flex-start',
-        gap: 10,
-    },
-    catIconBox: {
-        width: 36,
-        height: 36,
-        borderRadius: 10,
-        borderWidth: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-        flexShrink: 0,
-    },
-    catRowTitleWrap: {
-        flex: 1,
-        minWidth: 0,
-        gap: 2,
-    },
-    catRowTitle: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 13,
-        color: AppColors.primaryBlack,
-        flex: 1,
-    },
-    catRowDesc: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 10.5,
-        color: AppColors.grayTextWeak,
-        lineHeight: 14.5,
-    },
-    catRowSize: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 12.5,
-        color: AppColors.primaryBlack,
-    },
-    catRowRight: {
-        alignItems: 'flex-end',
-        justifyContent: 'center',
-        flexShrink: 0,
-        minWidth: 64,
-    },
-    catRowPct: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 10,
-        color: AppColors.grayTextWeak,
-    },
-    catPctPill: {
-        paddingHorizontal: 5.5,
-        paddingVertical: 1.5,
-        borderRadius: 5,
-    },
-    catPctText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9.5,
-    },
-    catProgressTrack: {
-        height: 5,
-        borderRadius: 2.5,
-        backgroundColor: `${AppColors.slate200}`,
-        overflow: 'hidden',
-        marginTop: 2,
-    },
-    catProgressBar: {
-        height: '100%',
-        borderRadius: 2.5,
-    },
-    filterContainer: {
-        backgroundColor: AppColors.white,
-        borderRadius: 12,
-        padding: 10,
-        marginHorizontal: 16,
-        marginTop: 12,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-        gap: 8,
-    },
-    searchRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        backgroundColor: AppColors.grayBackground,
-        borderRadius: 8,
-        paddingHorizontal: 10,
-        height: 36,
-        gap: 8,
-    },
-    searchInput: {
-        flex: 1,
-        fontFamily: AppFonts.interRegular,
-        fontSize: 12,
-        color: AppColors.primaryBlack,
-        padding: 0,
-    },
-    categoryPillsScroll: {
-        gap: 6,
-        paddingVertical: 2,
-    },
-    catPill: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-        paddingHorizontal: 10,
-        paddingVertical: 5,
-        borderRadius: 16,
-        backgroundColor: AppColors.grayBackground,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-    },
-    catPillActive: {
-        backgroundColor: AppColors.brandPurple,
-        borderColor: AppColors.brandPurple,
-    },
-    catPillText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 11,
-        color: AppColors.grayTextStrong,
-    },
-    catPillTextActive: {
-        fontFamily: AppFonts.interBold,
-        color: AppColors.white,
-    },
-    listHeaderCount: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 11,
-        color: AppColors.grayTextWeak,
-        paddingHorizontal: 4,
-    },
-    treeHeaderRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        paddingHorizontal: 2,
-        marginBottom: 6,
-    },
-    viewModeToggleGroup: {
-        flexDirection: 'row',
-        backgroundColor: AppColors.grayBackground,
-        borderRadius: 8,
-        padding: 2,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-    },
-    viewModeBtn: {
-        paddingHorizontal: 10,
-        paddingVertical: 5,
-        borderRadius: 6,
-    },
-    viewModeBtnActive: {
-        backgroundColor: AppColors.brandPurple,
-        shadowColor: AppColors.brandPurple,
-        shadowOffset: { width: 0, height: 1 },
-        shadowOpacity: 0.2,
-        shadowRadius: 2,
-        elevation: 2,
-    },
-    viewModeBtnText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 11,
-        color: AppColors.grayTextStrong,
-    },
-    viewModeBtnTextActive: {
-        fontFamily: AppFonts.interBold,
-        color: AppColors.white,
-    },
-    treeActionLink: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 11.5,
-        color: AppColors.purple,
-    },
-    treeRootCard: {
-        backgroundColor: AppColors.white,
-        borderRadius: 12,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-        overflow: 'hidden',
-        marginBottom: 16,
-    },
-    treeFolderBlock: {
-        borderBottomWidth: StyleSheet.hairlineWidth,
-        borderBottomColor: AppColors.dividerColor,
-    },
-    treeFolderRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        paddingVertical: 8,
-        paddingRight: 10,
-        backgroundColor: `${AppColors.purple}06`,
-    },
-    treeRowLeft: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        flex: 1,
-        marginRight: 6,
-    },
-    treeRowRight: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-    },
-    treeChevron: {
-        fontSize: 12,
-        color: AppColors.purple,
-        fontFamily: AppFonts.interBold,
-        width: 12,
-        textAlign: 'center',
-    },
-    treeFolderName: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 12.5,
-        color: AppColors.primaryBlack,
-    },
-    treeCountBadge: {
-        paddingHorizontal: 5,
-        paddingVertical: 1,
-        borderRadius: 8,
-        backgroundColor: `${AppColors.purple}14`,
-    },
-    treeCountBadgeText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 9.5,
-        color: AppColors.purple,
-    },
-    treeFolderSize: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 11,
-        color: AppColors.grayTextStrong,
-    },
-    treeChildrenContainer: {
-        backgroundColor: AppColors.white,
-    },
-    treeFileRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        paddingVertical: 6,
-        paddingRight: 10,
-        borderBottomWidth: StyleSheet.hairlineWidth,
-        borderBottomColor: `${AppColors.dividerColor}80`,
-        backgroundColor: AppColors.white,
-    },
-    treeFileRowUnused: {
-        backgroundColor: `${AppColors.red500}06`,
-    },
-    treeBranchGuide: {
-        width: 12,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    treeBranchGuideText: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 11,
-        color: AppColors.dividerColor,
-    },
-    treeFileName: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 12,
-        color: AppColors.primaryBlack,
-        flexShrink: 1,
-    },
-    treeUnusedPill: {
-        paddingHorizontal: 5,
-        paddingVertical: 1,
-        borderRadius: 4,
-        backgroundColor: `${AppColors.red500}18`,
-    },
-    treeUnusedPillText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9,
-        color: AppColors.red600,
-    },
-    treeFileSizeGroup: {
-        alignItems: 'flex-end',
-    },
-    treeFileSizeText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 11,
-        color: AppColors.primaryBlack,
-    },
-    treeFilePctText: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 9,
-        color: AppColors.grayTextWeak,
-    },
-    fileCard: {
-        backgroundColor: AppColors.white,
-        borderRadius: 12,
-        padding: 12,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-        gap: 6,
-        marginBottom: 8,
-    },
-    fileCardTop: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 8,
-    },
-    sNoBadge: {
-        paddingHorizontal: 6,
-        paddingVertical: 2,
-        borderRadius: 4,
-        backgroundColor: `${AppColors.purple}14`,
-        borderWidth: 1,
-        borderColor: `${AppColors.purple}30`,
-        minWidth: 26,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    sNoText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 10,
-        color: AppColors.purple,
-    },
-    extChip: {
-        paddingHorizontal: 6,
-        paddingVertical: 3,
-        borderRadius: 5,
-        borderWidth: 1,
-    },
-    extChipText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 10,
-        letterSpacing: 0.4,
-    },
-    pkgBadge: {
-        paddingHorizontal: 6,
-        paddingVertical: 3,
-        borderRadius: 5,
-        borderWidth: 1,
-    },
-    pkgBadgeText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9,
-        letterSpacing: 0.4,
-    },
-    pkgLogoWrap: {
-        borderRadius: 7,
-        borderWidth: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: AppColors.white,
-        borderColor: AppColors.dividerColor,
-        overflow: 'hidden',
-    },
-    pkgLogoFallbackText: {
-        fontFamily: AppFonts.interBold,
-    },
-    mediaThumbWrap: {
-        width: 32,
-        height: 32,
-        borderRadius: 6,
-        overflow: 'hidden',
-        backgroundColor: AppColors.grayBackground,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-    },
-    mediaThumbImg: {
-        width: '100%',
-        height: '100%',
-    },
-    fileName: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 12.5,
-        color: AppColors.primaryBlack,
-    },
-    versionPill: {
-        paddingHorizontal: 5,
-        paddingVertical: 1,
-        borderRadius: 4,
-        backgroundColor: `${AppColors.purple}14`,
-        borderWidth: 1,
-        borderColor: `${AppColors.purple}26`,
-    },
-    versionPillText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 10,
-        color: AppColors.purple,
-    },
-    pkgVersion: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 11,
-        color: AppColors.grayTextWeak,
-    },
-    filePath: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 10.5,
-        color: AppColors.grayTextWeak,
-        marginTop: 1,
-    },
-    fileSizeBox: {
-        alignItems: 'flex-end',
-    },
-    downloadFileBtn: {
-        padding: 6,
-        borderRadius: 6,
-        backgroundColor: `${AppColors.sky500}14`,
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderWidth: 1,
-        borderColor: `${AppColors.sky500}28`,
-    },
-    treeActionBtn: {
-        padding: 4,
-        borderRadius: 4,
-        backgroundColor: `${AppColors.sky500}14`,
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderWidth: 1,
-        borderColor: `${AppColors.sky500}28`,
-    },
-    fileSizeKb: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 12,
-        color: AppColors.primaryBlack,
-    },
-    filePercent: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 10,
-        color: AppColors.grayTextWeak,
-    },
-    fileProgressTrack: {
-        height: 4,
-        borderRadius: 2,
-        backgroundColor: AppColors.grayBackground,
-        overflow: 'hidden',
-        marginVertical: 2,
-    },
-    fileProgressBar: {
-        height: '100%',
-        borderRadius: 2,
-    },
-    fileCardBottom: {
-        gap: 4,
-    },
-    fileMetaText: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 10.5,
-        color: AppColors.grayTextWeak,
-    },
-    typeTag: {
-        backgroundColor: AppColors.grayBackground,
-        paddingHorizontal: 6,
-        paddingVertical: 2,
-        borderRadius: 4,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-    },
-    typeTagText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 9.5,
-        color: AppColors.grayText,
-    },
-    npmLinkBtn: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 3,
-        paddingHorizontal: 7,
-        paddingVertical: 2,
-        borderRadius: 5,
-        backgroundColor: AppColors.npmRedTint,
-        borderWidth: 1,
-        borderColor: AppColors.npmRedBorder,
-    },
-    npmLinkText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9.5,
-        color: AppColors.npmRed,
-    },
-    deprecatedBadge: {
-        paddingHorizontal: 6,
-        paddingVertical: 1.5,
-        borderRadius: 4,
-        backgroundColor: AppColors.red100,
-        borderWidth: 1,
-        borderColor: AppColors.errorBorder,
-    },
-    deprecatedBadgeText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9,
-        color: AppColors.red600,
-        letterSpacing: 0.3,
-    },
-    updateBadge: {
-        paddingHorizontal: 6,
-        paddingVertical: 1.5,
-        borderRadius: 4,
-        backgroundColor: AppColors.green100,
-        borderWidth: 1,
-        borderColor: AppColors.greenBorder,
-    },
-    updateBadgeText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9,
-        color: AppColors.emerald700,
-    },
-    lastActiveText: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 10,
-        color: AppColors.grayTextWeak,
-    },
-    deprecationBox: {
-        backgroundColor: AppColors.errorCardBg,
-        borderRadius: 6,
-        paddingHorizontal: 8,
-        paddingVertical: 5,
-        borderWidth: 1,
-        borderColor: AppColors.errorBorder,
-        marginTop: 3,
-    },
-    deprecationText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 10.5,
-        color: AppColors.rose700,
-        lineHeight: 14,
-    },
-    unusedBadge: {
-        paddingHorizontal: 6,
-        paddingVertical: 1.5,
-        borderRadius: 4,
-        backgroundColor: AppColors.red100,
-        borderWidth: 1,
-        borderColor: AppColors.errorBorder,
-    },
-    unusedBadgeText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9.5,
-        color: AppColors.red600,
-    },
-    consumedBadge: {
-        paddingHorizontal: 6,
-        paddingVertical: 1.5,
-        borderRadius: 4,
-        backgroundColor: AppColors.green100,
-        borderWidth: 1,
-        borderColor: AppColors.greenBorder,
-    },
-    consumedBadgeText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9.5,
-        color: AppColors.emerald600,
-    },
-    treeFolderChevronWrap: {
-        width: 18,
-        height: 18,
-        borderRadius: 9,
-        backgroundColor: `${AppColors.purple}14`,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    treeFileCardUnused: {
-        borderColor: AppColors.errorBorder,
-        backgroundColor: AppColors.red50,
-    },
-    adviceUnused: {
-        backgroundColor: AppColors.errorCardBg,
-        borderWidth: 1,
-        borderColor: AppColors.errorBorder,
-    },
-    liveWarningCard: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        backgroundColor: AppColors.amber100,
-        borderWidth: 1,
-        borderColor: AppColors.amber200,
-        borderRadius: 10,
-        padding: 12,
-        marginBottom: 12,
-    },
-    liveWarningTitle: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 12,
-        color: AppColors.amber800Warm,
-        marginBottom: 2,
-    },
-    liveWarningDesc: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 10.5,
-        lineHeight: 14,
-        color: AppColors.amber800Warm,
-    },
-    adviceBadge: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingHorizontal: 8,
-        paddingVertical: 5,
-        borderRadius: 6,
-        marginTop: 4,
-        gap: 6,
-    },
-    adviceWarning: {
-        backgroundColor: AppColors.amber100,
-        borderWidth: 1,
-        borderColor: AppColors.amber200,
-    },
-    adviceOptimal: {
-        backgroundColor: AppColors.green100,
-        borderWidth: 1,
-        borderColor: AppColors.greenBorder,
-    },
-    adviceText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 10.5,
-        lineHeight: 14,
-        flex: 1,
-    },
-    impactBadge: {
-        paddingHorizontal: 6,
-        paddingVertical: 2,
-        borderRadius: 4,
-        borderWidth: 1,
-    },
-    impactBadgeText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9,
-    },
-    searchHighlight: {
-        backgroundColor: AppColors.yellow200,
-        color: AppColors.yellow800,
-        fontFamily: AppFonts.interBold,
-    },
-    tipsCard: {
-        backgroundColor: AppColors.purple50,
-        borderRadius: 14,
-        padding: 14,
-        borderWidth: 1,
-        borderColor: AppColors.purple200,
-    },
-    tipsHeading: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 13.5,
-        color: AppColors.purple800,
-    },
-    totalSummaryCard: {
-        marginTop: 10,
-        backgroundColor: `${AppColors.brandPurple}0B`,
-        borderRadius: 12,
-        padding: 12,
-        borderWidth: 1,
-        borderColor: `${AppColors.brandPurple}25`,
-        gap: 8,
-    },
-    totalSummaryRow: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-    },
-    totalSummaryLabelWrap: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 8,
-    },
-    totalIconBadge: {
-        width: 32,
-        height: 32,
-        borderRadius: 8,
-        backgroundColor: `${AppColors.brandPurple}15`,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    totalSummaryLabel: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 11.5,
-        color: AppColors.brandPurple,
-        letterSpacing: 0.6,
-    },
-    totalSummarySub: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 10,
-        color: AppColors.grayTextWeak,
-        marginTop: 1,
-    },
-    totalSummaryValue: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 15,
-        color: AppColors.primaryBlack,
-    },
-    totalSummaryKb: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 10,
-        color: AppColors.grayTextWeak,
-    },
-    totalFormulaGrid: {
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        gap: 6,
-        paddingTop: 6,
-        borderTopWidth: 1,
-        borderTopColor: `${AppColors.brandPurple}15`,
-    },
-    totalChip: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-        backgroundColor: AppColors.white,
-        borderRadius: 6,
-        paddingHorizontal: 6,
-        paddingVertical: 3,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-    },
-    totalDot: {
-        width: 6,
-        height: 6,
-        borderRadius: 3,
-    },
-    totalChipText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9.5,
-        color: AppColors.primaryBlack,
-    },
-    totalSummaryFormula: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 10.5,
-        color: AppColors.grayText,
-        lineHeight: 15,
-    },
-    stickyFooterBar: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        backgroundColor: AppColors.white,
-        paddingHorizontal: 16,
-        paddingTop: 10,
-        paddingBottom: Platform.OS === 'ios' ? 24 : 12,
-        borderTopWidth: 1,
-        borderTopColor: AppColors.dividerColor,
-        shadowColor: AppColors.primaryBlack,
-        shadowOffset: { width: 0, height: -2 },
-        shadowOpacity: 0.05,
-        shadowRadius: 4,
-        elevation: 3,
-    },
-    footerTitle: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 12,
-        color: AppColors.primaryBlack,
-    },
-    footerSizeVal: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 12.5,
-        color: AppColors.purple,
-    },
-    tipItem: {
-        marginBottom: 10,
-        backgroundColor: AppColors.white,
-        padding: 12,
-        borderRadius: 10,
-        borderWidth: 1,
-        borderColor: AppColors.purple200,
-        gap: 6,
-    },
-    tipItemHeader: {
-        flexDirection: 'row',
-        alignItems: 'flex-start',
-        justifyContent: 'space-between',
-        gap: 8,
-    },
-    tipTitleWrap: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        flex: 1,
-        flexShrink: 1,
-    },
-    tipActionWrap: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        flexShrink: 0,
-    },
-    tipTitle: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 12,
-        color: AppColors.purple900,
-        flex: 1,
-        flexShrink: 1,
-    },
-    tipDesc: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 11,
-        color: AppColors.gray500,
-        lineHeight: 16,
-    },
-});
-export default BundleTab;
+      {M==="optimizer"&&<Te style={{flex:1}}contentContainerStyle={e.contentContainer}keyboardShouldPersistTaps="handled">
+          <T style={e.tipsCard}>
+            <T style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:12}}>
+              <T style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                <Ge color={t.purple}size={18}/>
+                <C style={e.tipsHeading}>
+                  {k("bundle.optimizerTitle")}
+                </C>
+              </T>
+              <K value={()=>[k("bundle.optTip1Title"),`${k("bundle.optTip2Title")} (${k(E?"bundle.active":"bundle.actionRequired")})`,k("bundle.optTip3Title"),k("bundle.optTip4Title"),k("bundle.optTip5Title")]}label={k("bundle.optimizationChecklist")}/>
+            </T>
+
+            {[{iconType:"image",iconColor:t.pink500,title:k("bundle.optTip1Title"),desc:k("bundle.optTip1Desc"),badge:k("bundle.highImpact"),badgeColor:t.pink500},{iconType:"bolt",iconColor:E?t.emerald500:t.amber500,title:k("bundle.optTip2Title"),desc:k(E?"bundle.optTip2DescActive":"bundle.optTip2DescInactive"),badge:k(E?"bundle.active":"bundle.actionRequired"),badgeColor:E?t.emerald500:t.amber500},{iconType:"font",iconColor:t.purple500,title:k("bundle.optTip3Title"),desc:k("bundle.optTip3Desc"),badge:k("bundle.mediumImpact"),badgeColor:t.purple500},{iconType:"source",iconColor:t.sky500,title:k("bundle.optTip4Title"),desc:k("bundle.optTip4Desc"),badge:k("bundle.bestPractice"),badgeColor:t.sky500},{iconType:"overhead",iconColor:t.indigo500,title:k("bundle.optTip5Title"),desc:k("bundle.optTip5Desc"),badge:k("bundle.bestPractice"),badgeColor:t.indigo500}].map((o,z)=><T key={z}style={e.tipItem}>
+                <T style={e.tipItemHeader}>
+                  <T style={e.tipTitleWrap}>
+                    <T style={e.sNoBadge}>
+                      <C style={e.sNoText}>#{z+1}</C>
+                    </T>
+                    <Z type={o.iconType}size={14}color={o.iconColor}/>
+                    <C style={e.tipTitle}>{o.title}</C>
+                  </T>
+                  <T style={e.tipActionWrap}>
+                    <T style={[e.impactBadge,{backgroundColor:`${o.badgeColor}18`,borderColor:`${o.badgeColor}40`}]}>
+                      <C style={[e.impactBadgeText,{color:o.badgeColor}]}>
+                        {o.badge}
+                      </C>
+                    </T>
+                    <K value={()=>o}label={k("bundle.tipDetails")}/>
+                  </T>
+                </T>
+                <C style={e.tipDesc}>{o.desc}</C>
+              </T>)}
+          </T>
+        </Te>}
+    </T>}),e=je.create({topTabWrap:{backgroundColor:t.white,paddingVertical:8,borderBottomWidth:1,borderBottomColor:t.dividerColor,flexDirection:"row",alignItems:"center",paddingRight:10},reloadButton:{padding:8,borderRadius:20,backgroundColor:t.grayBackground,borderWidth:1,borderColor:t.dividerColor,alignItems:"center",justifyContent:"center",marginLeft:4},analyzingContainer:{flex:1,alignItems:"center",justifyContent:"center",gap:8,padding:24},analyzingText:{fontFamily:S.interBold,fontSize:13,color:t.primaryBlack},analyzingHint:{fontFamily:S.interRegular,fontSize:11,color:t.grayTextWeak},subTabsScroll:{paddingHorizontal:12,gap:8,flexDirection:"row",alignItems:"center"},subTabPill:{flexDirection:"row",alignItems:"center",gap:6,paddingHorizontal:12,paddingVertical:7,borderRadius:20,backgroundColor:t.grayBackground,borderWidth:1,borderColor:t.dividerColor},subTabPillActive:{backgroundColor:t.brandPurple,borderColor:t.brandPurple,shadowColor:t.brandPurple,shadowOffset:{width:0,height:2},shadowOpacity:.2,shadowRadius:3,elevation:2},subTabPillText:{fontFamily:S.interMedium,fontSize:11.5,color:t.grayTextStrong},subTabPillTextActive:{fontFamily:S.interBold,color:t.white},contentContainer:{padding:16,paddingBottom:40,gap:14},heroCard:{backgroundColor:t.white,borderRadius:14,padding:16,borderWidth:1,borderColor:t.dividerColor,shadowColor:t.primaryBlack,shadowOffset:{width:0,height:2},shadowOpacity:.04,shadowRadius:6,elevation:2},heroTopRow:{flexDirection:"row",alignItems:"flex-start",gap:12,marginBottom:16},heroIconWrap:{width:44,height:44,borderRadius:12,backgroundColor:`${t.brandPurple}12`,alignItems:"center",justifyContent:"center",borderWidth:1,borderColor:`${t.brandPurple}25`},heroTitle:{fontFamily:S.interBold,fontSize:16,color:t.primaryBlack},heroSubtitle:{fontFamily:S.interRegular,fontSize:12,color:t.grayTextWeak,marginTop:2},metricsGrid:{flexDirection:"row",flexWrap:"wrap",gap:8},metricBox:{flex:1,minWidth:"45%",backgroundColor:t.grayBackground,borderRadius:10,padding:10,borderWidth:1,borderColor:t.dividerColor},metricLabel:{fontFamily:S.interBold,fontSize:9.5,color:t.grayTextWeak,letterSpacing:.5},metricValue:{fontFamily:S.interBold,fontSize:14,color:t.primaryBlack,marginTop:3},metricHint:{fontFamily:S.interMedium,fontSize:10.5,color:t.grayText,marginTop:2},statusIndicator:{width:8,height:8,borderRadius:4},prodPlatformScroll:{flexDirection:"row",alignItems:"center",gap:8,paddingBottom:4},prodPlatformBtn:{flexDirection:"row",alignItems:"center",paddingVertical:7,paddingHorizontal:12,borderRadius:20,backgroundColor:t.white,borderWidth:1,borderColor:t.dividerColor,gap:6},prodPlatformBtnActive:{backgroundColor:t.brandPurple,borderColor:t.brandPurple,shadowColor:t.brandPurple,shadowOffset:{width:0,height:2},shadowOpacity:.18,shadowRadius:3,elevation:2},prodPlatformBtnText:{fontFamily:S.interBold,fontSize:11.5,color:t.grayTextStrong},prodPlatformBtnTextActive:{color:t.white},prodPlatformBadge:{paddingHorizontal:6,paddingVertical:2,borderRadius:10,backgroundColor:`${t.purple}14`},prodPlatformBadgeActive:{backgroundColor:"rgba(255, 255, 255, 0.25)"},prodPlatformBadgeText:{fontFamily:S.interBold,fontSize:9.5,color:t.purple},prodPlatformBadgeTextActive:{color:t.white},sectionCard:{backgroundColor:t.white,borderRadius:14,padding:14,borderWidth:1,borderColor:t.dividerColor,overflow:"hidden"},sectionHeaderRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginBottom:10,gap:8},sectionTitle:{fontFamily:S.interBold,fontSize:13,color:t.primaryBlack},sectionSub:{fontFamily:S.interMedium,fontSize:11,color:t.grayTextWeak},treemapBar:{flexDirection:"row",borderRadius:6,overflow:"hidden",height:16,marginBottom:12,backgroundColor:t.slate200},prodTreemapBar:{flexDirection:"row",borderRadius:6,overflow:"hidden",height:16,marginBottom:12,backgroundColor:t.slate200},legendGrid:{flexDirection:"row",flexWrap:"wrap",gap:8},legendItem:{flexDirection:"row",alignItems:"center",gap:6,paddingHorizontal:8,paddingVertical:5,borderRadius:8,backgroundColor:`${t.slate200}40`,borderWidth:1,borderColor:`${t.dividerColor}`,flexShrink:0},legendText:{fontFamily:S.interMedium,fontSize:11,color:t.grayTextStrong},legendVal:{fontFamily:S.interBold,color:t.primaryBlack},subsystemCard:{backgroundColor:t.white,borderRadius:12,padding:12,marginBottom:8,borderWidth:1,borderColor:t.dividerColor,gap:8},subsystemHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:8},subsystemTitle:{fontFamily:S.interBold,fontSize:12.5,color:t.primaryBlack},subsystemBadge:{paddingHorizontal:6,paddingVertical:2,borderRadius:6},subsystemBadgeText:{fontFamily:S.interBold,fontSize:10},subsystemGrid:{flexDirection:"row",flexWrap:"wrap",gap:6},subsystemItem:{flexDirection:"row",alignItems:"center",gap:5,paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:t.grayBackground,borderWidth:1,borderColor:t.dividerColor},subsystemItemText:{fontFamily:S.interMedium,fontSize:10.5,color:t.grayTextStrong},subsystemItemVal:{fontFamily:S.interBold,color:t.primaryBlack},catRowCard:{backgroundColor:t.grayBackground,borderRadius:12,padding:12,marginBottom:8,borderWidth:1,borderColor:t.dividerColor,gap:8},catRowTop:{flexDirection:"row",alignItems:"flex-start",gap:10},catIconBox:{width:36,height:36,borderRadius:10,borderWidth:1,alignItems:"center",justifyContent:"center",flexShrink:0},catRowTitleWrap:{flex:1,minWidth:0,gap:2},catRowTitle:{fontFamily:S.interBold,fontSize:13,color:t.primaryBlack,flex:1},catRowDesc:{fontFamily:S.interRegular,fontSize:10.5,color:t.grayTextWeak,lineHeight:14.5},catRowSize:{fontFamily:S.interBold,fontSize:12.5,color:t.primaryBlack},catRowRight:{alignItems:"flex-end",justifyContent:"center",flexShrink:0,minWidth:64},catRowPct:{fontFamily:S.interMedium,fontSize:10,color:t.grayTextWeak},catPctPill:{paddingHorizontal:5.5,paddingVertical:1.5,borderRadius:5},catPctText:{fontFamily:S.interBold,fontSize:9.5},catProgressTrack:{height:5,borderRadius:2.5,backgroundColor:`${t.slate200}`,overflow:"hidden",marginTop:2},catProgressBar:{height:"100%",borderRadius:2.5},filterContainer:{backgroundColor:t.white,borderRadius:12,padding:10,marginHorizontal:16,marginTop:12,borderWidth:1,borderColor:t.dividerColor,gap:8},searchRow:{flexDirection:"row",alignItems:"center",backgroundColor:t.grayBackground,borderRadius:8,paddingHorizontal:10,height:36,gap:8},searchInput:{flex:1,fontFamily:S.interRegular,fontSize:12,color:t.primaryBlack,padding:0},categoryPillsScroll:{gap:6,paddingVertical:2},catPill:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:10,paddingVertical:5,borderRadius:16,backgroundColor:t.grayBackground,borderWidth:1,borderColor:t.dividerColor},catPillActive:{backgroundColor:t.brandPurple,borderColor:t.brandPurple},catPillText:{fontFamily:S.interMedium,fontSize:11,color:t.grayTextStrong},catPillTextActive:{fontFamily:S.interBold,color:t.white},listHeaderCount:{fontFamily:S.interMedium,fontSize:11,color:t.grayTextWeak,paddingHorizontal:4},treeHeaderRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:2,marginBottom:6},viewModeToggleGroup:{flexDirection:"row",backgroundColor:t.grayBackground,borderRadius:8,padding:2,borderWidth:1,borderColor:t.dividerColor},viewModeBtn:{paddingHorizontal:10,paddingVertical:5,borderRadius:6},viewModeBtnActive:{backgroundColor:t.brandPurple,shadowColor:t.brandPurple,shadowOffset:{width:0,height:1},shadowOpacity:.2,shadowRadius:2,elevation:2},viewModeBtnText:{fontFamily:S.interMedium,fontSize:11,color:t.grayTextStrong},viewModeBtnTextActive:{fontFamily:S.interBold,color:t.white},treeActionLink:{fontFamily:S.interBold,fontSize:11.5,color:t.purple},treeRootCard:{backgroundColor:t.white,borderRadius:12,borderWidth:1,borderColor:t.dividerColor,overflow:"hidden",marginBottom:16},treeFolderBlock:{borderBottomWidth:je.hairlineWidth,borderBottomColor:t.dividerColor},treeFolderRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:8,paddingRight:10,backgroundColor:`${t.purple}06`},treeRowLeft:{flexDirection:"row",alignItems:"center",gap:6,flex:1,marginRight:6},treeRowRight:{flexDirection:"row",alignItems:"center",gap:6},treeChevron:{fontSize:12,color:t.purple,fontFamily:S.interBold,width:12,textAlign:"center"},treeFolderName:{fontFamily:S.interBold,fontSize:12.5,color:t.primaryBlack},treeCountBadge:{paddingHorizontal:5,paddingVertical:1,borderRadius:8,backgroundColor:`${t.purple}14`},treeCountBadgeText:{fontFamily:S.interMedium,fontSize:9.5,color:t.purple},treeFolderSize:{fontFamily:S.interMedium,fontSize:11,color:t.grayTextStrong},treeChildrenContainer:{backgroundColor:t.white},treeFileRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:6,paddingRight:10,borderBottomWidth:je.hairlineWidth,borderBottomColor:`${t.dividerColor}80`,backgroundColor:t.white},treeFileRowUnused:{backgroundColor:`${t.red500}06`},treeBranchGuide:{width:12,alignItems:"center",justifyContent:"center"},treeBranchGuideText:{fontFamily:S.interRegular,fontSize:11,color:t.dividerColor},treeFileName:{fontFamily:S.interMedium,fontSize:12,color:t.primaryBlack,flexShrink:1},treeUnusedPill:{paddingHorizontal:5,paddingVertical:1,borderRadius:4,backgroundColor:`${t.red500}18`},treeUnusedPillText:{fontFamily:S.interBold,fontSize:9,color:t.red600},treeFileSizeGroup:{alignItems:"flex-end"},treeFileSizeText:{fontFamily:S.interMedium,fontSize:11,color:t.primaryBlack},treeFilePctText:{fontFamily:S.interRegular,fontSize:9,color:t.grayTextWeak},fileCard:{backgroundColor:t.white,borderRadius:12,padding:12,borderWidth:1,borderColor:t.dividerColor,gap:6,marginBottom:8},fileCardTop:{flexDirection:"row",alignItems:"center",gap:8},sNoBadge:{paddingHorizontal:6,paddingVertical:2,borderRadius:4,backgroundColor:`${t.purple}14`,borderWidth:1,borderColor:`${t.purple}30`,minWidth:26,alignItems:"center",justifyContent:"center"},sNoText:{fontFamily:S.interBold,fontSize:10,color:t.purple},extChip:{paddingHorizontal:6,paddingVertical:3,borderRadius:5,borderWidth:1},extChipText:{fontFamily:S.interBold,fontSize:10,letterSpacing:.4},pkgBadge:{paddingHorizontal:6,paddingVertical:3,borderRadius:5,borderWidth:1},pkgBadgeText:{fontFamily:S.interBold,fontSize:9,letterSpacing:.4},pkgLogoWrap:{borderRadius:7,borderWidth:1,alignItems:"center",justifyContent:"center",backgroundColor:t.white,borderColor:t.dividerColor,overflow:"hidden"},pkgLogoFallbackText:{fontFamily:S.interBold},mediaThumbWrap:{width:32,height:32,borderRadius:6,overflow:"hidden",backgroundColor:t.grayBackground,borderWidth:1,borderColor:t.dividerColor},mediaThumbImg:{width:"100%",height:"100%"},fileName:{fontFamily:S.interBold,fontSize:12.5,color:t.primaryBlack},versionPill:{paddingHorizontal:5,paddingVertical:1,borderRadius:4,backgroundColor:`${t.purple}14`,borderWidth:1,borderColor:`${t.purple}26`},versionPillText:{fontFamily:S.interMedium,fontSize:10,color:t.purple},pkgVersion:{fontFamily:S.interMedium,fontSize:11,color:t.grayTextWeak},filePath:{fontFamily:S.interRegular,fontSize:10.5,color:t.grayTextWeak,marginTop:1},fileSizeBox:{alignItems:"flex-end"},downloadFileBtn:{padding:6,borderRadius:6,backgroundColor:`${t.sky500}14`,alignItems:"center",justifyContent:"center",borderWidth:1,borderColor:`${t.sky500}28`},treeActionBtn:{padding:4,borderRadius:4,backgroundColor:`${t.sky500}14`,alignItems:"center",justifyContent:"center",borderWidth:1,borderColor:`${t.sky500}28`},fileSizeKb:{fontFamily:S.interBold,fontSize:12,color:t.primaryBlack},filePercent:{fontFamily:S.interMedium,fontSize:10,color:t.grayTextWeak},fileProgressTrack:{height:4,borderRadius:2,backgroundColor:t.grayBackground,overflow:"hidden",marginVertical:2},fileProgressBar:{height:"100%",borderRadius:2},fileCardBottom:{gap:4},fileMetaText:{fontFamily:S.interRegular,fontSize:10.5,color:t.grayTextWeak},typeTag:{backgroundColor:t.grayBackground,paddingHorizontal:6,paddingVertical:2,borderRadius:4,borderWidth:1,borderColor:t.dividerColor},typeTagText:{fontFamily:S.interMedium,fontSize:9.5,color:t.grayText},npmLinkBtn:{flexDirection:"row",alignItems:"center",gap:3,paddingHorizontal:7,paddingVertical:2,borderRadius:5,backgroundColor:t.npmRedTint,borderWidth:1,borderColor:t.npmRedBorder},npmLinkText:{fontFamily:S.interBold,fontSize:9.5,color:t.npmRed},deprecatedBadge:{paddingHorizontal:6,paddingVertical:1.5,borderRadius:4,backgroundColor:t.red100,borderWidth:1,borderColor:t.errorBorder},deprecatedBadgeText:{fontFamily:S.interBold,fontSize:9,color:t.red600,letterSpacing:.3},updateBadge:{paddingHorizontal:6,paddingVertical:1.5,borderRadius:4,backgroundColor:t.green100,borderWidth:1,borderColor:t.greenBorder},updateBadgeText:{fontFamily:S.interBold,fontSize:9,color:t.emerald700},lastActiveText:{fontFamily:S.interRegular,fontSize:10,color:t.grayTextWeak},deprecationBox:{backgroundColor:t.errorCardBg,borderRadius:6,paddingHorizontal:8,paddingVertical:5,borderWidth:1,borderColor:t.errorBorder,marginTop:3},deprecationText:{fontFamily:S.interMedium,fontSize:10.5,color:t.rose700,lineHeight:14},unusedBadge:{paddingHorizontal:6,paddingVertical:1.5,borderRadius:4,backgroundColor:t.red100,borderWidth:1,borderColor:t.errorBorder},unusedBadgeText:{fontFamily:S.interBold,fontSize:9.5,color:t.red600},consumedBadge:{paddingHorizontal:6,paddingVertical:1.5,borderRadius:4,backgroundColor:t.green100,borderWidth:1,borderColor:t.greenBorder},consumedBadgeText:{fontFamily:S.interBold,fontSize:9.5,color:t.emerald600},treeFolderChevronWrap:{width:18,height:18,borderRadius:9,backgroundColor:`${t.purple}14`,alignItems:"center",justifyContent:"center"},treeFileCardUnused:{borderColor:t.errorBorder,backgroundColor:t.red50},adviceUnused:{backgroundColor:t.errorCardBg,borderWidth:1,borderColor:t.errorBorder},liveWarningCard:{flexDirection:"row",alignItems:"center",backgroundColor:t.amber100,borderWidth:1,borderColor:t.amber200,borderRadius:10,padding:12,marginBottom:12},liveWarningTitle:{fontFamily:S.interBold,fontSize:12,color:t.amber800Warm,marginBottom:2},liveWarningDesc:{fontFamily:S.interRegular,fontSize:10.5,lineHeight:14,color:t.amber800Warm},adviceBadge:{flexDirection:"row",alignItems:"center",paddingHorizontal:8,paddingVertical:5,borderRadius:6,marginTop:4,gap:6},adviceWarning:{backgroundColor:t.amber100,borderWidth:1,borderColor:t.amber200},adviceOptimal:{backgroundColor:t.green100,borderWidth:1,borderColor:t.greenBorder},adviceText:{fontFamily:S.interMedium,fontSize:10.5,lineHeight:14,flex:1},impactBadge:{paddingHorizontal:6,paddingVertical:2,borderRadius:4,borderWidth:1},impactBadgeText:{fontFamily:S.interBold,fontSize:9},searchHighlight:{backgroundColor:t.yellow200,color:t.yellow800,fontFamily:S.interBold},tipsCard:{backgroundColor:t.purple50,borderRadius:14,padding:14,borderWidth:1,borderColor:t.purple200},tipsHeading:{fontFamily:S.interBold,fontSize:13.5,color:t.purple800},totalSummaryCard:{marginTop:10,backgroundColor:`${t.brandPurple}0B`,borderRadius:12,padding:12,borderWidth:1,borderColor:`${t.brandPurple}25`,gap:8},totalSummaryRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center"},totalSummaryLabelWrap:{flexDirection:"row",alignItems:"center",gap:8},totalIconBadge:{width:32,height:32,borderRadius:8,backgroundColor:`${t.brandPurple}15`,alignItems:"center",justifyContent:"center"},totalSummaryLabel:{fontFamily:S.interBold,fontSize:11.5,color:t.brandPurple,letterSpacing:.6},totalSummarySub:{fontFamily:S.interRegular,fontSize:10,color:t.grayTextWeak,marginTop:1},totalSummaryValue:{fontFamily:S.interBold,fontSize:15,color:t.primaryBlack},totalSummaryKb:{fontFamily:S.interMedium,fontSize:10,color:t.grayTextWeak},totalFormulaGrid:{flexDirection:"row",flexWrap:"wrap",gap:6,paddingTop:6,borderTopWidth:1,borderTopColor:`${t.brandPurple}15`},totalChip:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:t.white,borderRadius:6,paddingHorizontal:6,paddingVertical:3,borderWidth:1,borderColor:t.dividerColor},totalDot:{width:6,height:6,borderRadius:3},totalChipText:{fontFamily:S.interBold,fontSize:9.5,color:t.primaryBlack},totalSummaryFormula:{fontFamily:S.interRegular,fontSize:10.5,color:t.grayText,lineHeight:15},stickyFooterBar:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",backgroundColor:t.white,paddingHorizontal:16,paddingTop:10,paddingBottom:kt.OS==="ios"?24:12,borderTopWidth:1,borderTopColor:t.dividerColor,shadowColor:t.primaryBlack,shadowOffset:{width:0,height:-2},shadowOpacity:.05,shadowRadius:4,elevation:3},footerTitle:{fontFamily:S.interBold,fontSize:12,color:t.primaryBlack},footerSizeVal:{fontFamily:S.interBold,fontSize:12.5,color:t.purple},tipItem:{marginBottom:10,backgroundColor:t.white,padding:12,borderRadius:10,borderWidth:1,borderColor:t.purple200,gap:6},tipItemHeader:{flexDirection:"row",alignItems:"flex-start",justifyContent:"space-between",gap:8},tipTitleWrap:{flexDirection:"row",alignItems:"center",gap:6,flex:1,flexShrink:1},tipActionWrap:{flexDirection:"row",alignItems:"center",gap:6,flexShrink:0},tipTitle:{fontFamily:S.interBold,fontSize:12,color:t.purple900,flex:1,flexShrink:1},tipDesc:{fontFamily:S.interRegular,fontSize:11,color:t.gray500,lineHeight:16}});export default Io;