react-native-inapp-inspector 1.1.34 → 2.0.0

package/dist/esm/components/ConsoleLogCard.js

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

package/dist/esm/components/CopyButton.js

@@ -4,6 +4,7 @@ import { Share } from 'react-native';
 import TouchableScale from './TouchableScale';
 // Helpers
 import { copyToClipboard } from '../helpers';
+import { triggerNativeHaptic } from '../native/NativeInspector';
 // Assets
 import { TerminalIcon, FetchIcon, CopyIcon, CheckIcon } from './NetworkIcons';
 // Stylesheet
@@ -12,6 +13,7 @@ import styles from '../styles';
 const CopyButton = React.memo(({ value, label, iconType = 'copy' }) => {
     const [copied, setCopied] = useState(false);
     const handlePress = useCallback(() => {
+        triggerNativeHaptic('success');
         const resolvedValue = typeof value === 'function' ? value() : value;
         copyToClipboard(resolvedValue, label);
         setCopied(true);
@@ -19,6 +21,7 @@ const CopyButton = React.memo(({ value, label, iconType = 'copy' }) => {
     }, [value, label]);
     const handleLongPress = useCallback(() => {
         try {
+            triggerNativeHaptic('medium');
             const resolvedValue = typeof value === 'function' ? value() : value;
             const textToShare = typeof resolvedValue === 'string'
                 ? resolvedValue
@@ -39,7 +42,13 @@ const CopyButton = React.memo(({ value, label, iconType = 'copy' }) => {
         : iconType === 'fetch'
             ? FetchIcon
             : CopyIcon;
-    return (<TouchableScale onPress={handlePress} onLongPress={handleLongPress} hitSlop={12} style={containerStyle}>
+    return (<TouchableScale 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 ? (<CheckIcon color={AppColors.greenColor} size={14}/>) : (<IconComponent color={AppColors.grayTextWeak} size={14}/>)}
     </TouchableScale>);
 });

package/dist/esm/components/ErrorBoundary.js

@@ -7,6 +7,7 @@ import { t } from '../i18n';
 import { WarningTriangleIcon, CopyIcon, RefreshCcwIcon, ClearIcon, CircleAlertIcon, } from './NetworkIcons';
 import { handleInterceptedCrash } from '../customHooks/crashHandler';
 import { CrashType } from '../types/enums';
+import { showNativeFloatingButton, setNativeFloatingButtonBadge, } from '../native/NativeInspector';
 function parseStackTrace(stack) {
     if (!stack)
         return { rootFrame: null, frames: [] };
@@ -109,6 +110,8 @@ ${error.stack || 'No stack trace available'}
         try {
             const stack = error?.stack || errorInfo?.componentStack || '';
             handleInterceptedCrash(error, stack, false, CrashType.Render, errorInfo?.componentStack);
+            showNativeFloatingButton();
+            setNativeFloatingButtonBadge(true);
         }
         catch { }
     }

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

@@ -21,6 +21,10 @@ const AnalyticsHeader = React.memo(() => {
     const userProperties = getCurrentUserProperties();
     const defaultParams = getDefaultEventParameters();
     const isTrackingEnabled = getCollectionEnabled();
+    // If there are no analytics events in the session, hide the graph, category breakdown, and realtime card
+    if (analyticsEvents.length === 0) {
+        return null;
+    }
     const hasUserProps = Object.keys(userProperties).length > 0;
     const hasDefaultParams = Object.keys(defaultParams).length > 0;
     const totalEvents = filteredAnalyticsEvents.length;
@@ -590,8 +594,8 @@ const AnalyticsHeader = React.memo(() => {
         </View>
 
         {/* ── Crashlytics-Style Multi-Bar Histogram with Trendline Overlay ── */}
-        <View style={{ height: chartHeight, position: 'relative' }}>
-          <Svg width="100%" height={chartHeight} viewBox={`0 0 ${svgWidth} ${chartHeight}`}>
+        <View style={{ height: chartHeight, position: 'relative', overflow: 'hidden', borderRadius: 8 }}>
+          <Svg width="100%" height={chartHeight} viewBox={`0 0 ${svgWidth} ${chartHeight}`} preserveAspectRatio="none">
             <Defs>
               <SvgLinearGradient id="crashlyticsBarGrad" x1="0" y1="0" x2="0" y2="1">
                 <Stop offset="0%" stopColor="#8B5CF6" stopOpacity="0.9"/>
@@ -955,7 +959,7 @@ const AnalyticsTab = React.memo(() => {
       <AnalyticsFilterModal visible={isFilterModalOpen} onClose={() => setIsFilterModalOpen(false)}/>
 
       <View style={{ flex: 1 }} onLayout={() => setIsAnalyticsLayoutReady(true)}>
-        {selectedEvent != null ? (<AnalyticsDetail event={selectedEvent}/>) : isAnalyticsLayoutReady ? (<FlatList data={filteredAnalyticsEvents} keyExtractor={keyExtractor} ListHeaderComponent={AnalyticsHeader} renderItem={renderItem} initialNumToRender={20} maxToRenderPerBatch={20} windowSize={5} removeClippedSubviews={false} ListEmptyComponent={<View style={styles.emptyContainer}>
+        {selectedEvent != null ? (<AnalyticsDetail event={selectedEvent}/>) : isAnalyticsLayoutReady ? (<FlatList data={filteredAnalyticsEvents} keyExtractor={keyExtractor} ListHeaderComponent={AnalyticsHeader} renderItem={renderItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<View style={styles.emptyContainer}>
                 <View style={styles.emptyIconWrap}>
                   <EmptyRadarIcon color={AppColors.purple} size={32}/>
                 </View>

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,
@@ -816,7 +816,7 @@ const BundleTab = React.memo(() => {
                           {analysis.scriptURL.length} chars
                         </Text>
                       </View>
-                      <Text selectable={true} style={{
+                      <Text selectable={true} numberOfLines={1} ellipsizeMode="tail" style={{
                     fontFamily: AppFonts.interMedium,
                     fontSize: 11,
                     color: AppColors.skyBlue,
@@ -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)}>
@@ -1250,7 +1250,7 @@ const BundleTab = React.memo(() => {
                 { 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,
                     ]}>
@@ -1500,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')}/>
@@ -1518,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 },
@@ -1542,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,
             ]}>
@@ -1553,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,
             ]}>
@@ -1567,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}>
@@ -1695,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')}/>
@@ -1711,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}>
@@ -1811,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}>
@@ -1890,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')}/>

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

@@ -469,7 +469,7 @@ const ConsoleTab = React.memo(() => {
         </ScrollView>
       </View>
 
-      <FlatList data={filteredConsoleLogs} keyExtractor={keyExtractor} ListHeaderComponent={listHeader} renderItem={renderItem} initialNumToRender={15} maxToRenderPerBatch={15} windowSize={7} removeClippedSubviews={true} ListEmptyComponent={<EmptyState isSearch={logSearch.length > 0 || logFilters.size > 0}/>} ListFooterComponent={filteredConsoleLogs.length > 0 ? (<EndOfListFooter count={filteredConsoleLogs.length} label="logs"/>) : null} contentContainerStyle={[
+      <FlatList data={filteredConsoleLogs} keyExtractor={keyExtractor} ListHeaderComponent={listHeader} renderItem={renderItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState isSearch={logSearch.length > 0 || logFilters.size > 0}/>} ListFooterComponent={filteredConsoleLogs.length > 0 ? (<EndOfListFooter count={filteredConsoleLogs.length} label="logs"/>) : null} contentContainerStyle={[
             styles.listContent,
             filteredConsoleLogs.length === 0 && { flexGrow: 1 },
         ]} keyboardShouldPersistTaps="handled"/>

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>