react-native-inapp-inspector 1.1.24 → 1.1.25

package/dist/commonjs/components/AnalyticsEventCard.js

@@ -53,6 +53,8 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
     const userPropCount = event.userProperties
         ? Object.keys(event.userProperties).length
         : 0;
+    const catKey = (0, helpers_1.getEventCategory)(event.name);
+    const tagColors = (0, helpers_1.getCategoryColors)(catKey);
     // Flash animation for newly logged events
     const flashOpacity = (0, react_1.useRef)(new react_native_1.Animated.Value(isNew ? 1 : 0)).current;
     (0, react_1.useEffect)(() => {
@@ -65,20 +67,29 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
         }
     }, [isNew]);
     const showGap = msSincePrev != null && msSincePrev >= 2000;
+    const categoryLabel = catKey === 'page_view'
+        ? t('analytics.pageViewCategory')
+        : catKey === 'ecommerce'
+            ? t('analytics.ecommerceCategory')
+            : catKey === 'system'
+                ? t('analytics.systemCategory')
+                : t('analytics.customCategory');
     return (<react_native_1.View style={cardStyles.container}>
       {/* ── Gap Indicator ─────────────────────────────────────────────────── */}
       {showGap && (<react_native_1.View style={cardStyles.gapContainer}>
+          <react_native_1.View style={cardStyles.gapLine}/>
           <react_native_1.Text style={[cardStyles.gapText, { color: AppColors_1.AppColors.grayTextWeak }]}>
-            {(0, helpers_1.formatGap)(msSincePrev)}
+            +{(0, helpers_1.formatGap)(msSincePrev)}
           </react_native_1.Text>
+          <react_native_1.View style={cardStyles.gapLine}/>
         </react_native_1.View>)}
 
       {/* ── Main Card ─────────────────────────────────────────────────────── */}
       <TouchableScale_1.default onPress={onPress} style={[
             cardStyles.modernCard,
             {
-                backgroundColor: AppColors_1.AppColors.primaryLight,
-                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                borderLeftWidth: 3.5,
+                borderLeftColor: tagColors.text,
             },
         ]}>
         <react_native_1.Animated.View style={[
@@ -92,37 +103,32 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
             },
         ]}/>
 
-        {/* Top Row: Event Name & Timestamp */}
+        {/* Top Row: Icon Badge, Event Name, Category Badge & Timestamp */}
         <react_native_1.View style={cardStyles.cardHeader}>
-          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 7, flex: 1 }}>
+            {/* Category Icon Badge */}
             <react_native_1.View style={[
-            cardStyles.nameBadge,
-            { backgroundColor: `${color}1A`, borderColor: `${color}30` },
+            cardStyles.iconBadge,
+            { backgroundColor: tagColors.bg, borderColor: tagColors.border },
         ]}>
-              <HighlightText_1.default text={event.name} search={searchStr} style={[cardStyles.eventName, { color: color }]} highlightStyle={cardStyles.highlight}/>
+              {catKey === 'ecommerce' ? (<NetworkIcons_1.CartIcon color={tagColors.text} size={12}/>) : catKey === 'page_view' ? (<NetworkIcons_1.GlobeIcon color={tagColors.text} size={12}/>) : catKey === 'system' ? (<NetworkIcons_1.BoltIcon color={tagColors.text} size={12}/>) : (<NetworkIcons_1.SparkleIcon color={tagColors.text} size={12}/>)}
             </react_native_1.View>
 
