react-native-inapp-inspector 1.1.33 → 1.1.35

package/dist/commonjs/styles/AppColors.js

@@ -164,6 +164,21 @@ const LightColors = {
     greyBorder: '#E3DFEC',
     paperBg: '#FBF9FC',
     contentBg: '#F8F7FB',
+    // ─── Toast / Glass / Chip Tokens ───
+    toastBg: '#0F172AEE',
+    toastBorder: '#33415588',
+    mintGreenBg: '#ECFDF5',
+    mintGreenBorder: '#A7F3D0',
+    mintGreenText: '#059669',
+    amberWarmBg: '#FFFBEB',
+    amberWarmBorder: '#FDE68A',
+    amberWarmText: '#92400E',
+    violetSoftBg: '#EDE9FE',
+    violetSoftBorder: '#DDD6FE',
+    violetSoftText: '#7C3AED',
+    skySoftBg: '#E0F2FE',
+    skySoftBorder: '#BAE6FD',
+    skySoftText: '#0284C7',
     // ─── Domain Colors (Thai Airways Themed) ───
     domainColors: [
         '#5C2D91',
@@ -240,6 +255,21 @@ const DarkColors = {
     amber700: '#C5A059',
     amber800: '#B89758',
     green500: '#22C55E',
+    // ─── Toast / Glass / Chip Tokens (Dark) ───
+    toastBg: '#1E293BEE',
+    toastBorder: '#47556988',
+    mintGreenBg: '#064E3B66',
+    mintGreenBorder: '#05966988',
+    mintGreenText: '#34D399',
+    amberWarmBg: '#451A0366',
+    amberWarmBorder: '#D9770688',
+    amberWarmText: '#FCD34D',
+    violetSoftBg: '#3B076466',
+    violetSoftBorder: '#7C3AED88',
+    violetSoftText: '#C084FC',
+    skySoftBg: '#082F4966',
+    skySoftBorder: '#0284C788',
+    skySoftText: '#38BDF8',
     green600: '#16A34A',
     green700: '#15803D',
     green800: '#166534',

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

@@ -39,7 +39,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>);
 });