react-native-inapp-inspector 1.1.34 → 2.0.0

package/android/src/main/java/com/inappinspector/NetworkInspectorPackage.kt

@@ -0,0 +1,17 @@
+package com.inappinspector
+
+import com.facebook.react.ReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ViewManager
+import java.util.Collections
+
+class NetworkInspectorPackage : ReactPackage {
+    override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
+        return listOf(NetworkInspectorModule(reactContext))
+    }
+
+    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+        return Collections.emptyList()
+    }
+}

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

@@ -42,6 +42,7 @@ const react_native_1 = require("react-native");
 const TouchableScale_1 = __importDefault(require("./TouchableScale"));
 // Helpers
 const helpers_1 = require("../helpers");
+const NativeInspector_1 = require("../native/NativeInspector");
 // Assets
 const NetworkIcons_1 = require("./NetworkIcons");
 // Stylesheet
@@ -50,6 +51,7 @@ const styles_1 = __importDefault(require("../styles"));
 const CopyButton = react_1.default.memo(({ value, label, iconType = 'copy' }) => {
     const [copied, setCopied] = (0, react_1.useState)(false);
     const handlePress = (0, react_1.useCallback)(() => {
+        (0, NativeInspector_1.triggerNativeHaptic)('success');
         const resolvedValue = typeof value === 'function' ? value() : value;
         (0, helpers_1.copyToClipboard)(resolvedValue, label);
         setCopied(true);
@@ -57,6 +59,7 @@ const CopyButton = react_1.default.memo(({ value, label, iconType = 'copy' }) =>
     }, [value, label]);
     const handleLongPress = (0, react_1.useCallback)(() => {
         try {
+            (0, NativeInspector_1.triggerNativeHaptic)('medium');
             const resolvedValue = typeof value === 'function' ? value() : value;
             const textToShare = typeof resolvedValue === 'string'
                 ? resolvedValue
@@ -77,7 +80,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/ErrorBoundary.js

@@ -43,6 +43,7 @@ const i18n_1 = require("../i18n");
 const NetworkIcons_1 = require("./NetworkIcons");
 const crashHandler_1 = require("../customHooks/crashHandler");
 const enums_1 = require("../types/enums");
+const NativeInspector_1 = require("../native/NativeInspector");
 function parseStackTrace(stack) {
     if (!stack)
         return { rootFrame: null, frames: [] };
@@ -145,6 +146,8 @@ ${error.stack || 'No stack trace available'}
         try {
             const stack = error?.stack || errorInfo?.componentStack || '';
             (0, crashHandler_1.handleInterceptedCrash)(error, stack, false, enums_1.CrashType.Render, errorInfo?.componentStack);
+            (0, NativeInspector_1.showNativeFloatingButton)();
+            (0, NativeInspector_1.setNativeFloatingButtonBadge)(true);
         }
         catch { }
     }

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

@@ -59,6 +59,10 @@ const AnalyticsHeader = react_1.default.memo(() => {
     const userProperties = (0, analyticsLogger_1.getCurrentUserProperties)();
     const defaultParams = (0, analyticsLogger_1.getDefaultEventParameters)();
     const isTrackingEnabled = (0, analyticsLogger_1.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;
@@ -628,8 +632,8 @@ const AnalyticsHeader = react_1.default.memo(() => {
         </react_native_1.View>
 
         {/* ── Crashlytics-Style Multi-Bar Histogram with Trendline Overlay ── */}
-        <react_native_1.View style={{ height: chartHeight, position: 'relative' }}>
-          <react_native_svg_1.default width="100%" height={chartHeight} viewBox={`0 0 ${svgWidth} ${chartHeight}`}>
+        <react_native_1.View style={{ height: chartHeight, position: 'relative', overflow: 'hidden', borderRadius: 8 }}>
+          <react_native_svg_1.default width="100%" height={chartHeight} viewBox={`0 0 ${svgWidth} ${chartHeight}`} preserveAspectRatio="none">
             <react_native_svg_1.Defs>
               <react_native_svg_1.LinearGradient id="crashlyticsBarGrad" x1="0" y1="0" x2="0" y2="1">
                 <react_native_svg_1.Stop offset="0%" stopColor="#8B5CF6" stopOpacity="0.9"/>
@@ -993,7 +997,7 @@ const AnalyticsTab = react_1.default.memo(() => {
       <AnalyticsFilterModal_1.default visible={isFilterModalOpen} onClose={() => setIsFilterModalOpen(false)}/>
 
       <react_native_1.View style={{ flex: 1 }} onLayout={() => setIsAnalyticsLayoutReady(true)}>
-        {selectedEvent != null ? (<AnalyticsDetail_1.default event={selectedEvent}/>) : isAnalyticsLayoutReady ? (<react_native_1.FlatList data={filteredAnalyticsEvents} keyExtractor={keyExtractor} ListHeaderComponent={AnalyticsHeader} renderItem={renderItem} initialNumToRender={20} maxToRenderPerBatch={20} windowSize={5} removeClippedSubviews={false} ListEmptyComponent={<react_native_1.View style={styles_1.default.emptyContainer}>
+        {selectedEvent != null ? (<AnalyticsDetail_1.default event={selectedEvent}/>) : isAnalyticsLayoutReady ? (<react_native_1.FlatList data={filteredAnalyticsEvents} keyExtractor={keyExtractor} ListHeaderComponent={AnalyticsHeader} renderItem={renderItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<react_native_1.View style={styles_1.default.emptyContainer}>
                 <react_native_1.View style={styles_1.default.emptyIconWrap}>
                   <NetworkIcons_1.EmptyRadarIcon color={AppColors_1.AppColors.purple} size={32}/>
                 </react_native_1.View>

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,
@@ -856,7 +856,7 @@ const BundleTab = react_1.default.memo(() => {
                           {analysis.scriptURL.length} chars
                         </react_native_1.Text>
                       </react_native_1.View>
-                      <react_native_1.Text selectable={true} style={{
+                      <react_native_1.Text selectable={true} numberOfLines={1} ellipsizeMode="tail" style={{
                     fontFamily: AppFonts_1.AppFonts.interMedium,
                     fontSize: 11,
                     color: AppColors_1.AppColors.skyBlue,
@@ -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/ConsoleTab.js

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

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>