-            {(() => {
-            const catKey = (0, helpers_1.getEventCategory)(event.name);
-            const tagColors = (0, helpers_1.getCategoryColors)(catKey);
-            const categoryLabel = catKey === 'page_view'
-                ? t('analytics.pageViewCategory')
-                : catKey === 'ecommerce'
-                    ? t('analytics.ecommerceCategory')
-                    : catKey === 'system'
-                        ? t('analytics.systemCategory')
-                        : t('analytics.customCategory');
-            return (<react_native_1.View style={[
-                    cardStyles.categoryBadge,
-                    { backgroundColor: tagColors.bg, borderColor: tagColors.border },
-                ]}>
-                  <react_native_1.Text style={[cardStyles.categoryText, { color: tagColors.text }]}>
-                    {categoryLabel}
-                  </react_native_1.Text>
-                </react_native_1.View>);
-        })()}
+            {/* Event Name */}
+            <HighlightText_1.default text={event.name} search={searchStr} style={[cardStyles.eventName, { color: AppColors_1.AppColors.primaryBlack }]} highlightStyle={cardStyles.highlight} numberOfLines={1}/>
+
+            {/* Category Pill Tag */}
+            <react_native_1.View style={[
+            cardStyles.categoryBadge,
+            { backgroundColor: tagColors.bg, borderColor: tagColors.border },
+        ]}>
+              <react_native_1.Text style={[cardStyles.categoryText, { color: tagColors.text }]}>
+                {categoryLabel}
+              </react_native_1.Text>
+            </react_native_1.View>
 
