react-native-inapp-inspector 1.1.17 → 1.1.18

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

@@ -62,6 +62,7 @@ const SettingsPanel = () => {
             { key: 'analytics', label: 'Analytics', icon: 'analytics' },
             { key: 'redux', label: 'Redux', icon: 'redux' },
             { key: 'bundle', label: 'Bundle', icon: 'bundle' },
+            { key: 'performance', label: 'Performance', icon: 'performance' },
         ];
         return (<react_native_1.View style={{ flex: 1, backgroundColor: AppColors_1.AppColors.grayBackground }}>
         {/* Settings Header with back button */}
@@ -269,6 +270,9 @@ const SettingsPanel = () => {
                         {tab.icon === 'bundle' && (<NetworkIcons_1.PackageIcon color={isLocked
                                 ? AppColors_1.AppColors.grayTextWeak
                                 : AppColors_1.AppColors.purple} size={11}/>)}
+                        {tab.icon === 'performance' && (<NetworkIcons_1.PerformanceIcon color={isLocked
+                                ? AppColors_1.AppColors.grayTextWeak
+                                : AppColors_1.AppColors.purple} size={11}/>)}
                       </react_native_1.View>
                       {/* Label + Required badge */}
                       <react_native_1.Text style={{
@@ -707,6 +711,7 @@ const SettingsPanel = () => {
                             {tab.icon === 'analytics' && (<NetworkIcons_1.AnalyticsIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple} size={11}/>)}
                             {tab.icon === 'redux' && (<NetworkIcons_1.ReduxIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple} size={11}/>)}
                             {tab.icon === 'bundle' && (<NetworkIcons_1.PackageIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple} size={11}/>)}
+                            {tab.icon === 'performance' && (<NetworkIcons_1.PerformanceIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple} size={11}/>)}
                           </react_native_1.View>
                           <react_native_1.Text style={{
                             fontFamily: AppFonts_1.AppFonts.interBold,

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

@@ -45,6 +45,12 @@ const TabBar = react_1.default.memo(() => {
                 count: 0,
                 icon: 'bundle',
             },
+            {
+                key: 'performance',
+                label: 'Performance',
+                count: 0,
+                icon: 'performance',
+            },
         ]
             .filter(tab => tabVisibility?.[tab.key])
             .map(tab => {
@@ -71,6 +77,7 @@ const TabBar = react_1.default.memo(() => {
                   {tab.icon === 'analytics' && (<NetworkIcons_1.AnalyticsIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'redux' && (<NetworkIcons_1.ReduxIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'bundle' && (<NetworkIcons_1.PackageIcon color={iconColor} size={14}/>)}
+                  {tab.icon === 'performance' && (<NetworkIcons_1.PerformanceIcon color={iconColor} size={14}/>)}
                   <react_native_1.Text numberOfLines={1} ellipsizeMode="tail" style={[
                     styles_1.default.contentTabButtonText,
                     isActive &&

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

@@ -65,3 +65,4 @@ export declare const TimelineIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const StorageIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const MetadataIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const ReduxIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const PerformanceIcon: ({ color, size, }: any) => React.JSX.Element;

package/dist/commonjs/components/NetworkIcons.js

@@ -37,7 +37,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.ReduxIcon = exports.MetadataIcon = exports.StorageIcon = 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.PerformanceIcon = exports.ReduxIcon = exports.MetadataIcon = exports.StorageIcon = 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;
 const react_1 = __importDefault(require("react"));
 const react_native_svg_1 = __importStar(require("react-native-svg"));
 // Stylesheet
@@ -499,3 +499,12 @@ const ReduxIcon = ({ color = AppColors_1.AppColors.purple, size = 14, }) => {
     </react_native_svg_1.default>);
 };
 exports.ReduxIcon = ReduxIcon;
+const PerformanceIcon = ({ color = AppColors_1.AppColors.purple, 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="M12 3v2M5.636 5.636l1.414 1.414M18.364 5.636l-1.414 1.414M3 12h2M19 12h2" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
+      <react_native_svg_1.Path d="M12 19a7 7 0 1 0-7-7c0 1.93.784 3.68 2.05 4.95" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
+      <react_native_svg_1.Path d="M12 12l3.5-3.5" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+      <react_native_svg_1.Circle cx="12" cy="12" r="1.5" fill={color}/>
+    </react_native_svg_1.default>);
+};
+exports.PerformanceIcon = PerformanceIcon;

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

@@ -1 +1 @@
-export declare const LIB_VERSION = "1.1.17";
+export declare const LIB_VERSION = "1.1.18";

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.17';
+exports.LIB_VERSION = '1.1.18';

package/dist/commonjs/index.js

@@ -189,7 +189,8 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
         logs: true,
         analytics: true,
         redux: false,
-        bundle: true,
+        bundle: false,
+        performance: false,
     });
     const [maxNetworkLogs, setMaxNetworkLogs] = (0, react_1.useState)(100);
     const [reduxAutoRefresh, setReduxAutoRefreshState] = (0, react_1.useState)(true);
@@ -208,7 +209,8 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
             logs: true,
             analytics: true,
             redux: false,
-            bundle: true,
+            bundle: false,
+            performance: false,
         });
         setDefaultTab('apis');
         setMaxNetworkLogs(100);
@@ -266,7 +268,8 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
                         logs: true,
                         analytics: true,
                         redux: false,
-                        bundle: true,
+                        bundle: false,
+                        performance: false,
                     },
                     ...(saved.tabVisibility || {}),
                     apis: true,

package/dist/commonjs/types/enums.d.ts

@@ -1,9 +1,9 @@
-export type ActiveTab = 'apis' | 'analytics' | 'logs' | 'redux' | 'bundle';
+export type ActiveTab = 'apis' | 'analytics' | 'logs' | 'redux' | 'bundle' | 'performance';
 export type Method = 'ALL' | 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
 export type StatusFilter = 'ALL' | '2xx' | '3xx' | '4xx' | '5xx' | 'Failed';
 export type SortOrder = 'newest' | 'oldest';
 export type LocalFilter = 'success' | 'failed' | 'loading';
 export type ModalAnimationType = 'slide' | 'fade' | 'none';
-export type SettingsPage = 'main' | 'apis' | 'logs' | 'analytics' | 'redux' | 'bundle' | null;
+export type SettingsPage = 'main' | 'apis' | 'logs' | 'analytics' | 'redux' | 'bundle' | 'performance' | null;
 export type SettingsSubTab = 'module' | 'ui';
 export type LogFilter = 'all' | 'info' | 'warn' | 'error' | 'user-log' | 'analytics';

package/dist/esm/components/Inspector/BundleTab.d.ts

@@ -26,6 +26,11 @@ export interface BundlePackageItem {
     color: string;
     description: string;
     logoUri?: string;
+    latestVersion?: string;
+    isDeprecated?: boolean;
+    deprecationReason?: string;
+    lastActive?: string;
+    npmUrl?: string;
 }
 export interface TreeNode {
     id: string;

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

@@ -1,5 +1,5 @@
 import React, { useState, useMemo, useCallback } from 'react';
-import { Image, Pressable, ScrollView, StyleSheet, Text, TextInput, View, } from 'react-native';
+import { Image, Linking, Pressable, ScrollView, StyleSheet, Text, TextInput, View, } from 'react-native';
 import { useTranslation } from 'react-i18next';
 import TouchableScale from '../TouchableScale';
 import CopyButton from '../CopyButton';
@@ -594,6 +594,7 @@ const BUNDLE_PACKAGES_DATA = [
         id: 'pkg-1',
         name: 'react-native',
         version: '0.85.3',
+        latestVersion: '0.85.3',
         sizeKb: 680,
         percentage: 38.5,
         type: 'direct',
@@ -601,11 +602,15 @@ const BUNDLE_PACKAGES_DATA = [
         color: '#38BDF8',
         description: 'React Native runtime, Fabric UI engine, Native Bridge, and Turbomodules.',
         logoUri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/512px-React-icon.svg.png',
+        lastActive: '3 days ago',
+        npmUrl: 'https://www.npmjs.com/package/react-native',
+        isDeprecated: false,
     },
     {
         id: 'pkg-2',
         name: '@react-navigation/native-stack',
         version: '^7.16.0',
+        latestVersion: '7.16.0',
         sizeKb: 245,
         percentage: 13.9,
         type: 'direct',
@@ -613,11 +618,15 @@ const BUNDLE_PACKAGES_DATA = [
         color: '#818CF8',
         description: 'Native screen router, UIViewController / Fragment animations and transitions.',
         logoUri: 'https://reactnavigation.org/img/spiro.svg',
+        lastActive: '1 week ago',
+        npmUrl: 'https://www.npmjs.com/package/@react-navigation/native-stack',
+        isDeprecated: false,
     },
     {
         id: 'pkg-3',
         name: 'react',
         version: '19.2.3',
+        latestVersion: '19.2.3',
         sizeKb: 185,
         percentage: 10.5,
         type: 'direct',
@@ -625,11 +634,15 @@ const BUNDLE_PACKAGES_DATA = [
         color: '#06B6D4',
         description: 'React core virtual DOM reconciler, hooks engine, and JSX runtime.',
         logoUri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/512px-React-icon.svg.png',
+        lastActive: '5 days ago',
+        npmUrl: 'https://www.npmjs.com/package/react',
+        isDeprecated: false,
     },
     {
         id: 'pkg-4',
         name: 'react-native-svg',
         version: '^15.15.5',
+        latestVersion: '15.16.0',
         sizeKb: 140,
         percentage: 7.9,
         type: 'direct',
@@ -637,11 +650,15 @@ const BUNDLE_PACKAGES_DATA = [
         color: '#F472B6',
         description: 'Scalable Vector Graphics XML parser and native canvas path rasterizer.',
         logoUri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/SVG_logo.svg/512px-SVG_logo.svg.png',
+        lastActive: '2 days ago',
+        npmUrl: 'https://www.npmjs.com/package/react-native-svg',
+        isDeprecated: false,
     },
     {
         id: 'pkg-5',
         name: 'react-native-screens',
         version: '^4.25.2',
+        latestVersion: '4.25.2',
         sizeKb: 110,
         percentage: 6.2,
         type: 'transitive',
@@ -649,11 +666,15 @@ const BUNDLE_PACKAGES_DATA = [
         color: '#A78BFA',
         description: 'Native navigation container primitives for iOS and Android memory management.',
         logoUri: 'https://reactnavigation.org/img/spiro.svg',
+        lastActive: '2 weeks ago',
+        npmUrl: 'https://www.npmjs.com/package/react-native-screens',
+        isDeprecated: false,
     },
     {
         id: 'pkg-6',
         name: 'axios',
         version: '^1.17.0',
+        latestVersion: '1.18.0',
         sizeKb: 88,
         percentage: 5.0,
         type: 'direct',
@@ -661,11 +682,15 @@ const BUNDLE_PACKAGES_DATA = [
         color: '#F59E0B',
         description: 'HTTP client, request/response interceptors, and adapter pipelines.',
         logoUri: 'https://axios-http.com/assets/logo.svg',
+        lastActive: '4 days ago',
+        npmUrl: 'https://www.npmjs.com/package/axios',
+        isDeprecated: false,
     },
     {
         id: 'pkg-7',
         name: 'react-native-linear-gradient',
         version: '^2.8.3',
+        latestVersion: '2.8.3',
         sizeKb: 45,
         percentage: 2.5,
         type: 'direct',
@@ -673,11 +698,16 @@ const BUNDLE_PACKAGES_DATA = [
         color: '#FB7185',
         description: 'Hardware accelerated native gradient drawing shaders.',
         logoUri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/512px-React-icon.svg.png',
+        lastActive: '2 years ago',
+        npmUrl: 'https://www.npmjs.com/package/react-native-linear-gradient',
+        isDeprecated: true,
+        deprecationReason: 'Package maintenance is in transition. Consider expo-linear-gradient or @react-native-community/linear-gradient for Fabric support.',
     },
     {
         id: 'pkg-8',
         name: 'i18next & react-i18next',
         version: '^26.3.6',
+        latestVersion: '26.3.6',
         sizeKb: 62,
         percentage: 3.5,
         type: 'direct',
@@ -685,6 +715,9 @@ const BUNDLE_PACKAGES_DATA = [
         color: '#10B981',
         description: 'Internationalization framework, language interpolator, and locale switcher.',
         logoUri: 'https://raw.githubusercontent.com/i18next/i18next/master/assets/i18next-logo.png',
+        lastActive: '6 days ago',
+        npmUrl: 'https://www.npmjs.com/package/i18next',
+        isDeprecated: false,
     },
 ];
 const CATEGORY_TABS = [
@@ -1316,65 +1349,99 @@ const BundleTab = React.memo(() => {
               Showing {filteredPackages.length} dependencies
             </Text>
 
-            {filteredPackages.map((pkg, index) => (<View key={pkg.id} style={bundleStyles.fileCard}>
-                {/* Header Row: #s.no + Logo + Package Name + Version Pill + Size & Copy */}
-                <View style={bundleStyles.fileCardTop}>
-                  <View style={bundleStyles.sNoBadge}>
-                    <Text style={bundleStyles.sNoText}>#{index + 1}</Text>
-                  </View>
+            {filteredPackages.map((pkg, index) => {
+                const cleanInstalledVersion = pkg.version.replace(/^\^/, '');
+                const hasUpdate = pkg.latestVersion && pkg.latestVersion !== cleanInstalledVersion;
+                return (<View key={pkg.id} style={[bundleStyles.fileCard, pkg.isDeprecated && { borderColor: '#FECDD3', backgroundColor: '#FFFDFD' }]}>
+                  {/* Header Row: #s.no + Logo + Package Name + Version Pill + Update/Deprecated Badges + Size & Copy */}
+                  <View style={bundleStyles.fileCardTop}>
+                    <View style={bundleStyles.sNoBadge}>
+                      <Text style={bundleStyles.sNoText}>#{index + 1}</Text>
+                    </View>
 
-                  <PackageLogoRenderer name={pkg.name} color={pkg.color} size={28}/>
+                    <PackageLogoRenderer name={pkg.name} color={pkg.color} size={28}/>
 
-                  <View style={{ flex: 1, paddingHorizontal: 4 }}>
-                    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
-                      <HighlightText text={pkg.name} search={search} style={bundleStyles.fileName} highlightStyle={bundleStyles.searchHighlight}/>
-                      <View style={bundleStyles.versionPill}>
-                        <Text style={bundleStyles.versionPillText}>
-                          v{pkg.version.replace(/^\^/, '')}
-                        </Text>
+                    <View style={{ flex: 1, paddingHorizontal: 4 }}>
+                      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
+                        <HighlightText text={pkg.name} search={search} style={bundleStyles.fileName} highlightStyle={bundleStyles.searchHighlight}/>
+                        <View style={bundleStyles.versionPill}>
+                          <Text style={bundleStyles.versionPillText}>
+                            v{cleanInstalledVersion}
+                          </Text>
+                        </View>
+
+                        {pkg.isDeprecated ? (<View style={bundleStyles.deprecatedBadge}>
+                            <Text style={bundleStyles.deprecatedBadgeText}>⚠️ DEPRECATED</Text>
+                          </View>) : hasUpdate ? (<View style={bundleStyles.updateBadge}>
+                            <Text style={bundleStyles.updateBadgeText}>⚡ Update: v{pkg.latestVersion}</Text>
+                          </View>) : (<View style={[bundleStyles.updateBadge, { backgroundColor: '#F3F4F6', borderColor: '#E5E7EB' }]}>
+                            <Text style={[bundleStyles.updateBadgeText, { color: '#4B5563' }]}>✨ Up to date</Text>
+                          </View>)}
                       </View>
                     </View>
-                  </View>
 
-                  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-                    <View style={bundleStyles.fileSizeBox}>
-                      <Text style={bundleStyles.fileSizeKb}>{pkg.sizeKb} KB</Text>
-                      <Text style={bundleStyles.filePercent}>{pkg.percentage}%</Text>
+                    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                      <View style={bundleStyles.fileSizeBox}>
+                        <Text style={bundleStyles.fileSizeKb}>{pkg.sizeKb} KB</Text>
+                        <Text style={bundleStyles.filePercent}>{pkg.percentage}%</Text>
+                      </View>
+                      <CopyButton value={() => pkg} label="Package Details JSON"/>
                     </View>
-                    <CopyButton value={() => pkg} label="Package Details JSON"/>
                   </View>
-                </View>
 
-                {/* Subtitle Row: Category Chip + Description */}
-                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, marginTop: 4, marginBottom: 2 }}>
-                  <View style={[bundleStyles.pkgBadge, { backgroundColor: `${pkg.color}1F`, borderColor: `${pkg.color}4D` }]}>
-                    <Text style={[bundleStyles.pkgBadgeText, { color: pkg.color }]}>
-                      {pkg.category.toUpperCase()}
+                  {/* Subtitle Row: Category Chip + Description */}
+                  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, marginTop: 4, marginBottom: 2 }}>
+                    <View style={[bundleStyles.pkgBadge, { backgroundColor: `${pkg.color}1F`, borderColor: `${pkg.color}4D` }]}>
+                      <Text style={[bundleStyles.pkgBadgeText, { color: pkg.color }]}>
+                        {pkg.category.toUpperCase()}
+                      </Text>
+                    </View>
+                    <Text style={[bundleStyles.filePath, { flex: 1, marginTop: 0 }]} numberOfLines={1}>
+                      {pkg.description}
                     </Text>
                   </View>
-                  <Text style={[bundleStyles.filePath, { flex: 1, marginTop: 0 }]} numberOfLines={1}>
-                    {pkg.description}
-                  </Text>
-                </View>
 
-                <View style={bundleStyles.fileProgressTrack}>
-                  <View style={[
-                    bundleStyles.fileProgressBar,
-                    { width: `${pkg.percentage * 2}%`, backgroundColor: pkg.color },
-                ]}/>
-                </View>
+                  {/* Deprecation Warning Banner if deprecated */}
+                  {pkg.isDeprecated && pkg.deprecationReason && (<View style={bundleStyles.deprecationBox}>
+                      <Text style={bundleStyles.deprecationText}>
+                        ⚠️ {pkg.deprecationReason}
+                      </Text>
+                    </View>)}
 
-                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: 2 }}>
-                  <View style={bundleStyles.typeTag}>
-                    <Text style={bundleStyles.typeTagText}>
-                      {pkg.type === 'direct' ? '📦 Direct Dependency' : '🔗 Transitive Peer'}
-                    </Text>
+                  <View style={bundleStyles.fileProgressTrack}>
+                    <View style={[
+                        bundleStyles.fileProgressBar,
+                        { width: `${pkg.percentage * 2}%`, backgroundColor: pkg.isDeprecated ? '#EF4444' : pkg.color },
+                    ]}/>
                   </View>
-                  <Text style={bundleStyles.fileMetaText}>
-                    ~{pkg.sizeKb} KB minified
-                  </Text>
-                </View>
-              </View>))}
+
+                  {/* Footer Row: Type Tag + Last Active + NPM Link Button */}
+                  <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: 3 }}>
+                    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+                      <View style={bundleStyles.typeTag}>
+                        <Text style={bundleStyles.typeTagText}>
+                          {pkg.type === 'direct' ? '📦 Direct' : '🔗 Transitive'}
+                        </Text>
+                      </View>
+                      {pkg.lastActive && (<Text style={bundleStyles.lastActiveText}>
+                          🕒 {pkg.lastActive}
+                        </Text>)}
+                    </View>
+
+                    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+                      <Text style={bundleStyles.fileMetaText}>
+                        ~{pkg.sizeKb} KB minified
+                      </Text>
+                      <TouchableScale onPress={() => {
+                        const url = pkg.npmUrl || `https://www.npmjs.com/package/${pkg.name}`;
+                        Linking.openURL(url).catch(() => { });
+                    }} style={bundleStyles.npmLinkBtn}>
+                        <Text style={bundleStyles.npmLinkText}>npm ↗</Text>
+                      </TouchableScale>
+                    </View>
+                  </View>
+                </View>);
+            })}
           </ScrollView>
 
           {/* Sticky Total Package Size Footer */}
@@ -2100,6 +2167,69 @@ const bundleStyles = StyleSheet.create({
         fontSize: 9.5,
         color: AppColors.grayText,
     },
+    npmLinkBtn: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 3,
+        paddingHorizontal: 7,
+        paddingVertical: 2,
+        borderRadius: 5,
+        backgroundColor: '#CB383714',
+        borderWidth: 1,
+        borderColor: '#CB383733',
+    },
+    npmLinkText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 9.5,
+        color: '#CB3837',
+    },
+    deprecatedBadge: {
+        paddingHorizontal: 6,
+        paddingVertical: 1.5,
+        borderRadius: 4,
+        backgroundColor: '#FEE2E2',
+        borderWidth: 1,
+        borderColor: '#FECACA',
+    },
+    deprecatedBadgeText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 9,
+        color: '#DC2626',
+        letterSpacing: 0.3,
+    },
+    updateBadge: {
+        paddingHorizontal: 6,
+        paddingVertical: 1.5,
+        borderRadius: 4,
+        backgroundColor: '#DCFCE7',
+        borderWidth: 1,
+        borderColor: '#BBF7D0',
+    },
+    updateBadgeText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 9,
+        color: '#047857',
+    },
+    lastActiveText: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 10,
+        color: AppColors.grayTextWeak,
+    },
+    deprecationBox: {
+        backgroundColor: '#FFF1F2',
+        borderRadius: 6,
+        paddingHorizontal: 8,
+        paddingVertical: 5,
+        borderWidth: 1,
+        borderColor: '#FECDD3',
+        marginTop: 3,
+    },
+    deprecationText: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 10.5,
+        color: '#BE123C',
+        lineHeight: 14,
+    },
     unusedBadge: {
         paddingHorizontal: 6,
         paddingVertical: 1.5,

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

@@ -14,6 +14,7 @@ import AnalyticsDetail from '../AnalyticsDetail';
 import ReduxTab from './ReduxTab';
 import ReduxDetail from './ReduxDetail';
 import BundleTab from './BundleTab';
+import PerformanceTab from './PerformanceTab';
 import SettingsPanel from './SettingsPanel';
 import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
@@ -83,6 +84,12 @@ const MainScreen = () => {
                 }}>
                       {mountedTabs.bundle && <BundleTab />}
                     </View>
+                    <View style={{
+                    flex: 1,
+                    display: activeTab === 'performance' ? 'flex' : 'none',
+                }}>
+                      {mountedTabs.performance && <PerformanceTab />}
+                    </View>
                   </>)) : (<View style={styles.empty}>
                   <ActivityIndicator size="large" color={AppColors.purple}/>
                   <Text style={[styles.emptySub, { marginTop: 12 }]}>

package/dist/esm/components/Inspector/PerformanceTab.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export interface PerformanceEvent {
+    id: string;
+    timestamp: number;
+    type: 'fps_drop' | 'slow_render' | 'transition' | 'memory' | 'network' | 'bridge' | 'touch';
+    category: 'render' | 'navigation' | 'memory' | 'io' | 'bridge';
+    fps: number;
+    durationMs: number;
+    label: string;
+    detail: string;
+    source?: string;
+    breakdown?: {
+        jsTimeMs: number;
+        uiTimeMs: number;
+        bridgeLatencyMs?: number;
+    };
+    heapDeltaKb?: number;
+    advice?: string;
+    severity: 'optimal' | 'warning' | 'critical';
+}
+declare const PerformanceTab: React.MemoExoticComponent<() => React.JSX.Element>;
+export default PerformanceTab;