react-native-inapp-inspector 1.1.32 → 1.1.34

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

@@ -56,7 +56,7 @@ const getOriginBadge = (originType) => {
         case 'saga':
             return {
                 label: 'SAGA',
-                icon: '⚡',
+                renderIcon: (color, size = 9) => <NetworkIcons_1.BoltIcon color={color} size={size}/>,
                 bg: AppColors_1.AppColors.purple100,
                 text: AppColors_1.AppColors.brandPurple,
                 border: AppColors_1.AppColors.purple200,
@@ -64,7 +64,7 @@ const getOriginBadge = (originType) => {
         case 'thunk':
             return {
                 label: 'THUNK',
-                icon: '⚛️',
+                renderIcon: (color, size = 9) => <NetworkIcons_1.AtomIcon color={color} size={size}/>,
                 bg: AppColors_1.AppColors.amber100,
                 text: AppColors_1.AppColors.amber800Warm,
                 border: AppColors_1.AppColors.amber200,
@@ -72,7 +72,7 @@ const getOriginBadge = (originType) => {
         case 'ui':
             return {
                 label: 'UI',
-                icon: '📱',
+                renderIcon: (color, size = 9) => <NetworkIcons_1.ScreenIcon color={color} size={size}/>,
                 bg: AppColors_1.AppColors.sky100,
                 text: AppColors_1.AppColors.sky600,
                 border: AppColors_1.AppColors.sky400,
@@ -80,7 +80,7 @@ const getOriginBadge = (originType) => {
         case 'listener':
             return {
                 label: 'LISTENER',
-                icon: '👂',
+                renderIcon: (color, size = 9) => <NetworkIcons_1.ListenerIcon color={color} size={size}/>,
                 bg: AppColors_1.AppColors.teal100,
                 text: AppColors_1.AppColors.teal700,
                 border: AppColors_1.AppColors.teal400,
@@ -88,54 +88,13 @@ const getOriginBadge = (originType) => {
         default:
             return {
                 label: 'DIRECT',
-                icon: '⚡',
+                renderIcon: (color, size = 9) => <NetworkIcons_1.BoltIcon color={color} size={size}/>,
                 bg: AppColors_1.AppColors.slate100,
                 text: AppColors_1.AppColors.slate700,
                 border: AppColors_1.AppColors.slate200,
             };
     }
 };
-const getKeyChipStyle = (key) => {
-    const k = key.toLowerCase();
-    if (k.includes('load') || k.includes('pend') || k.includes('status')) {
-        return {
-            bg: AppColors_1.AppColors.amber100,
-            border: AppColors_1.AppColors.amber200,
-            text: AppColors_1.AppColors.amber800Warm,
-            dot: AppColors_1.AppColors.darkOrange,
-        };
-    }
-    if (k.includes('err') || k.includes('fail') || k.includes('reject')) {
-        return {
-            bg: AppColors_1.AppColors.red100,
-            border: AppColors_1.AppColors.errorBorder,
-            text: AppColors_1.AppColors.red600,
-            dot: AppColors_1.AppColors.errorColor,
-        };
-    }
-    if (k.includes('user') || k.includes('auth') || k.includes('token') || k.includes('profile')) {
-        return {
-            bg: AppColors_1.AppColors.indigo50,
-            border: AppColors_1.AppColors.indigo400,
-            text: AppColors_1.AppColors.indigo600Alt,
-            dot: AppColors_1.AppColors.indigo500,
-        };
-    }
-    if (k.includes('item') || k.includes('data') || k.includes('list') || k.includes('entit') || k.includes('count')) {
-        return {
-            bg: AppColors_1.AppColors.emeraldBg,
-            border: AppColors_1.AppColors.emeraldBorder,
-            text: AppColors_1.AppColors.emerald700,
-            dot: AppColors_1.AppColors.emerald500,
-        };
-    }
-    return {
-        bg: AppColors_1.AppColors.slate100,
-        border: AppColors_1.AppColors.slate200,
-        text: AppColors_1.AppColors.slate700,
-        dot: AppColors_1.AppColors.slate400,
-    };
-};
 const ReduxTab = react_1.default.memo(() => {
     const { t } = (0, i18n_1.useTranslation)();
     const { reduxState, reduxLastActionMap, reduxSearch, setReduxSearch, setSelectedReduxSlice, } = (0, InspectorContext_1.useInspector)();
@@ -169,17 +128,12 @@ const ReduxTab = react_1.default.memo(() => {
             const isObject = sliceVal && typeof sliceVal === 'object';
             let typeLabel = 'Primitive';
             let keysCount = 0;
-            let topKeys = [];
-            let totalKeysCount = 0;
             if (isArray) {
                 keysCount = sliceVal.length;
                 typeLabel = `Array [${keysCount}]`;
             }
             else if (isObject) {
-                const objKeys = Object.keys(sliceVal);
-                totalKeysCount = objKeys.length;
-                keysCount = totalKeysCount;
-                topKeys = objKeys.slice(0, 4);
+                keysCount = Object.keys(sliceVal).length;
                 typeLabel = `Object {${keysCount}}`;
             }
             else if (typeof sliceVal !== 'undefined') {
@@ -249,8 +203,6 @@ const ReduxTab = react_1.default.memo(() => {
                 keysCount,
                 sizeStr: (0, helpers_1.getSize)(sliceVal),
                 typeLabel,
-                topKeys,
-                totalKeysCount,
                 status,
                 statusMessage,
                 timelineCount,
@@ -265,8 +217,7 @@ const ReduxTab = react_1.default.memo(() => {
         if (reduxSearch.trim().length > 0) {
             const q = reduxSearch.toLowerCase();
             list = list.filter(item => item.name.toLowerCase().includes(q) ||
-                (item.lastAction && item.lastAction.type.toLowerCase().includes(q)) ||
-                item.topKeys.some(k => k.toLowerCase().includes(q)));
+                (item.lastAction && item.lastAction.type.toLowerCase().includes(q)));
         }
         return [...list].sort((a, b) => {
             if (sortMode === 'latest') {
@@ -309,9 +260,11 @@ const ReduxTab = react_1.default.memo(() => {
 
               {/* Status Badge */}
               {item.status === 'loading' ? (<react_native_1.View style={reduxTabStyles.loadingPill}>
-                  <react_native_1.Text style={reduxTabStyles.loadingPillText}>⏳ Loading</react_native_1.Text>
+                  <NetworkIcons_1.LoadingSpinnerIcon color={AppColors_1.AppColors.amber800Warm} size={10}/>
+                  <react_native_1.Text style={reduxTabStyles.loadingPillText}>Loading</react_native_1.Text>
                 </react_native_1.View>) : item.status === 'error' ? (<react_native_1.View style={reduxTabStyles.errorPill}>
-                  <react_native_1.Text style={reduxTabStyles.errorPillText}>⚠️ Error</react_native_1.Text>
+                  <NetworkIcons_1.CircleAlertIcon color={AppColors_1.AppColors.red600} size={10}/>
+                  <react_native_1.Text style={reduxTabStyles.errorPillText}>Error</react_native_1.Text>
                 </react_native_1.View>) : item.status === 'empty' ? (<react_native_1.View style={reduxTabStyles.emptyPill}>
                   <react_native_1.Text style={reduxTabStyles.emptyPillText}>Empty</react_native_1.Text>
                 </react_native_1.View>) : (<react_native_1.View style={reduxTabStyles.livePill}>
@@ -345,41 +298,6 @@ const ReduxTab = react_1.default.memo(() => {
                 </react_native_1.View>)}
             </react_native_1.View>
 
-            {/* Keys Preview Chips (if object has keys) */}
-            {item.topKeys.length > 0 && (<react_native_1.View style={reduxTabStyles.keysContainer}>
-                <react_native_1.Text style={reduxTabStyles.keysHeading}>Keys:</react_native_1.Text>
-                <react_native_1.View style={reduxTabStyles.keysWrap}>
-                  {item.topKeys.map((k, kIdx) => {
-                    const chipStyle = getKeyChipStyle(k);
-                    return (<react_native_1.View key={kIdx} style={[
-                            reduxTabStyles.keyChip,
-                            {
-                                backgroundColor: chipStyle.bg,
-                                borderColor: chipStyle.border,
-                            },
-                        ]}>
-                        <react_native_1.View style={{
-                            width: 5,
-                            height: 5,
-                            borderRadius: 2.5,
-                            backgroundColor: chipStyle.dot,
-                        }}/>
-                        <react_native_1.Text style={[
-                            reduxTabStyles.keyChipText,
-                            { color: chipStyle.text },
-                        ]} numberOfLines={1}>
-                          {k}
-                        </react_native_1.Text>
-                      </react_native_1.View>);
-                })}
-                  {item.totalKeysCount > item.topKeys.length && (<react_native_1.View style={reduxTabStyles.keyMoreChip}>
-                      <react_native_1.Text style={reduxTabStyles.keyMoreChipText}>
-                        +{item.totalKeysCount - item.topKeys.length}
-                      </react_native_1.Text>
-                    </react_native_1.View>)}
-                </react_native_1.View>
-              </react_native_1.View>)}
-
             {/* Bottom row: Last Dispatched Action with Origin & Trigger Line */}
             {item.lastAction && (<react_native_1.View style={reduxTabStyles.lastActionRow}>
                 <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 5, flex: 1, minWidth: 0, flexWrap: 'wrap' }}>
@@ -387,29 +305,30 @@ const ReduxTab = react_1.default.memo(() => {
                   <react_native_1.Text style={reduxTabStyles.lastActionLabel}>{t('redux.last', 'Last')}:</react_native_1.Text>
 
                   {/* Origin Badge */}
-                  {item.lastAction.originType && (<react_native_1.View style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 2.5,
-                        backgroundColor: getOriginBadge(item.lastAction.originType).bg,
-                        paddingHorizontal: 4.5,
-                        paddingVertical: 1.5,
-                        borderRadius: 3.5,
-                        borderWidth: 1,
-                        borderColor: getOriginBadge(item.lastAction.originType).border,
-                    }}>
-                      <react_native_1.Text style={{ fontSize: 8.5 }}>
-                        {getOriginBadge(item.lastAction.originType).icon}
-                      </react_native_1.Text>
-                      <react_native_1.Text style={{
-                        fontFamily: AppFonts_1.AppFonts.interBold,
-                        fontSize: 8,
-                        color: getOriginBadge(item.lastAction.originType).text,
-                        letterSpacing: 0.3,
-                    }}>
-                        {getOriginBadge(item.lastAction.originType).label}
-                      </react_native_1.Text>
-                    </react_native_1.View>)}
+                  {item.lastAction.originType && (() => {
+                    const origin = getOriginBadge(item.lastAction.originType);
+                    return (<react_native_1.View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 2.5,
+                            backgroundColor: origin.bg,
+                            paddingHorizontal: 4.5,
+                            paddingVertical: 1.5,
+                            borderRadius: 3.5,
+                            borderWidth: 1,
+                            borderColor: origin.border,
+                        }}>
+                        {origin.renderIcon(origin.text, 8.5)}
+                        <react_native_1.Text style={{
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                            fontSize: 8,
+                            color: origin.text,
+                            letterSpacing: 0.3,
+                        }}>
+                          {origin.label}
+                        </react_native_1.Text>
+                      </react_native_1.View>);
+                })()}
 
                   <HighlightText_1.default text={item.lastAction.type} search={reduxSearch} style={reduxTabStyles.lastActionValue} highlightStyle={reduxTabStyles.highlight} numberOfLines={1}/>
 
@@ -417,7 +336,7 @@ const ReduxTab = react_1.default.memo(() => {
                   {item.lastAction.callerFile && (<react_native_1.Pressable onPress={() => (0, helpers_1.openInVSCode)(item.lastAction.callerFile, item.lastAction.callerLine, item.lastAction.callerCol)} hitSlop={6} style={{
                         flexDirection: 'row',
                         alignItems: 'center',
-                        gap: 2,
+                        gap: 2.5,
                         backgroundColor: AppColors_1.AppColors.sky100,
                         paddingHorizontal: 4.5,
                         paddingVertical: 1.5,
@@ -425,12 +344,13 @@ const ReduxTab = react_1.default.memo(() => {
                         borderWidth: 0.5,
                         borderColor: AppColors_1.AppColors.sky400,
                     }}>
+                      <NetworkIcons_1.DocIcon color={AppColors_1.AppColors.sky600} size={9}/>
                       <react_native_1.Text style={{
                         fontFamily: AppFonts_1.AppFonts.interMedium,
                         fontSize: 8.5,
                         color: AppColors_1.AppColors.sky600,
                     }}>
-                        📄 {item.lastAction.callerFile.split('/').pop()}:{item.lastAction.callerLine || 1}
+                        {item.lastAction.callerFile.split('/').pop()}:{item.lastAction.callerLine || 1}
                       </react_native_1.Text>
                     </react_native_1.Pressable>)}
 
@@ -469,20 +389,27 @@ const ReduxTab = react_1.default.memo(() => {
         <react_native_1.View style={[reduxTabStyles.statCol, { flex: 1.6 }]}>
           <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
             <react_native_1.Text style={reduxTabStyles.statHeading}>LAST ACTION</react_native_1.Text>
-            {lastGlobalAction?.originType && (<react_native_1.View style={{
-                backgroundColor: getOriginBadge(lastGlobalAction.originType).bg,
-                paddingHorizontal: 4,
-                paddingVertical: 1,
-                borderRadius: 3,
-            }}>
-                <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interBold,
-                fontSize: 7.5,
-                color: getOriginBadge(lastGlobalAction.originType).text,
-            }}>
-                  {getOriginBadge(lastGlobalAction.originType).label}
-                </react_native_1.Text>
-              </react_native_1.View>)}
+            {lastGlobalAction?.originType && (() => {
+            const origin = getOriginBadge(lastGlobalAction.originType);
+            return (<react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 2,
+                    backgroundColor: origin.bg,
+                    paddingHorizontal: 4,
+                    paddingVertical: 1,
+                    borderRadius: 3,
+                }}>
+                  {origin.renderIcon(origin.text, 8)}
+                  <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 7.5,
+                    color: origin.text,
+                }}>
+                    {origin.label}
+                  </react_native_1.Text>
+                </react_native_1.View>);
+        })()}
           </react_native_1.View>
           <react_native_1.Text style={reduxTabStyles.statLastAction} numberOfLines={1}>
             {lastGlobalAction ? lastGlobalAction.type : 'Initial'}
@@ -783,54 +710,6 @@ const reduxTabStyles = react_native_1.StyleSheet.create({
         fontSize: 9.5,
         color: AppColors_1.AppColors.grayTextWeak,
     },
-    keysContainer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        marginTop: 4,
-        marginBottom: 4,
-    },
-    keysHeading: {
-        fontFamily: AppFonts_1.AppFonts.interMedium,
-        fontSize: 10,
-        color: AppColors_1.AppColors.grayTextWeak,
-    },
-    keysWrap: {
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        gap: 4,
-        flex: 1,
-    },
-    keyChip: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-        backgroundColor: AppColors_1.AppColors.slate100,
-        paddingHorizontal: 6,
-        paddingVertical: 2.5,
-        borderRadius: 5,
-        borderWidth: 1,
-        borderColor: AppColors_1.AppColors.slate200,
-        maxWidth: 120,
-    },
-    keyChipText: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 9.5,
-        color: AppColors_1.AppColors.slate700,
-    },
-    keyMoreChip: {
-        backgroundColor: AppColors_1.AppColors.purple100,
-        paddingHorizontal: 5,
-        paddingVertical: 2,
-        borderRadius: 4,
-        borderWidth: 1,
-        borderColor: AppColors_1.AppColors.purple200,
-    },
-    keyMoreChipText: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 9,
-        color: AppColors_1.AppColors.brandPurple,
-    },
     lastActionRow: {
         flexDirection: 'row',
         alignItems: 'center',

package/dist/commonjs/components/NetworkIcons.d.ts

@@ -113,3 +113,5 @@ export declare const TrailIcon: ({ color, size, }: IconProps) => React.JSX.Eleme
 export declare const RawJsonIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const AppFramesIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const AllFramesIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const ListenerIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const LoadingSpinnerIcon: ({ color, size, }: IconProps) => React.JSX.Element;

package/dist/commonjs/components/NetworkIcons.js

@@ -38,7 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InfoCircleIcon = exports.UserIcon = exports.LayersIcon = exports.WipeIcon = exports.FolderIcon = exports.SettingsIcon = exports.EyeIcon = exports.JsIcon = exports.CssIcon = exports.HtmlIcon = exports.BrandSquareIcon = exports.BrandCircleIcon = exports.MoonIcon = exports.SunIcon = exports.DebugIcon = exports.InsightsIcon = exports.AnalyticsIcon = exports.WhiteBackNavigation = exports.CloseWhite = exports.DownloadIcon = exports.FilterIcon = exports.ChevronIcon = exports.SortArrowIcon = exports.GlobeIcon = exports.DiffIcon = exports.SignalIcon = exports.ExportIcon = exports.HeaderPauseIcon = exports.TrashIcon = exports.FailIcon = exports.CircleAlertIcon = exports.CircleXIcon = exports.CircleCheckIcon = exports.CheckIcon = exports.TerminalIcon = exports.FetchIcon = exports.CopyIcon = exports.HeadersIcon = exports.ResponseIcon = exports.RequestIcon = exports.SizeIcon = exports.StatusIcon = exports.CalendarIcon = exports.ClockIcon = exports.ClearIcon = exports.SearchIcon = exports.ExpandCollapseIcon = exports.ScreenIcon = exports.MapPinIcon = exports.EmptyRadarIcon = void 0;
 exports.DiagnosticsIcon = exports.StackTraceIcon = exports.LayoutIcon = exports.ChipIcon = exports.SkullIcon = exports.ShieldAlertIcon = exports.CrashIcon = exports.UserCheckIcon = exports.TargetGoalIcon = exports.RepeatIcon = exports.PinIcon = exports.HourglassIcon = exports.FlameIcon = exports.CodeBracketsIcon = exports.AndroidIcon = exports.AppleIcon = exports.LinkChainIcon = exports.GitHubIcon = exports.PackageBoxIcon = exports.ExternalLinkIcon = exports.MoneyIcon = exports.CartIcon = exports.TextAaIcon = exports.BrainIcon = exports.AtomIcon = exports.MapIcon = exports.SparkleIcon = exports.LightbulbIcon = exports.DocIcon = exports.FolderOpenIcon = exports.BanIcon = exports.BoltIcon = exports.PerformanceIcon = exports.ReduxIcon = exports.MetadataIcon = exports.StorageIcon = exports.RefreshCcwIcon = exports.TimelineIcon = exports.LiveStateIcon = exports.BundleIcon = exports.ForwardChevronIcon = exports.PackageIcon = exports.TableIcon = exports.RawIcon = exports.PrettyIcon = exports.SortIcon = exports.MotionIcon = exports.TrendingUpIcon = exports.ErrorCircleIcon = exports.WarningTriangleIcon = void 0;
-exports.AllFramesIcon = exports.AppFramesIcon = exports.RawJsonIcon = exports.TrailIcon = void 0;
+exports.LoadingSpinnerIcon = exports.ListenerIcon = exports.AllFramesIcon = exports.AppFramesIcon = exports.RawJsonIcon = exports.TrailIcon = void 0;
 const react_1 = __importDefault(require("react"));
 const react_native_svg_1 = __importStar(require("react-native-svg"));
 // Stylesheet
@@ -795,3 +795,16 @@ const AllFramesIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14,
     </react_native_svg_1.default>);
 };
 exports.AllFramesIcon = AllFramesIcon;
+const ListenerIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M3 18v-6a9 9 0 0 1 18 0v6" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+      <react_native_svg_1.Path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3v5zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3v5z" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.ListenerIcon = ListenerIcon;
+const LoadingSpinnerIcon = ({ color = AppColors_1.AppColors.amber800Warm, size = 12, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" stroke={color} strokeWidth="2.2" strokeLinecap="round"/>
+    </react_native_svg_1.default>);
+};
+exports.LoadingSpinnerIcon = LoadingSpinnerIcon;

package/dist/commonjs/constants/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "1.1.32";
+export declare const LIB_VERSION = "1.1.34";

package/dist/commonjs/constants/version.js

@@ -3,4 +3,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LIB_VERSION = void 0;
 // AUTO-GENERATED FILE — do not edit by hand.
 // Regenerated from package.json on every build by scripts/gen-version.js.
-exports.LIB_VERSION = '1.1.32';
+exports.LIB_VERSION = '1.1.34';

package/dist/commonjs/customHooks/bundleAnalyzer.d.ts

@@ -111,8 +111,11 @@ export declare const trackRuntimeDefine: () => void;
  */
 export declare const parseBundleSource: (bundleText: string, totalBytes: number, scriptURL: string, isLive?: boolean) => HostBundleAnalysisResult;
 /**
- * Automatically fetch and analyze the real running bundle for the host app.
- * Supports dynamic port detection (8081, 8082, 8083, etc.) and parallel dev server probing.
+ * Returns an instant baseline bundle analysis synchronously (never blocks UI).
+ */
+export declare const getInitialBundleAnalysis: () => HostBundleAnalysisResult;
+/**
+ * Asynchronously fetch and analyze the running Metro bundle in the background.
  */
 export declare const analyzeHostAppBundle: (forceRefresh?: boolean) => Promise<HostBundleAnalysisResult>;
 export declare const clearCachedBundleAnalysis: () => void;