react-native-inapp-inspector 1.1.34 → 1.1.35

package/dist/commonjs/components/ConsoleLogCard.js

@@ -26,44 +26,45 @@ const getLogMessageWithBadges = (message, searchStr, textStyle, highlightStyle,
         const getTagDecorator = (tag) => {
             const clean = tag.replace(/[\[\]]/g, '').trim().toUpperCase();
             if (clean === 'AXIOS') {
-                return { color: AppColors_1.AppColors.emerald600, icon: '⚡', label: 'AXIOS' };
+                return { color: AppColors_1.AppColors.emerald600, Icon: NetworkIcons_1.ZapIcon, label: 'AXIOS' };
             }
             if (clean === 'API' || clean === 'FETCH' || clean === 'HTTP' || clean === 'NETWORK') {
-                return { color: AppColors_1.AppColors.sky600, icon: '🌐', label: clean };
+                return { color: AppColors_1.AppColors.sky600, Icon: NetworkIcons_1.GlobeIcon, label: clean };
             }
             if (clean === 'SAMPLE' || clean === 'BATCH') {
-                return { color: AppColors_1.AppColors.indigo600Alt, icon: '🎲', label: clean };
+                return { color: AppColors_1.AppColors.indigo600Alt, Icon: NetworkIcons_1.DiceIcon, label: clean };
             }
             if (clean === 'REDUX' || clean === 'STORE' || clean === 'STATE') {
-                return { color: AppColors_1.AppColors.violet600, icon: '⚛️', label: clean };
+                return { color: AppColors_1.AppColors.violet600, Icon: NetworkIcons_1.AtomIcon, label: clean };
             }
             if (clean === 'ANALYTICS' || clean === 'FIREBASE' || clean === 'GA4' || clean === 'GA') {
-                return { color: AppColors_1.AppColors.teal600, icon: '📊', label: clean };
+                return { color: AppColors_1.AppColors.teal600, Icon: NetworkIcons_1.BarChartIcon, label: clean };
             }
             if (clean === 'AUTH' || clean === 'TOKEN' || clean === 'SESSION') {
-                return { color: AppColors_1.AppColors.amber600, icon: '🔑', label: clean };
+                return { color: AppColors_1.AppColors.amber600, Icon: NetworkIcons_1.KeyIcon, label: clean };
             }
             if (clean === 'APP') {
-                return { color: AppColors_1.AppColors.indigo600Alt, icon: '📱', label: 'APP' };
+                return { color: AppColors_1.AppColors.indigo600Alt, Icon: NetworkIcons_1.SmartphoneIcon, label: 'APP' };
             }
             if (clean === 'TEST') {
-                return { color: AppColors_1.AppColors.emerald500, icon: '🧪', label: 'TEST' };
+                return { color: AppColors_1.AppColors.emerald500, Icon: NetworkIcons_1.FlaskIcon, label: 'TEST' };
             }
             if (clean === 'WARN' || clean === 'WARNING') {
-                return { color: AppColors_1.AppColors.amber600, icon: '⚠️', label: 'WARN' };
+                return { color: AppColors_1.AppColors.amber600, Icon: NetworkIcons_1.AlertTriangleIcon, label: 'WARN' };
             }
             if (clean === 'ERROR' || clean === 'CRASH' || clean === 'BUG') {
-                return { color: AppColors_1.AppColors.red600, icon: '💥', label: 'ERROR' };
+                return { color: AppColors_1.AppColors.red600, Icon: NetworkIcons_1.BugIcon, label: 'ERROR' };
             }
             if (clean === 'PERF' || clean === 'RENDER') {
-                return { color: AppColors_1.AppColors.violet500, icon: '⚡', label: clean };
+                return { color: AppColors_1.AppColors.violet500, Icon: NetworkIcons_1.ZapIcon, label: clean };
             }
-            return { color: AppColors_1.AppColors.slate600, icon: '🏷️', label: clean };
+            return { color: AppColors_1.AppColors.slate600, Icon: NetworkIcons_1.TagIcon, label: clean };
         };
         return (<react_native_1.View style={{ flexDirection: 'column', gap: 6 }}>
         <react_native_1.View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 5 }}>
           {tags.map((tag, i) => {
                 const dec = getTagDecorator(tag);
+                const IconComp = dec.Icon;
                 return (<react_native_1.View key={i} style={[
                         styles.prefixTag,
                         {
@@ -71,7 +72,7 @@ const getLogMessageWithBadges = (message, searchStr, textStyle, highlightStyle,
                             borderColor: `${dec.color}35`,
                         },
                     ]}>
-                <react_native_1.Text style={{ fontSize: 9.5 }}>{dec.icon}</react_native_1.Text>
+                <IconComp color={dec.color} size={10}/>
                 <react_native_1.Text style={[styles.prefixTagText, { color: dec.color }]}>
                   {dec.label}
                 </react_native_1.Text>
@@ -99,67 +100,67 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
         const method = (item.sourceMethod || type).toLowerCase();
         if (isAnalyticsError || type === 'error' || method === 'error') {
             return {
-                border: '#EF4444',
-                badgeBg: '#FEE2E2',
-                badgeText: '#DC2626',
+                border: AppColors_1.AppColors.errorColor,
+                badgeBg: AppColors_1.AppColors.errorCardBg,
+                badgeText: AppColors_1.AppColors.rose600,
                 label: 'ERROR',
-                cardBg: '#FEF2F2',
-                methodBorder: '#FECACA',
-                methodBg: '#FEE2E2',
-                methodText: '#DC2626',
-                textColor: '#991B1B',
+                cardBg: AppColors_1.AppColors.errorCardBg,
+                methodBorder: AppColors_1.AppColors.errorBorder,
+                methodBg: AppColors_1.AppColors.errorCardBg,
+                methodText: AppColors_1.AppColors.rose600,
+                textColor: AppColors_1.AppColors.redErrorText,
             };
         }
         if (type === 'warn' || method === 'warn') {
             return {
-                border: '#F59E0B',
-                badgeBg: '#FEF3C7',
-                badgeText: '#D97706',
+                border: AppColors_1.AppColors.amber600,
+                badgeBg: AppColors_1.AppColors.amberBg,
+                badgeText: AppColors_1.AppColors.amber700,
                 label: 'WARN',
-                cardBg: '#FFFBEB',
-                methodBorder: '#FDE68A',
-                methodBg: '#FEF3C7',
-                methodText: '#D97706',
-                textColor: '#92400E',
+                cardBg: AppColors_1.AppColors.amberWarmBg,
+                methodBorder: AppColors_1.AppColors.amberWarmBorder,
+                methodBg: AppColors_1.AppColors.amberBg,
+                methodText: AppColors_1.AppColors.amber700,
+                textColor: AppColors_1.AppColors.amberWarmText,
             };
         }
         if (type === 'debug' || method === 'debug') {
             return {
-                border: '#8B5CF6',
-                badgeBg: '#EDE9FE',
-                badgeText: '#7C3AED',
+                border: AppColors_1.AppColors.purple500,
+                badgeBg: AppColors_1.AppColors.violetSoftBg,
+                badgeText: AppColors_1.AppColors.violetSoftText,
                 label: 'DEBUG',
-                cardBg: '#F5F3FF',
-                methodBorder: '#DDD6FE',
-                methodBg: '#EDE9FE',
-                methodText: '#7C3AED',
-                textColor: '#4C1D95',
+                cardBg: AppColors_1.AppColors.purpleShade50,
+                methodBorder: AppColors_1.AppColors.violetSoftBorder,
+                methodBg: AppColors_1.AppColors.violetSoftBg,
+                methodText: AppColors_1.AppColors.violetSoftText,
+                textColor: AppColors_1.AppColors.purpleText,
             };
         }
         if (type === 'info' || method === 'info') {
             return {
-                border: '#0EA5E9',
-                badgeBg: '#E0F2FE',
-                badgeText: '#0284C7',
+                border: AppColors_1.AppColors.sky500,
+                badgeBg: AppColors_1.AppColors.skySoftBg,
+                badgeText: AppColors_1.AppColors.skySoftText,
                 label: 'INFO',
-                cardBg: '#F0F9FF',
-                methodBorder: '#BAE6FD',
-                methodBg: '#E0F2FE',
-                methodText: '#0284C7',
-                textColor: '#075985',
+                cardBg: AppColors_1.AppColors.blueBg,
+                methodBorder: AppColors_1.AppColors.skySoftBorder,
+                methodBg: AppColors_1.AppColors.skySoftBg,
+                methodText: AppColors_1.AppColors.skySoftText,
+                textColor: AppColors_1.AppColors.blue800,
             };
         }
         // Default / Standard console.log
         return {
-            border: '#6366F1',
-            badgeBg: '#EEF2FF',
-            badgeText: '#4F46E5',
+            border: AppColors_1.AppColors.indigo500,
+            badgeBg: AppColors_1.AppColors.indigo50,
+            badgeText: AppColors_1.AppColors.indigo600Alt,
             label: 'LOG',
-            cardBg: '#FFFFFF',
-            methodBorder: '#E0E7FF',
-            methodBg: '#EEF2FF',
-            methodText: '#4F46E5',
-            textColor: '#0F172A',
+            cardBg: AppColors_1.AppColors.primaryLight,
+            methodBorder: AppColors_1.AppColors.dividerColor,
+            methodBg: AppColors_1.AppColors.indigo50,
+            methodText: AppColors_1.AppColors.indigo600Alt,
+            textColor: AppColors_1.AppColors.primaryBlack,
         };
     };
     const colors = getLogColors();
@@ -204,11 +205,11 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
             {jsonContent && (<react_native_1.View style={[
                 styles.metaChip,
                 {
-                    backgroundColor: '#ECFDF5',
-                    borderColor: '#A7F3D0',
+                    backgroundColor: AppColors_1.AppColors.mintGreenBg,
+                    borderColor: AppColors_1.AppColors.mintGreenBorder,
                 },
             ]}>
-                <react_native_1.Text style={[styles.metaChipText, { color: '#059669', fontFamily: AppFonts_1.AppFonts.interBold }]}>
+                <react_native_1.Text style={[styles.metaChipText, { color: AppColors_1.AppColors.mintGreenText, fontFamily: AppFonts_1.AppFonts.interBold }]}>
                   {Array.isArray(jsonContent.data)
                 ? `Array[${jsonContent.data.length}]`
                 : `Object{${Object.keys(jsonContent.data).length}}`}

package/dist/commonjs/components/CopyButton.js

@@ -77,7 +77,13 @@ const CopyButton = react_1.default.memo(({ value, label, iconType = 'copy' }) =>
         : iconType === 'fetch'
             ? NetworkIcons_1.FetchIcon
             : NetworkIcons_1.CopyIcon;
-    return (<TouchableScale_1.default onPress={handlePress} onLongPress={handleLongPress} hitSlop={12} style={containerStyle}>
+    return (<TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel={label
+            ? copied
+                ? `${label} copied`
+                : `Copy ${label}`
+            : copied
+                ? 'Copied to clipboard'
+                : 'Copy to clipboard'} accessibilityHint="Double tap to copy, long press to share" onPress={handlePress} onLongPress={handleLongPress} hitSlop={12} style={containerStyle}>
       {copied ? (<NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.greenColor} size={14}/>) : (<IconComponent color={AppColors_1.AppColors.grayTextWeak} size={14}/>)}
     </TouchableScale_1.default>);
 });

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)}>
@@ -1290,7 +1290,7 @@ const BundleTab = react_1.default.memo(() => {
                 { 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,
                     ]}>
@@ -1540,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')}/>
@@ -1558,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 },
@@ -1582,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,
             ]}>
@@ -1593,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,
             ]}>
@@ -1607,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}>
@@ -1735,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')}/>
@@ -1751,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}>
@@ -1851,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}>
@@ -1930,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')}/>

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"/>