react-native-inapp-inspector 1.1.33 → 1.1.35

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

@@ -379,7 +379,7 @@ const BundleTreeNodeView = ({ node, level, search, totalBundleKb, expandedFolder
     const indentLeft = level * 16 + 10;
     if (node.isFolder) {
         return (<View style={bundleStyles.treeFolderBlock}>
-        <TouchableScale onPress={() => toggleFolder(node.fullPath)} style={[
+        <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 },
             ]}>
@@ -453,7 +453,7 @@ const BundleTreeNodeView = ({ node, level, search, totalBundleKb, expandedFolder
         </View>
 
         <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
-          {onDownload && (<TouchableScale onPress={() => onDownload(file)} style={bundleStyles.treeActionBtn} hitSlop={8}>
+          {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>)}
 
@@ -746,7 +746,7 @@ const BundleTab = React.memo(() => {
         <ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ flex: 1 }} contentContainerStyle={bundleStyles.subTabsScroll}>
           {subTabs.map(tab => {
             const isActive = activeSubTab === tab.key;
-            return (<TouchableScale key={tab.key} onPress={() => setActiveSubTab(tab.key)} style={[
+            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,
                 ]}>
@@ -760,7 +760,7 @@ const BundleTab = React.memo(() => {
               </TouchableScale>);
         })}
         </ScrollView>
-        <TouchableScale onPress={refreshAnalysis} style={bundleStyles.reloadButton} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
+        <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>
@@ -782,7 +782,7 @@ const BundleTab = React.memo(() => {
                     <Text style={bundleStyles.heroSubtitle}>
                       {t('bundle.heroSubtitle')}
                     </Text>
-                    <Pressable style={{
+                    <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,
@@ -992,7 +992,7 @@ const BundleTab = React.memo(() => {
               <CopyButton value={() => summary} label={t('bundle.categoriesJson')}/>
             </View>
             
-            {summary.categories.map((cat, cIdx) => (<Pressable key={cIdx} style={({ pressed }) => [
+            {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)}>
@@ -1086,6 +1086,155 @@ const BundleTab = React.memo(() => {
               </View>
             </View>
           </View>
+
+          {/* Detailed Subsystem Architecture Split-up */}
+          <View style={bundleStyles.sectionCard}>
+            <View style={bundleStyles.sectionHeaderRow}>
+              <View>
+                <Text style={bundleStyles.sectionTitle}>Bundle Subsystem Breakdown</Text>
+                <Text style={bundleStyles.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>
+
+            {/* 1. NPM Dependencies Layer */}
+            <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}>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} 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} 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>
+
+            {/* 2. App Source Code Layer */}
+            <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}>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} 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} 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>
+
+            {/* 3. Hermes Optimization & Bytecode Engine */}
+            <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}>Hermes Bytecode Engine</Text>
+                </View>
+                <View style={[bundleStyles.subsystemBadge, { backgroundColor: `${AppColors.emerald500}18` }]}>
+                  <Text style={[bundleStyles.subsystemBadgeText, { color: AppColors.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>
+
+            {/* 4. Assets & Media Layer */}
+            <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}>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} 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} 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} fonts</Text>
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </View>
         </ScrollView>)}
 
       {/* ══════════════════════════════════════════════════════════════════════ */}
@@ -1096,12 +1245,12 @@ const BundleTab = React.memo(() => {
           {/* Platform Segmented Switcher (Horizontally Scrollable) */}
           <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={bundleStyles.prodPlatformScroll}>
             {[
-                { key: 'ios', label: 'iOS App (.ipa)', badge: `${analysis?.production.ios.totalInstallMb || 59.2} MB` },
-                { key: 'androidAab', label: 'Android AAB (.aab)', badge: `${analysis?.production.androidAab.totalInstallMb || 24.3} MB` },
-                { key: 'androidApk', label: 'Universal APK (.apk)', badge: `${analysis?.production.androidApk.totalInstallMb || 64.0} MB` },
+                { key: 'ios', label: 'iOS App (.ipa)', badge: `${analysis?.production.ios.totalDownloadMb || 111.9} MB` },
+                { key: 'androidAab', label: 'Android AAB (.aab)', badge: `${analysis?.production.androidAab.totalDownloadMb || 38.5} MB` },
+                { key: 'androidApk', label: 'Universal APK (.apk)', badge: `${analysis?.production.androidApk.totalInstallMb || 364.0} MB` },
             ].map(tab => {
                 const isSelected = prodPlatform === tab.key;
-                return (<TouchableScale key={tab.key} onPress={() => setProdPlatform(tab.key)} style={[
+                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,
                     ]}>
@@ -1209,6 +1358,33 @@ const BundleTab = React.memo(() => {
                 <CopyButton value={() => analysis.production[prodPlatform].components} label="Components JSON"/>
               </View>
 
+              {/* Visual Binary Component Ratio Bar */}
+              <View style={bundleStyles.prodTreemapBar}>
+                {analysis.production[prodPlatform].components.map((comp, cIdx) => (<View key={cIdx} style={{
+                        flex: Math.max(comp.pct, 2),
+                        backgroundColor: comp.color,
+                        height: 16,
+                    }}/>))}
+              </View>
+
+              {/* Production Binary Legend */}
+              <View style={[bundleStyles.legendGrid, { marginBottom: 12 }]}>
+                {analysis.production[prodPlatform].components.map((comp, cIdx) => (<View key={cIdx} style={bundleStyles.legendItem}>
+                    <View style={{
+                        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={[
@@ -1324,8 +1500,8 @@ const BundleTab = React.memo(() => {
           <View style={bundleStyles.filterContainer}>
             <View style={bundleStyles.searchRow}>
               <SearchIcon color={AppColors.grayTextWeak} size={15}/>
-              <TextInput placeholder={t('bundle.searchFilesPlaceholder')} placeholderTextColor={AppColors.grayTextWeak} value={search} onChangeText={setSearch} style={bundleStyles.searchInput} autoCorrect={false} autoCapitalize="none"/>
-              {search.length > 0 && (<Pressable onPress={() => setSearch('')} hitSlop={10}>
+              <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')}/>
@@ -1342,7 +1518,7 @@ const BundleTab = React.memo(() => {
                         : tab.key === 'CONSUMED'
                             ? bundleFiles.filter(f => f.isConsumed !== false).length
                             : bundleFiles.filter(f => f.category === tab.key).length;
-                return (<TouchableScale key={tab.key} onPress={() => setActiveCategory(tab.key)} style={[
+                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 },
@@ -1366,7 +1542,7 @@ const BundleTab = React.memo(() => {
             {/* View Mode Toggle Header Bar */}
             <View style={bundleStyles.treeHeaderRow}>
               <View style={bundleStyles.viewModeToggleGroup}>
-                <TouchableScale onPress={() => setFilesViewMode('tree')} style={[
+                <TouchableScale accessible={true} accessibilityRole="button" accessibilityLabel="Tree folder view" accessibilityState={{ selected: filesViewMode === 'tree' }} onPress={() => setFilesViewMode('tree')} style={[
                 bundleStyles.viewModeBtn,
                 filesViewMode === 'tree' && bundleStyles.viewModeBtnActive,
             ]}>
@@ -1377,7 +1553,7 @@ const BundleTab = React.memo(() => {
                     {t('bundle.treeView')}
                   </Text>
                 </TouchableScale>
-                <TouchableScale onPress={() => setFilesViewMode('list')} style={[
+                <TouchableScale accessible={true} accessibilityRole="button" accessibilityLabel="Flat list view" accessibilityState={{ selected: filesViewMode === 'list' }} onPress={() => setFilesViewMode('list')} style={[
                 bundleStyles.viewModeBtn,
                 filesViewMode === 'list' && bundleStyles.viewModeBtnActive,
             ]}>
@@ -1391,11 +1567,11 @@ const BundleTab = React.memo(() => {
               </View>
 
               {filesViewMode === 'tree' ? (<View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-                  <TouchableScale onPress={expandAllFolders}>
+                  <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 }}>•</Text>
-                  <TouchableScale onPress={collapseAllFolders}>
+                  <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}>
@@ -1519,8 +1695,8 @@ const BundleTab = React.memo(() => {
             <View style={bundleStyles.filterContainer}>
               <View style={bundleStyles.searchRow}>
                 <SearchIcon color={AppColors.grayTextWeak} size={15}/>
-                <TextInput placeholder={t('bundle.searchPackagesPlaceholder')} placeholderTextColor={AppColors.grayTextWeak} value={search} onChangeText={setSearch} style={bundleStyles.searchInput} autoCorrect={false} autoCapitalize="none"/>
-                {search.length > 0 && (<Pressable onPress={() => setSearch('')} hitSlop={10}>
+                <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')}/>
@@ -1535,7 +1711,7 @@ const BundleTab = React.memo(() => {
                 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: '#FFFDFD' }]}>
+                return (<View key={pkg.id} style={[bundleStyles.fileCard, pkg.isDeprecated && { borderColor: AppColors.errorBorder, backgroundColor: AppColors.errorCardBg }]}>
                   {/* Header Row: #s.no + Logo + Package Name + Version Pill + Update/Deprecated Badges + Size & Copy */}
                   <View style={bundleStyles.fileCardTop}>
                     <View style={bundleStyles.sNoBadge}>
@@ -1635,7 +1811,7 @@ const BundleTab = React.memo(() => {
                       <Text style={bundleStyles.fileMetaText}>
                         {t('bundle.minified', { size: pkg.sizeKb })}
                       </Text>
-                      <TouchableScale onPress={() => {
+                      <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}>
@@ -1714,7 +1890,7 @@ const BundleTab = React.memo(() => {
                         {t('bundle.fileSizeKb', { size: file.sizeKb })}
                       </Text>
                     </View>
-                    <TouchableScale onPress={() => downloadBundleFile(file, analysis?.scriptURL)} style={bundleStyles.downloadFileBtn} hitSlop={8}>
+                    <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')}/>
@@ -2084,29 +2260,94 @@ const bundleStyles = StyleSheet.create({
         marginBottom: 12,
         backgroundColor: AppColors.slate200,
     },
+    prodTreemapBar: {
+        flexDirection: 'row',
+        borderRadius: 6,
+        overflow: 'hidden',
+        height: 16,
+        marginBottom: 12,
+        backgroundColor: AppColors.slate200,
+    },
     legendGrid: {
         flexDirection: 'row',
         flexWrap: 'wrap',
-        justifyContent: 'space-between',
-        rowGap: 8,
-        columnGap: 10,
+        gap: 8,
     },
     legendItem: {
         flexDirection: 'row',
         alignItems: 'center',
         gap: 6,
-        width: '48%',
+        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,
-        flex: 1,
     },
     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,

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

@@ -97,23 +97,27 @@ const CrashDetail = React.memo(() => {
             localStyles.pillBadge,
             {
                 backgroundColor: selectedCrash.isFatal
-                    ? '#FEE2E2'
-                    : '#FEF3C7',
-                borderColor: selectedCrash.isFatal ? '#FCA5A5' : '#FCD34D',
+                    ? AppColors.errorCardBg
+                    : AppColors.amberBg,
+                borderColor: selectedCrash.isFatal
+                    ? AppColors.errorBorder
+                    : AppColors.amberWarmBorder,
             },
         ]}>
               <View style={[
             localStyles.statusDot,
             {
                 backgroundColor: selectedCrash.isFatal
-                    ? '#DC2626'
-                    : '#D97706',
+                    ? AppColors.red600
+                    : AppColors.amber600,
             },
         ]}/>
               <Text style={[
             localStyles.pillBadgeText,
             {
-                color: selectedCrash.isFatal ? '#991B1B' : '#92400E',
+                color: selectedCrash.isFatal
+                    ? AppColors.redErrorText
+                    : AppColors.amberWarmText,
             },
         ]}>
                 {selectedCrash.isFatal ? t('crash.fatalCrash') : t('crash.handledException')}
@@ -124,11 +128,11 @@ const CrashDetail = React.memo(() => {
             <View style={[
             localStyles.pillBadge,
             {
-                backgroundColor: '#EDE9FE',
-                borderColor: '#C4B5FD',
+                backgroundColor: AppColors.violetSoftBg,
+                borderColor: AppColors.violetSoftBorder,
             },
         ]}>
-              <Text style={[localStyles.pillBadgeText, { color: '#6D28D9' }]}>
+              <Text style={[localStyles.pillBadgeText, { color: AppColors.purple700 }]}>
                 {selectedCrash.type.toUpperCase()}
               </Text>
             </View>
@@ -138,12 +142,12 @@ const CrashDetail = React.memo(() => {
             {/* Copy Report Action */}
             <TouchableScale onPress={handleCopyReport} hitSlop={10} style={[
             localStyles.actionButton,
-            copiedSuccess && { backgroundColor: '#ECFDF5', borderColor: '#6EE7B7' },
+            copiedSuccess && { backgroundColor: AppColors.mintGreenBg, borderColor: AppColors.mintGreenBorder },
         ]}>
-              {copiedSuccess ? (<CircleCheckIcon color="#059669" size={12}/>) : (<CopyIcon color={AppColors.purple} size={12}/>)}
+              {copiedSuccess ? (<CircleCheckIcon color={AppColors.mintGreenText} size={12}/>) : (<CopyIcon color={AppColors.purple} size={12}/>)}
               <Text style={[
             localStyles.actionButtonText,
-            copiedSuccess && { color: '#059669' },
+            copiedSuccess && { color: AppColors.mintGreenText },
         ]}>
                 {copiedSuccess ? t('crash.copied') : t('crash.copyReport')}
               </Text>

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

@@ -19,33 +19,33 @@ const InspectorHeader = React.memo(() => {
         if (clean === 'DEV' || clean.includes('DEV') || clean === 'LOCAL') {
             return {
                 label: rawEnv,
-                bg: 'rgba(16, 185, 129, 0.25)', // emerald
-                border: 'rgba(110, 231, 183, 0.55)',
-                text: '#A7F3D0',
+                bg: `${AppColors.emerald500}40`, // emerald
+                border: `${AppColors.emerald400}8C`,
+                text: AppColors.mintGreenBorder,
             };
         }
         if (clean === 'UAT' || clean === 'QA' || clean === 'TEST') {
             return {
                 label: rawEnv,
-                bg: 'rgba(245, 158, 11, 0.28)', // amber
-                border: 'rgba(252, 211, 77, 0.6)',
-                text: '#FDE68A',
+                bg: `${AppColors.amber500}47`, // amber
+                border: `${AppColors.amber400}99`,
+                text: AppColors.amberWarmBorder,
             };
         }
         if (clean === 'PREPROD' || clean === 'STAGE' || clean === 'STAGING') {
             return {
                 label: rawEnv,
-                bg: 'rgba(139, 92, 246, 0.28)', // purple
-                border: 'rgba(196, 181, 253, 0.6)',
-                text: '#DDD6FE',
+                bg: `${AppColors.purple500}47`, // purple
+                border: `${AppColors.purple400}99`,
+                text: AppColors.violetSoftBorder,
             };
         }
         // PROD / Live
         return {
             label: rawEnv,
-            bg: 'rgba(244, 63, 94, 0.25)', // rose
-            border: 'rgba(253, 164, 175, 0.55)',
-            text: '#FECDD3',
+            bg: `${AppColors.rose500}40`, // rose
+            border: `${AppColors.roseBorder}8C`,
+            text: AppColors.errorBorder,
         };
     }, [environment]);
     const isDetailView = (activeTab === 'apis' && selected != null) ||
@@ -446,8 +446,8 @@ const InspectorHeader = React.memo(() => {
                     styles.headerMethodBadge,
                     {
                         backgroundColor: selectedCrash.isFatal
-                            ? '#DC2626'
-                            : '#D97706',
+                            ? AppColors.red600
+                            : AppColors.amber600,
                     },
                 ]}>
                       <Text style={styles.headerMethodText}>
@@ -463,8 +463,8 @@ const InspectorHeader = React.memo(() => {
                     styles.headerStatusDot,
                     {
                         backgroundColor: selectedCrash.isFatal
-                            ? '#DC2626'
-                            : '#F59E0B',
+                            ? AppColors.red600
+                            : AppColors.amber500,
                     },
                 ]}/>
                     <Text style={styles.headerSubTitle}>

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

@@ -42,13 +42,17 @@ const MainScreen = () => {
         (activeTab === 'crash' && selectedCrash != null);
     return (<>
       {(Platform.OS === 'ios' || Platform.OS === 'android') && isEnabled && <FabLauncher />}
-      <Modal visible={visible} animationType={modalAnimationType} transparent>
+      <Modal visible={visible} animationType={modalAnimationType} transparent statusBarTranslucent={true}>
       {visible && (<ErrorBoundary onClose={closeModal}>
           <View style={styles.modalBackdrop}>
             <Pressable style={styles.modalBackdropPressable} onPress={closeModal}/>
             <View style={[
                 styles.modalContentCard,
-                { height: `${modalHeightPercent}%` },
+                {
+                    height: `${modalHeightPercent}%`,
+                    borderTopLeftRadius: modalHeightPercent >= 100 ? 0 : 20,
+                    borderTopRightRadius: modalHeightPercent >= 100 ? 0 : 20,
+                },
             ]}>
               <StatusBar translucent backgroundColor="transparent" barStyle="light-content"/>