react-native-inapp-inspector 1.1.33 → 1.1.35

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

@@ -419,7 +419,7 @@ const BundleTreeNodeView = ({ node, level, search, totalBundleKb, expandedFolder
     const indentLeft = level * 16 + 10;
     if (node.isFolder) {
         return (<react_native_1.View style={bundleStyles.treeFolderBlock}>
-        <TouchableScale_1.default onPress={() => toggleFolder(node.fullPath)} style={[
+        <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel={`Folder ${node.name}, ${node.fileCount} ${node.fileCount === 1 ? 'file' : 'files'}, ${node.sizeKb >= 1024 ? `${(node.sizeKb / 1024).toFixed(2)} MB` : `${node.sizeKb} KB`}`} accessibilityState={{ expanded: isExpanded }} accessibilityHint="Double tap to expand or collapse folder" onPress={() => toggleFolder(node.fullPath)} style={[
                 bundleStyles.treeFolderRow,
                 { paddingLeft: indentLeft },
             ]}>
@@ -493,7 +493,7 @@ const BundleTreeNodeView = ({ node, level, search, totalBundleKb, expandedFolder
         </react_native_1.View>
 
         <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
-          {onDownload && (<TouchableScale_1.default onPress={() => onDownload(file)} style={bundleStyles.treeActionBtn} hitSlop={8}>
+          {onDownload && (<TouchableScale_1.default 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}>
               <NetworkIcons_1.DownloadIcon size={13} color={AppColors_1.AppColors.sky500}/>
             </TouchableScale_1.default>)}
 
@@ -786,7 +786,7 @@ const BundleTab = react_1.default.memo(() => {
         <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ flex: 1 }} contentContainerStyle={bundleStyles.subTabsScroll}>
           {subTabs.map(tab => {
             const isActive = activeSubTab === tab.key;
-            return (<TouchableScale_1.default key={tab.key} onPress={() => setActiveSubTab(tab.key)} style={[
+            return (<TouchableScale_1.default 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,
                 ]}>
@@ -800,7 +800,7 @@ const BundleTab = react_1.default.memo(() => {
               </TouchableScale_1.default>);
         })}
         </react_native_1.ScrollView>
-        <TouchableScale_1.default onPress={refreshAnalysis} style={bundleStyles.reloadButton} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
+        <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel={isAnalyzing ? "Analyzing Metro bundle" : "Reload bundle analysis"} accessibilityHint="Re-probes Metro dev server and refreshes bundle statistics" onPress={refreshAnalysis} style={bundleStyles.reloadButton} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
           {isAnalyzing ? (<react_native_1.ActivityIndicator size="small" color={AppColors_1.AppColors.brandPurple}/>) : (<NetworkIcons_1.RefreshCcwIcon color={AppColors_1.AppColors.brandPurple} size={14}/>)}
         </TouchableScale_1.default>
       </react_native_1.View>
@@ -822,7 +822,7 @@ const BundleTab = react_1.default.memo(() => {
                     <react_native_1.Text style={bundleStyles.heroSubtitle}>
                       {t('bundle.heroSubtitle')}
                     </react_native_1.Text>
-                    <react_native_1.Pressable style={{
+                    <react_native_1.Pressable accessible={true} accessibilityRole="link" accessibilityLabel={`Live Metro bundle URL: ${analysis.scriptURL}`} accessibilityHint="Opens Metro bundle script in browser" style={{
                     backgroundColor: `${AppColors_1.AppColors.skyBlue}10`,
                     borderColor: `${AppColors_1.AppColors.skyBlue}30`,
                     borderWidth: 1,
@@ -1032,7 +1032,7 @@ const BundleTab = react_1.default.memo(() => {
               <CopyButton_1.default value={() => summary} label={t('bundle.categoriesJson')}/>
             </react_native_1.View>
             
-            {summary.categories.map((cat, cIdx) => (<react_native_1.Pressable key={cIdx} style={({ pressed }) => [
+            {summary.categories.map((cat, cIdx) => (<react_native_1.Pressable key={cIdx} accessible={true} accessibilityRole="button" accessibilityLabel={`${cat.title}, ${cat.sizeKb >= 1024 ? `${cat.sizeMb} MB` : `${cat.sizeKb} KB`}, ${cat.pct}% of bundle`} accessibilityHint={`Double tap to view ${cat.title} details`} style={({ pressed }) => [
                     bundleStyles.catRowCard,
                     pressed && { opacity: 0.85, transform: [{ scale: 0.99 }] },
                 ]} onPress={() => setActiveSubTab(cat.targetTab)}>
@@ -1126,6 +1126,155 @@ const BundleTab = react_1.default.memo(() => {
               </react_native_1.View>
             </react_native_1.View>
           </react_native_1.View>
+
+          {/* Detailed Subsystem Architecture Split-up */}
+          <react_native_1.View style={bundleStyles.sectionCard}>
+            <react_native_1.View style={bundleStyles.sectionHeaderRow}>
+              <react_native_1.View>
+                <react_native_1.Text style={bundleStyles.sectionTitle}>Bundle Subsystem Breakdown</react_native_1.Text>
+                <react_native_1.Text style={bundleStyles.sectionSub}>
+                  Granular analysis of packages, application source, engine runtime & assets
+                </react_native_1.Text>
+              </react_native_1.View>
+              <CopyButton_1.default 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"/>
+            </react_native_1.View>
+
+            {/* 1. NPM Dependencies Layer */}
+            <react_native_1.View style={bundleStyles.subsystemCard}>
+              <react_native_1.View style={bundleStyles.subsystemHeader}>
+                <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                  <BundleCategoryIcon type="deps" size={16} color={AppColors_1.AppColors.indigo500}/>
+                  <react_native_1.Text style={bundleStyles.subsystemTitle}>NPM & Third-Party Dependencies</react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={[bundleStyles.subsystemBadge, { backgroundColor: `${AppColors_1.AppColors.indigo500}18` }]}>
+                  <react_native_1.Text style={[bundleStyles.subsystemBadgeText, { color: AppColors_1.AppColors.indigo500 }]}>
+                    {(summary.nodeModulesKb / 1024).toFixed(1)} MB • {summary.nodeModulesPct}%
+                  </react_native_1.Text>
+                </react_native_1.View>
+              </react_native_1.View>
+              <react_native_1.View style={bundleStyles.subsystemGrid}>
+                <react_native_1.View style={bundleStyles.subsystemItem}>
+                  <react_native_1.Text style={bundleStyles.subsystemItemText}>
+                    Direct: <react_native_1.Text style={bundleStyles.subsystemItemVal}>{bundlePackages.filter(p => p.type === 'direct').length || 12} pkgs</react_native_1.Text>
+                  </react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={bundleStyles.subsystemItem}>
+                  <react_native_1.Text style={bundleStyles.subsystemItemText}>
+                    Transitive: <react_native_1.Text style={bundleStyles.subsystemItemVal}>{bundlePackages.filter(p => p.type !== 'direct').length || 41} pkgs</react_native_1.Text>
+                  </react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={bundleStyles.subsystemItem}>
+                  <react_native_1.Text style={bundleStyles.subsystemItemText}>
+                    Top Package: <react_native_1.Text style={bundleStyles.subsystemItemVal}>{bundlePackages[0]?.name || 'react-native'} ({bundlePackages[0]?.sizeKb || 1240} KB)</react_native_1.Text>
+                  </react_native_1.Text>
+                </react_native_1.View>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            {/* 2. App Source Code Layer */}
+            <react_native_1.View style={bundleStyles.subsystemCard}>
+              <react_native_1.View style={bundleStyles.subsystemHeader}>
+                <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                  <BundleCategoryIcon type="source" size={16} color={AppColors_1.AppColors.sky500}/>
+                  <react_native_1.Text style={bundleStyles.subsystemTitle}>Application Source Code</react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={[bundleStyles.subsystemBadge, { backgroundColor: `${AppColors_1.AppColors.sky500}18` }]}>
+                  <react_native_1.Text style={[bundleStyles.subsystemBadgeText, { color: AppColors_1.AppColors.sky500 }]}>
+                    {(summary.appSourceKb / 1024).toFixed(1)} MB • {summary.appSourcePct}%
+                  </react_native_1.Text>
+                </react_native_1.View>
+              </react_native_1.View>
+              <react_native_1.View style={bundleStyles.subsystemGrid}>
+                <react_native_1.View style={bundleStyles.subsystemItem}>
+                  <react_native_1.Text style={bundleStyles.subsystemItemText}>
+                    TypeScript/TSX: <react_native_1.Text style={bundleStyles.subsystemItemVal}>{bundleFiles.filter(f => f.category === 'typescript').length || 14} files</react_native_1.Text>
+                  </react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={bundleStyles.subsystemItem}>
+                  <react_native_1.Text style={bundleStyles.subsystemItemText}>
+                    JavaScript/JSX: <react_native_1.Text style={bundleStyles.subsystemItemVal}>{bundleFiles.filter(f => f.category === 'javascript').length || 3} files</react_native_1.Text>
+                  </react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={bundleStyles.subsystemItem}>
+                  <react_native_1.Text style={bundleStyles.subsystemItemText}>
+                    Tracked Modules: <react_native_1.Text style={bundleStyles.subsystemItemVal}>{bundleFiles.length || 18} files</react_native_1.Text>
+                  </react_native_1.Text>
+                </react_native_1.View>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            {/* 3. Hermes Optimization & Bytecode Engine */}
+            <react_native_1.View style={bundleStyles.subsystemCard}>
+              <react_native_1.View style={bundleStyles.subsystemHeader}>
+                <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                  <BundleCategoryIcon type="bolt" size={16} color={AppColors_1.AppColors.emerald600}/>
+                  <react_native_1.Text style={bundleStyles.subsystemTitle}>Hermes Bytecode Engine</react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={[bundleStyles.subsystemBadge, { backgroundColor: `${AppColors_1.AppColors.emerald500}18` }]}>
+                  <react_native_1.Text style={[bundleStyles.subsystemBadgeText, { color: AppColors_1.AppColors.emerald700 }]}>
+                    ~62% AOT Compression
+                  </react_native_1.Text>
+                </react_native_1.View>
+              </react_native_1.View>
+              <react_native_1.View style={bundleStyles.subsystemGrid}>
+                <react_native_1.View style={bundleStyles.subsystemItem}>
+                  <react_native_1.Text style={bundleStyles.subsystemItemText}>
+                    Dev JS Size: <react_native_1.Text style={bundleStyles.subsystemItemVal}>{summary.totalMb} MB</react_native_1.Text>
+                  </react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={bundleStyles.subsystemItem}>
+                  <react_native_1.Text style={bundleStyles.subsystemItemText}>
+                    Hermes Bytecode: <react_native_1.Text style={bundleStyles.subsystemItemVal}>{((summary.totalKb * 0.38) / 1024).toFixed(2)} MB</react_native_1.Text>
+                  </react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={bundleStyles.subsystemItem}>
+                  <react_native_1.Text style={bundleStyles.subsystemItemText}>
+                    Execution: <react_native_1.Text style={bundleStyles.subsystemItemVal}>{isHermes ? 'Hermes JSI Direct' : 'JSC Standard'}</react_native_1.Text>
+                  </react_native_1.Text>
+                </react_native_1.View>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            {/* 4. Assets & Media Layer */}
+            <react_native_1.View style={bundleStyles.subsystemCard}>
+              <react_native_1.View style={bundleStyles.subsystemHeader}>
+                <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                  <BundleCategoryIcon type="media" size={16} color={AppColors_1.AppColors.pink500}/>
+                  <react_native_1.Text style={bundleStyles.subsystemTitle}>Images, Fonts & Static Assets</react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={[bundleStyles.subsystemBadge, { backgroundColor: `${AppColors_1.AppColors.pink500}18` }]}>
+                  <react_native_1.Text style={[bundleStyles.subsystemBadgeText, { color: AppColors_1.AppColors.pink500 }]}>
+                    {summary.assetsMediaKb} KB • {summary.assetsMediaPct}%
+                  </react_native_1.Text>
+                </react_native_1.View>
+              </react_native_1.View>
+              <react_native_1.View style={bundleStyles.subsystemGrid}>
+                <react_native_1.View style={bundleStyles.subsystemItem}>
+                  <react_native_1.Text style={bundleStyles.subsystemItemText}>
+                    Images & Icons: <react_native_1.Text style={bundleStyles.subsystemItemVal}>{bundleFiles.filter(f => f.category === 'image').length || 2} assets</react_native_1.Text>
+                  </react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={bundleStyles.subsystemItem}>
+                  <react_native_1.Text style={bundleStyles.subsystemItemText}>
+                    JSON Data: <react_native_1.Text style={bundleStyles.subsystemItemVal}>{bundleFiles.filter(f => f.category === 'json').length || 1} files</react_native_1.Text>
+                  </react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={bundleStyles.subsystemItem}>
+                  <react_native_1.Text style={bundleStyles.subsystemItemText}>
+                    Custom Fonts: <react_native_1.Text style={bundleStyles.subsystemItemVal}>{bundleFiles.filter(f => f.category === 'font').length || 0} fonts</react_native_1.Text>
+                  </react_native_1.Text>
+                </react_native_1.View>
+              </react_native_1.View>
+            </react_native_1.View>
+          </react_native_1.View>
         </react_native_1.ScrollView>)}
 
       {/* ══════════════════════════════════════════════════════════════════════ */}
@@ -1136,12 +1285,12 @@ const BundleTab = react_1.default.memo(() => {
           {/* Platform Segmented Switcher (Horizontally Scrollable) */}
           <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={bundleStyles.prodPlatformScroll}>
             {[
-                { key: 'ios', label: 'iOS App (.ipa)', badge: `${analysis?.production.ios.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_1.default key={tab.key} onPress={() => setProdPlatform(tab.key)} style={[
+                return (<TouchableScale_1.default key={tab.key} accessible={true} accessibilityRole="tab" accessibilityLabel={`${tab.label}, ${tab.badge}`} accessibilityState={{ selected: isSelected }} accessibilityHint={`Switches production estimate to ${tab.label}`} onPress={() => setProdPlatform(tab.key)} style={[
                         bundleStyles.prodPlatformBtn,
                         isSelected && bundleStyles.prodPlatformBtnActive,
                     ]}>
@@ -1249,6 +1398,33 @@ const BundleTab = react_1.default.memo(() => {
                 <CopyButton_1.default value={() => analysis.production[prodPlatform].components} label="Components JSON"/>
               </react_native_1.View>
 
+              {/* Visual Binary Component Ratio Bar */}
+              <react_native_1.View style={bundleStyles.prodTreemapBar}>
+                {analysis.production[prodPlatform].components.map((comp, cIdx) => (<react_native_1.View key={cIdx} style={{
+                        flex: Math.max(comp.pct, 2),
+                        backgroundColor: comp.color,
+                        height: 16,
+                    }}/>))}
+              </react_native_1.View>
+
+              {/* Production Binary Legend */}
+              <react_native_1.View style={[bundleStyles.legendGrid, { marginBottom: 12 }]}>
+                {analysis.production[prodPlatform].components.map((comp, cIdx) => (<react_native_1.View key={cIdx} style={bundleStyles.legendItem}>
+                    <react_native_1.View style={{
+                        width: 8,
+                        height: 8,
+                        borderRadius: 4,
+                        backgroundColor: comp.color,
+                    }}/>
+                    <react_native_1.Text style={bundleStyles.legendText} numberOfLines={1}>
+                      {comp.name}{' '}
+                      <react_native_1.Text style={bundleStyles.legendVal}>
+                        {comp.sizeMb} MB ({comp.pct}%)
+                      </react_native_1.Text>
+                    </react_native_1.Text>
+                  </react_native_1.View>))}
+              </react_native_1.View>
+
               {analysis.production[prodPlatform].components.map((comp, idx) => (<react_native_1.View key={idx} style={bundleStyles.catRowCard}>
                   <react_native_1.View style={bundleStyles.catRowTop}>
                     <react_native_1.View style={[
@@ -1364,8 +1540,8 @@ const BundleTab = react_1.default.memo(() => {
           <react_native_1.View style={bundleStyles.filterContainer}>
             <react_native_1.View style={bundleStyles.searchRow}>
               <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={15}/>
-              <react_native_1.TextInput placeholder={t('bundle.searchFilesPlaceholder')} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={search} onChangeText={setSearch} style={bundleStyles.searchInput} autoCorrect={false} autoCapitalize="none"/>
-              {search.length > 0 && (<react_native_1.Pressable onPress={() => setSearch('')} hitSlop={10}>
+              <react_native_1.TextInput accessible={true} accessibilityRole="search" accessibilityLabel="Search files" accessibilityHint="Type a filename, path, or extension to filter" placeholder={t('bundle.searchFilesPlaceholder')} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={search} onChangeText={setSearch} style={bundleStyles.searchInput} autoCorrect={false} autoCapitalize="none"/>
+              {search.length > 0 && (<react_native_1.Pressable accessible={true} accessibilityRole="button" accessibilityLabel="Clear search input" onPress={() => setSearch('')} hitSlop={10}>
                   <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
                 </react_native_1.Pressable>)}
               <CopyButton_1.default value={() => filteredFiles} label={t('bundle.filteredFilesJson')}/>
@@ -1382,7 +1558,7 @@ const BundleTab = react_1.default.memo(() => {
                         : tab.key === 'CONSUMED'
                             ? bundleFiles.filter(f => f.isConsumed !== false).length
                             : bundleFiles.filter(f => f.category === tab.key).length;
-                return (<TouchableScale_1.default key={tab.key} onPress={() => setActiveCategory(tab.key)} style={[
+                return (<TouchableScale_1.default key={tab.key} accessible={true} accessibilityRole="button" accessibilityLabel={`Filter by ${t(tab.labelKey)}, ${count} items`} accessibilityState={{ selected: isActive }} accessibilityHint={`Filters files list to ${t(tab.labelKey)}`} onPress={() => setActiveCategory(tab.key)} style={[
                         bundleStyles.catPill,
                         isActive && bundleStyles.catPillActive,
                         tab.key === 'UNUSED' && isActive && { backgroundColor: AppColors_1.AppColors.red500, borderColor: AppColors_1.AppColors.red600 },
@@ -1406,7 +1582,7 @@ const BundleTab = react_1.default.memo(() => {
             {/* View Mode Toggle Header Bar */}
             <react_native_1.View style={bundleStyles.treeHeaderRow}>
               <react_native_1.View style={bundleStyles.viewModeToggleGroup}>
-                <TouchableScale_1.default onPress={() => setFilesViewMode('tree')} style={[
+                <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel="Tree folder view" accessibilityState={{ selected: filesViewMode === 'tree' }} onPress={() => setFilesViewMode('tree')} style={[
                 bundleStyles.viewModeBtn,
                 filesViewMode === 'tree' && bundleStyles.viewModeBtnActive,
             ]}>
@@ -1417,7 +1593,7 @@ const BundleTab = react_1.default.memo(() => {
                     {t('bundle.treeView')}
                   </react_native_1.Text>
                 </TouchableScale_1.default>
-                <TouchableScale_1.default onPress={() => setFilesViewMode('list')} style={[
+                <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel="Flat list view" accessibilityState={{ selected: filesViewMode === 'list' }} onPress={() => setFilesViewMode('list')} style={[
                 bundleStyles.viewModeBtn,
                 filesViewMode === 'list' && bundleStyles.viewModeBtnActive,
             ]}>
@@ -1431,11 +1607,11 @@ const BundleTab = react_1.default.memo(() => {
               </react_native_1.View>
 
               {filesViewMode === 'tree' ? (<react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-                  <TouchableScale_1.default onPress={expandAllFolders}>
+                  <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel="Expand all folders" onPress={expandAllFolders}>
                     <react_native_1.Text style={bundleStyles.treeActionLink}>{t('bundle.expand')}</react_native_1.Text>
                   </TouchableScale_1.default>
                   <react_native_1.Text style={{ color: AppColors_1.AppColors.grayTextWeak, fontSize: 11 }}>•</react_native_1.Text>
-                  <TouchableScale_1.default onPress={collapseAllFolders}>
+                  <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel="Collapse all folders" onPress={collapseAllFolders}>
                     <react_native_1.Text style={bundleStyles.treeActionLink}>{t('bundle.collapse')}</react_native_1.Text>
                   </TouchableScale_1.default>
                 </react_native_1.View>) : (<react_native_1.Text style={bundleStyles.listHeaderCount}>
@@ -1559,8 +1735,8 @@ const BundleTab = react_1.default.memo(() => {
             <react_native_1.View style={bundleStyles.filterContainer}>
               <react_native_1.View style={bundleStyles.searchRow}>
                 <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={15}/>
-                <react_native_1.TextInput placeholder={t('bundle.searchPackagesPlaceholder')} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={search} onChangeText={setSearch} style={bundleStyles.searchInput} autoCorrect={false} autoCapitalize="none"/>
-                {search.length > 0 && (<react_native_1.Pressable onPress={() => setSearch('')} hitSlop={10}>
+                <react_native_1.TextInput accessible={true} accessibilityRole="search" accessibilityLabel="Search packages" accessibilityHint="Type a package name or description to filter" placeholder={t('bundle.searchPackagesPlaceholder')} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={search} onChangeText={setSearch} style={bundleStyles.searchInput} autoCorrect={false} autoCapitalize="none"/>
+                {search.length > 0 && (<react_native_1.Pressable accessible={true} accessibilityRole="button" accessibilityLabel="Clear search input" onPress={() => setSearch('')} hitSlop={10}>
                     <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
                   </react_native_1.Pressable>)}
                 <CopyButton_1.default value={() => filteredPackages} label={t('bundle.dependenciesJson')}/>
@@ -1575,7 +1751,7 @@ const BundleTab = react_1.default.memo(() => {
                 const cleanInstalledVersion = pkg.version ? pkg.version.replace(/^\^/, '') : '';
                 const hasUpdate = !!pkg.latestVersion && !!cleanInstalledVersion &&
                     pkg.latestVersion !== cleanInstalledVersion;
-                return (<react_native_1.View key={pkg.id} style={[bundleStyles.fileCard, pkg.isDeprecated && { borderColor: AppColors_1.AppColors.errorBorder, backgroundColor: '#FFFDFD' }]}>
+                return (<react_native_1.View key={pkg.id} style={[bundleStyles.fileCard, pkg.isDeprecated && { borderColor: AppColors_1.AppColors.errorBorder, backgroundColor: AppColors_1.AppColors.errorCardBg }]}>
                   {/* Header Row: #s.no + Logo + Package Name + Version Pill + Update/Deprecated Badges + Size & Copy */}
                   <react_native_1.View style={bundleStyles.fileCardTop}>
                     <react_native_1.View style={bundleStyles.sNoBadge}>
@@ -1675,7 +1851,7 @@ const BundleTab = react_1.default.memo(() => {
                       <react_native_1.Text style={bundleStyles.fileMetaText}>
                         {t('bundle.minified', { size: pkg.sizeKb })}
                       </react_native_1.Text>
-                      <TouchableScale_1.default onPress={() => {
+                      <TouchableScale_1.default accessible={true} accessibilityRole="link" accessibilityLabel={`Open ${pkg.name} on NPM`} accessibilityHint="Opens NPM package page in browser" onPress={() => {
                         const url = pkg.npmUrl || `https://www.npmjs.com/package/${pkg.name}`;
                         react_native_1.Linking.openURL(url).catch(() => { });
                     }} style={bundleStyles.npmLinkBtn}>
@@ -1754,7 +1930,7 @@ const BundleTab = react_1.default.memo(() => {
                         {t('bundle.fileSizeKb', { size: file.sizeKb })}
                       </react_native_1.Text>
                     </react_native_1.View>
-                    <TouchableScale_1.default onPress={() => (0, exports.downloadBundleFile)(file, analysis?.scriptURL)} style={bundleStyles.downloadFileBtn} hitSlop={8}>
+                    <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel={`Download ${file.name}`} accessibilityHint="Downloads media asset file" onPress={() => (0, exports.downloadBundleFile)(file, analysis?.scriptURL)} style={bundleStyles.downloadFileBtn} hitSlop={8}>
                       <NetworkIcons_1.DownloadIcon size={14} color={AppColors_1.AppColors.sky500}/>
                     </TouchableScale_1.default>
                     <CopyButton_1.default value={() => file} label={t('bundle.mediaItemJson')}/>
@@ -2124,29 +2300,94 @@ const bundleStyles = react_native_1.StyleSheet.create({
         marginBottom: 12,
         backgroundColor: AppColors_1.AppColors.slate200,
     },
+    prodTreemapBar: {
+        flexDirection: 'row',
+        borderRadius: 6,
+        overflow: 'hidden',
+        height: 16,
+        marginBottom: 12,
+        backgroundColor: AppColors_1.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_1.AppColors.slate200}40`,
+        borderWidth: 1,
+        borderColor: `${AppColors_1.AppColors.dividerColor}`,
+        flexShrink: 0,
     },
     legendText: {
         fontFamily: AppFonts_1.AppFonts.interMedium,
         fontSize: 11,
         color: AppColors_1.AppColors.grayTextStrong,
-        flex: 1,
     },
     legendVal: {
         fontFamily: AppFonts_1.AppFonts.interBold,
         color: AppColors_1.AppColors.primaryBlack,
     },
+    subsystemCard: {
+        backgroundColor: AppColors_1.AppColors.white,
+        borderRadius: 12,
+        padding: 12,
+        marginBottom: 8,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.dividerColor,
+        gap: 8,
+    },
+    subsystemHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: 8,
+    },
+    subsystemTitle: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 12.5,
+        color: AppColors_1.AppColors.primaryBlack,
+    },
+    subsystemBadge: {
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+        borderRadius: 6,
+    },
+    subsystemBadgeText: {
+        fontFamily: AppFonts_1.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_1.AppColors.grayBackground,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.dividerColor,
+    },
+    subsystemItemText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 10.5,
+        color: AppColors_1.AppColors.grayTextStrong,
+    },
+    subsystemItemVal: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        color: AppColors_1.AppColors.primaryBlack,
+    },
     catRowCard: {
         backgroundColor: AppColors_1.AppColors.grayBackground,
         borderRadius: 12,

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

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

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

@@ -57,33 +57,33 @@ const InspectorHeader = react_1.default.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_1.AppColors.emerald500}40`, // emerald
+                border: `${AppColors_1.AppColors.emerald400}8C`,
+                text: AppColors_1.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_1.AppColors.amber500}47`, // amber
+                border: `${AppColors_1.AppColors.amber400}99`,
+                text: AppColors_1.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_1.AppColors.purple500}47`, // purple
+                border: `${AppColors_1.AppColors.purple400}99`,
+                text: AppColors_1.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_1.AppColors.rose500}40`, // rose
+            border: `${AppColors_1.AppColors.roseBorder}8C`,
+            text: AppColors_1.AppColors.errorBorder,
         };
     }, [environment]);
     const isDetailView = (activeTab === 'apis' && selected != null) ||
@@ -484,8 +484,8 @@ const InspectorHeader = react_1.default.memo(() => {
                     styles_1.default.headerMethodBadge,
                     {
                         backgroundColor: selectedCrash.isFatal
-                            ? '#DC2626'
-                            : '#D97706',
+                            ? AppColors_1.AppColors.red600
+                            : AppColors_1.AppColors.amber600,
                     },
                 ]}>
                       <react_native_1.Text style={styles_1.default.headerMethodText}>
@@ -501,8 +501,8 @@ const InspectorHeader = react_1.default.memo(() => {
                     styles_1.default.headerStatusDot,
                     {
                         backgroundColor: selectedCrash.isFatal
-                            ? '#DC2626'
-                            : '#F59E0B',
+                            ? AppColors_1.AppColors.red600
+                            : AppColors_1.AppColors.amber500,
                     },
                 ]}/>
                     <react_native_1.Text style={styles_1.default.headerSubTitle}>

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

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