-            {event.count !== undefined ? (<react_native_1.View style={[
+            {/* Duplicate Multiplier */}
+            {event.count !== undefined && event.count > 0 ? (<react_native_1.View style={[
                 cardStyles.duplicateBadge,
                 event.count === 1 && {
                     backgroundColor: AppColors_1.AppColors.grayBackground,
@@ -134,16 +140,20 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
                 event.count === 1 && { color: AppColors_1.AppColors.grayTextStrong },
             ]}>
                   {event.count}×
-                  {event.count > 1 ? ` ${t('analytics.duplicate')}` : ''}
                 </react_native_1.Text>
               </react_native_1.View>) : null}
           </react_native_1.View>
-          <react_native_1.Text style={[cardStyles.timestamp, { color: AppColors_1.AppColors.grayTextWeak }]}>
-            {(0, helpers_1.formatTime)(event.timestamp)}
-          </react_native_1.Text>
+
+          {/* Timestamp */}
+          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 3 }}>
+            <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.grayTextWeak} size={10}/>
+            <react_native_1.Text style={[cardStyles.timestamp, { color: AppColors_1.AppColors.grayTextWeak }]}>
+              {(0, helpers_1.formatTime)(event.timestamp)}
+            </react_native_1.Text>
+          </react_native_1.View>
         </react_native_1.View>
 
-        {/* Bottom Row: Metadata Chips & Sparkline */}
+        {/* Bottom Row: Metadata Chips (Screen, Params, Value) */}
         <react_native_1.View style={cardStyles.cardBody}>
           <react_native_1.View style={cardStyles.chipsRow}>
             {(() => {
@@ -160,12 +170,12 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
             return (<react_native_1.View style={[
                     cardStyles.chip,
                     {
-                        backgroundColor: AppColors_1.AppColors.grayBackground,
-                        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                        backgroundColor: `${AppColors_1.AppColors.amber500}12`,
+                        borderColor: `${AppColors_1.AppColors.amber500}2E`,
                     },
                 ]}>
-                  <react_native_1.View style={[cardStyles.screenDot, { backgroundColor: color }]}/>
-                  <react_native_1.Text style={[cardStyles.chipText, { color: AppColors_1.AppColors.grayText }]} numberOfLines={1}>
+                  <react_native_1.View style={[cardStyles.screenDot, { backgroundColor: AppColors_1.AppColors.amber500 }]}/>
+                  <react_native_1.Text style={[cardStyles.chipText, { color: AppColors_1.AppColors.amber700, fontFamily: AppFonts_1.AppFonts.interBold }]} numberOfLines={1}>
                     {screenNameStr}
                   </react_native_1.Text>
                 </react_native_1.View>);
@@ -186,11 +196,11 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
             {userPropCount > 0 && (<react_native_1.View style={[
                 cardStyles.chip,
                 {
-                    backgroundColor: AppColors_1.AppColors.grayBackground,
-                    borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                    backgroundColor: `${AppColors_1.AppColors.brandPurple}10`,
+                    borderColor: `${AppColors_1.AppColors.brandPurple}25`,
                 },
             ]}>
-                <react_native_1.Text style={[cardStyles.chipText, { color: AppColors_1.AppColors.grayText }]}>
+                <react_native_1.Text style={[cardStyles.chipText, { color: AppColors_1.AppColors.brandPurple, fontFamily: AppFonts_1.AppFonts.interBold }]}>
                   ★ {userPropCount} {t('analytics.props')}
                 </react_native_1.Text>
               </react_native_1.View>)}
@@ -205,7 +215,7 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
                             borderColor: AppColors_1.AppColors.amberBorder,
                         },
                     ]}>
-                    <NetworkIcons_1.CartIcon color={AppColors_1.AppColors.amber700} size={12}/>
+                    <NetworkIcons_1.CartIcon color={AppColors_1.AppColors.amber700} size={11}/>
                     <react_native_1.Text style={[
                         cardStyles.chipText,
                         {
@@ -227,18 +237,18 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
             const val = event.params?.value ?? event.params?.price;
             const currency = event.params?.currency ?? '';
             const isPrimitive = typeof val === 'string' || typeof val === 'number';
-            if (isPrimitive) {
-                const currencyStr = typeof currency === 'string' || typeof currency === 'number'
-                    ? String(currency)
+            if (val != null && isPrimitive && String(val).trim() !== '') {
+                const currencyStr = typeof currency === 'string' && currency.trim() !== ''
+                    ? currency.toUpperCase()
                     : '';
                 return (<react_native_1.View style={[
                         cardStyles.chip,
                         {
-                            backgroundColor: AppColors_1.AppColors.emeraldBg,
-                            borderColor: AppColors_1.AppColors.emeraldBorder,
+                            backgroundColor: `${AppColors_1.AppColors.emerald500}15`,
+                            borderColor: `${AppColors_1.AppColors.emerald500}35`,
                         },
                     ]}>
-                    <NetworkIcons_1.MoneyIcon color={AppColors_1.AppColors.emerald600} size={12}/>
+                    <NetworkIcons_1.MoneyIcon color={AppColors_1.AppColors.emerald600} size={11}/>
                     <react_native_1.Text style={[
                         cardStyles.chipText,
                         {
@@ -260,52 +270,63 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
 // ─── Styles ───────────────────────────────────────────────────────────────────
 const cardStyles = react_native_1.StyleSheet.create({
     container: {
-        paddingHorizontal: 12,
+        paddingHorizontal: 10,
         paddingVertical: 3,
     },
     gapContainer: {
+        flexDirection: 'row',
         alignItems: 'center',
-        marginVertical: 4,
+        justifyContent: 'center',
+        marginVertical: 6,
+        gap: 8,
+    },
+    gapLine: {
+        flex: 1,
+        height: 1,
+        backgroundColor: `${AppColors_1.AppColors.dividerColor}`,
     },
     gapText: {
-        fontFamily: AppFonts_1.AppFonts.interMedium,
-        fontSize: 10,
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9.5,
         color: AppColors_1.AppColors.grayTextWeak,
         letterSpacing: 0.5,
     },
     modernCard: {
         backgroundColor: AppColors_1.AppColors.white,
-        borderRadius: 8,
+        borderRadius: 10,
         borderWidth: 1,
         borderColor: AppColors_1.AppColors.dividerColor,
-        padding: 8,
+        padding: 10,
         shadowColor: AppColors_1.AppColors.black,
         shadowOpacity: 0.03,
         shadowRadius: 3,
         shadowOffset: { width: 0, height: 1 },
         elevation: 1,
         overflow: 'hidden',
+        gap: 8,
     },
     cardHeader: {
         flexDirection: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',
-        marginBottom: 6,
     },
-    nameBadge: {
-        paddingHorizontal: 6,
-        paddingVertical: 2.5,
+    iconBadge: {
+        width: 22,
+        height: 22,
         borderRadius: 6,
         borderWidth: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
     },
     eventName: {
         fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 12,
-        letterSpacing: 0.2,
+        fontSize: 13,
+        letterSpacing: 0.1,
+        color: AppColors_1.AppColors.primaryBlack,
     },
     timestamp: {
         fontFamily: AppFonts_1.AppFonts.interMedium,
-        fontSize: 11,
+        fontSize: 10,
         color: AppColors_1.AppColors.grayTextWeak,
     },
     highlight: {
@@ -315,25 +336,24 @@ const cardStyles = react_native_1.StyleSheet.create({
     },
     cardBody: {
         flexDirection: 'row',
-        alignItems: 'flex-end',
+        alignItems: 'center',
         justifyContent: 'space-between',
     },
     chipsRow: {
         flexDirection: 'row',
         alignItems: 'center',
         flexWrap: 'wrap',
-        gap: 8,
+        gap: 6,
         flex: 1,
     },
     chip: {
         flexDirection: 'row',
         alignItems: 'center',
-        backgroundColor: AppColors_1.AppColors.grayBackground,
-        paddingHorizontal: 5,
-        paddingVertical: 2,
-        borderRadius: 4,
+        paddingHorizontal: 6,
+        paddingVertical: 2.5,
+        borderRadius: 5,
         borderWidth: 1,
-        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+        gap: 3.5,
     },
     chipText: {
         fontFamily: AppFonts_1.AppFonts.interMedium,
@@ -341,17 +361,16 @@ const cardStyles = react_native_1.StyleSheet.create({
         color: AppColors_1.AppColors.grayText,
     },
     screenDot: {
-        width: 6,
-        height: 6,
-        borderRadius: 3,
-        marginRight: 4,
+        width: 5,
+        height: 5,
+        borderRadius: 2.5,
     },
     duplicateBadge: {
         backgroundColor: AppColors_1.AppColors.roseBg,
         borderColor: AppColors_1.AppColors.roseBorder,
         borderWidth: 1,
         paddingHorizontal: 5,
-        paddingVertical: 2,
+        paddingVertical: 1.5,
         borderRadius: 4,
     },
     duplicateText: {
@@ -359,31 +378,18 @@ const cardStyles = react_native_1.StyleSheet.create({
         fontSize: 9,
         color: AppColors_1.AppColors.rose600,
         textTransform: 'uppercase',
-        letterSpacing: 0.5,
     },
     categoryBadge: {
         borderWidth: 1,
         paddingHorizontal: 5,
-        paddingVertical: 2,
+        paddingVertical: 1.5,
         borderRadius: 4,
     },
     categoryText: {
         fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 9,
+        fontSize: 8.5,
         textTransform: 'uppercase',
-        letterSpacing: 0.5,
-    },
-    miniGraphWrapper: {
-        flexDirection: 'row',
-        alignItems: 'flex-end',
-        height: 18,
-        gap: 2,
-        marginLeft: 12,
-    },
-    miniGraphBar: {
-        width: 4,
-        borderRadius: 2,
-        opacity: 0.7,
+        letterSpacing: 0.4,
     },
 });
 exports.default = AnalyticsEventCard;

package/dist/commonjs/components/ConsoleLogCard.js

@@ -23,36 +23,57 @@ const getLogMessageWithBadges = (message, searchStr, textStyle, highlightStyle,
         const fullPrefix = match[1];
         const remainingText = message.substring(fullPrefix.length);
         const tags = fullPrefix.match(/\[[^\]]+\]/g) || [];
-        const getTagColor = (tag) => {
-            const cleanTag = tag
-                .replace(/[\[\]]/g, '')
-                .trim()
-                .toUpperCase();
-            if (cleanTag === 'API')
-                return AppColors_1.AppColors.sky600;
-            if (cleanTag === 'TEST')
-                return AppColors_1.AppColors.green600;
-            if (cleanTag === 'APP')
-                return AppColors_1.AppColors.indigo600;
-            if (cleanTag === 'WARN')
-                return AppColors_1.AppColors.darkOrange || AppColors_1.AppColors.lightOrange;
-            if (cleanTag === 'ERROR')
-                return AppColors_1.AppColors.errorColor;
-            return AppColors_1.AppColors.slate600;
+        const getTagDecorator = (tag) => {
+            const clean = tag.replace(/[\[\]]/g, '').trim().toUpperCase();
+            if (clean === 'AXIOS') {
+                return { color: '#059669', icon: '⚡', label: 'AXIOS' };
+            }
+            if (clean === 'API' || clean === 'FETCH' || clean === 'HTTP' || clean === 'NETWORK') {
+                return { color: '#0284C7', icon: '🌐', label: clean };
+            }
+            if (clean === 'SAMPLE' || clean === 'BATCH') {
+                return { color: '#4F46E5', icon: '🎲', label: clean };
+            }
+            if (clean === 'REDUX' || clean === 'STORE' || clean === 'STATE') {
+                return { color: '#7C3AED', icon: '⚛️', label: clean };
+            }
+            if (clean === 'ANALYTICS' || clean === 'FIREBASE' || clean === 'GA4' || clean === 'GA') {
+                return { color: '#0D9488', icon: '📊', label: clean };
+            }
+            if (clean === 'AUTH' || clean === 'TOKEN' || clean === 'SESSION') {
+                return { color: '#D97706', icon: '🔑', label: clean };
+            }
+            if (clean === 'APP') {
+                return { color: '#4F46E5', icon: '📱', label: 'APP' };
+            }
+            if (clean === 'TEST') {
+                return { color: '#10B981', icon: '🧪', label: 'TEST' };
+            }
+            if (clean === 'WARN' || clean === 'WARNING') {
+                return { color: '#D97706', icon: '⚠️', label: 'WARN' };
+            }
+            if (clean === 'ERROR' || clean === 'CRASH' || clean === 'BUG') {
+                return { color: '#DC2626', icon: '💥', label: 'ERROR' };
+            }
+            if (clean === 'PERF' || clean === 'RENDER') {
+                return { color: '#8B5CF6', icon: '⚡', label: clean };
+            }
+            return { color: AppColors_1.AppColors.slate600, icon: '🏷️', label: clean };
         };
         return (<react_native_1.View style={{ flexDirection: 'column', gap: 6 }}>
-        <react_native_1.View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 4 }}>
+        <react_native_1.View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 5 }}>
           {tags.map((tag, i) => {
-                const color = getTagColor(tag);
+                const dec = getTagDecorator(tag);
                 return (<react_native_1.View key={i} style={[
                         styles.prefixTag,
                         {
-                            backgroundColor: `${color}15`,
-                            borderColor: `${color}35`,
+                            backgroundColor: `${dec.color}15`,
+                            borderColor: `${dec.color}35`,
                         },
                     ]}>
-                <react_native_1.Text style={[styles.prefixTagText, { color }]}>
-                  {tag.replace(/[\[\]]/g, '')}
+                <react_native_1.Text style={{ fontSize: 9.5 }}>{dec.icon}</react_native_1.Text>
+                <react_native_1.Text style={[styles.prefixTagText, { color: dec.color }]}>
+                  {dec.label}
                 </react_native_1.Text>
               </react_native_1.View>);
             })}
@@ -416,9 +437,12 @@ const styles = react_native_1.StyleSheet.create({
         fontSize: 9,
     },
     prefixTag: {
-        paddingHorizontal: 6,
-        paddingVertical: 1.5,
-        borderRadius: 4,
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 3.5,
+        paddingHorizontal: 6.5,
+        paddingVertical: 2,
+        borderRadius: 5,
         borderWidth: 1,
     },
     prefixTagText: {

package/dist/commonjs/components/Inspector/AnalyticsFilterModal.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface AnalyticsFilterModalProps {
+    visible: boolean;
+    onClose: () => void;
+}
+declare const AnalyticsFilterModal: React.FC<AnalyticsFilterModalProps>;
+export default AnalyticsFilterModal;