react-native-inapp-inspector 1.1.16 → 1.1.18

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

@@ -1,26 +1,96 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const react_native_linear_gradient_1 = __importDefault(require("react-native-linear-gradient"));
 const InspectorContext_1 = require("./InspectorContext");
 const TouchableScale_1 = __importDefault(require("../TouchableScale"));
-const BrandSquareIcon_1 = __importDefault(require("../BrandSquareIcon"));
+const AppHeaderLogo_1 = __importDefault(require("../AppHeaderLogo"));
 const styles_1 = __importDefault(require("../../styles"));
 const AppColors_1 = require("../../styles/AppColors");
 const AppFonts_1 = require("../../styles/AppFonts");
 const constants_1 = require("../../constants");
 const constants_2 = require("../../constants");
 const helpers_1 = require("../../helpers");
-const helpers_2 = require("../../helpers");
-const helpers_3 = require("../../helpers");
-const helpers_4 = require("../../helpers");
 const NetworkIcons_1 = require("../NetworkIcons");
 const InspectorHeader = react_1.default.memo(() => {
-    const { modalHeightPercent, selected, setSelected, selectedEvent, setSelectedEvent, selectedLog, setSelectedLog, showHeaderInfo, setShowHeaderInfo, updateAvailable, latestNpmVersion, clearAnim, activePulseAnim, unreadPulseAnim, runClearAllWithAnimation, setSettingsPage, closeModal, detailTitle, } = (0, InspectorContext_1.useInspector)();
+    const { modalHeightPercent, appIcon, selected, setSelected, selectedEvent, setSelectedEvent, selectedLog, setSelectedLog, selectedReduxSlice, setSelectedReduxSlice, selectedReduxAction, setSelectedReduxAction, reduxState, reduxLastActionMap, showHeaderInfo, setShowHeaderInfo, updateAvailable, latestNpmVersion, clearAnim, activePulseAnim, unreadPulseAnim, runClearAllWithAnimation, setSettingsPage, closeModal, detailTitle, activeTab, environment, } = (0, InspectorContext_1.useInspector)();
+    const envConfig = (0, react_1.useMemo)(() => {
+        const rawEnv = (environment || (__DEV__ ? 'DEV' : 'PROD')).trim();
+        const clean = rawEnv.toUpperCase();
+        if (clean === 'DEV' || clean.includes('DEV') || clean === 'LOCAL') {
+            return {
+                label: rawEnv,
+                bg: 'rgba(16, 185, 129, 0.25)', // emerald
+                border: 'rgba(110, 231, 183, 0.55)',
+                text: '#A7F3D0',
+            };
+        }
+        if (clean === 'UAT' || clean === 'QA' || clean === 'TEST') {
+            return {
+                label: rawEnv,
+                bg: 'rgba(245, 158, 11, 0.28)', // amber
+                border: 'rgba(252, 211, 77, 0.6)',
+                text: '#FDE68A',
+            };
+        }
+        if (clean === 'PREPROD' || clean === 'STAGE' || clean === 'STAGING') {
+            return {
+                label: rawEnv,
+                bg: 'rgba(139, 92, 246, 0.28)', // purple
+                border: 'rgba(196, 181, 253, 0.6)',
+                text: '#DDD6FE',
+            };
+        }
+        // PROD / Live
+        return {
+            label: rawEnv,
+            bg: 'rgba(244, 63, 94, 0.25)', // rose
+            border: 'rgba(253, 164, 175, 0.55)',
+            text: '#FECDD3',
+        };
+    }, [environment]);
+    const isDetailView = (activeTab === 'apis' && selected != null) ||
+        (activeTab === 'analytics' && selectedEvent != null) ||
+        (activeTab === 'logs' && selectedLog != null) ||
+        (activeTab === 'redux' && (selectedReduxSlice != null || selectedReduxAction != null));
+    const isAnySelected = isDetailView;
     const headerTopPadding = react_native_1.Platform.OS === 'ios' && modalHeightPercent >= 95 ? 44 : 0;
     return (<react_native_linear_gradient_1.default colors={[AppColors_1.AppColors.purple, AppColors_1.AppColors.brandPurple]} style={styles_1.default.headerGradient}>
       <react_native_1.View style={{ paddingTop: headerTopPadding, width: '100%' }}>
@@ -31,11 +101,7 @@ const InspectorHeader = react_1.default.memo(() => {
                 flexDirection: 'row',
                 alignItems: 'center',
                 gap: 16,
-                flex: selected == null &&
-                    selectedEvent == null &&
-                    selectedLog == null
-                    ? 5
-                    : 1,
+                flex: !isDetailView ? 5 : 1,
             },
         ]}>
             <TouchableScale_1.default onPress={() => {
@@ -43,6 +109,8 @@ const InspectorHeader = react_1.default.memo(() => {
                 setSelected(null);
                 setSelectedEvent(null);
                 setSelectedLog(null);
+                setSelectedReduxSlice(null);
+                setSelectedReduxAction(null);
             });
         }} hitSlop={15} style={[
             {
@@ -55,9 +123,7 @@ const InspectorHeader = react_1.default.memo(() => {
                 borderWidth: 1,
                 borderColor: `${AppColors_1.AppColors.white}4D`,
             },
-            selected == null &&
-                selectedEvent == null &&
-                selectedLog == null && { display: 'none' },
+            !isAnySelected && { display: 'none' },
         ]}>
               {/* Soft outer glow to fake a blurred circle */}
               <react_native_1.View style={{
@@ -70,36 +136,32 @@ const InspectorHeader = react_1.default.memo(() => {
               <NetworkIcons_1.WhiteBackNavigation />
             </TouchableScale_1.default>
 
-            {selected == null &&
-            selectedEvent == null &&
-            selectedLog == null ? (<TouchableScale_1.default onPress={() => setShowHeaderInfo(prev => !prev)} style={{
+            {!isAnySelected ? (<TouchableScale_1.default onPress={() => setShowHeaderInfo(prev => !prev)} style={{
                 flexDirection: 'row',
                 alignItems: 'flex-start',
                 gap: 10,
                 flex: 1,
             }}>
-                <react_native_1.View style={{
-                width: 46,
-                height: 46,
-                borderRadius: 12,
-                alignItems: 'center',
-                justifyContent: 'center',
-                backgroundColor: `${AppColors_1.AppColors.white}21`,
-                borderWidth: 1.5,
-                borderColor: `${AppColors_1.AppColors.white}40`,
-                shadowColor: AppColors_1.AppColors.black,
-                shadowOpacity: 0.15,
-                shadowRadius: 4,
-                shadowOffset: { width: 0, height: 2 },
-                flexShrink: 0,
-            }}>
-                  <BrandSquareIcon_1.default size={42}/>
-                </react_native_1.View>
+                <AppHeaderLogo_1.default size={46} customIcon={appIcon}/>
                 <react_native_1.View style={{ gap: 2, flex: 1 }}>
-                  <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                  <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
                     <react_native_1.Text style={[styles_1.default.headerTitle]} numberOfLines={1}>
-                      {(0, helpers_2.getAppName)()}
+                      {(0, helpers_1.getAppName)()}
                     </react_native_1.Text>
+                    <react_native_1.View style={[
+                styles_1.default.envBadge,
+                {
+                    backgroundColor: envConfig.bg,
+                    borderColor: envConfig.border,
+                },
+            ]}>
+                      <react_native_1.Text style={[
+                styles_1.default.envBadgeText,
+                { color: envConfig.text },
+            ]}>
+                        {envConfig.label}
+                      </react_native_1.Text>
+                    </react_native_1.View>
                     {updateAvailable && (<react_native_1.Pressable hitSlop={10} onPress={() => react_native_1.Alert.alert('Update Available', `react-native-inapp-inspector v${latestNpmVersion} is available on NPM (installed: v${constants_2.LIB_VERSION}).`, [
                     { text: 'Later', style: 'cancel' },
                     {
@@ -146,7 +208,7 @@ const InspectorHeader = react_1.default.memo(() => {
                 color: `${AppColors_1.AppColors.white}D9`,
                 letterSpacing: 0.2,
             }} numberOfLines={1}>
-                      {(0, helpers_3.getBundleIdentifier)()}
+                      {(0, helpers_1.getBundleIdentifier)()}
                     </react_native_1.Text>
                     <react_native_1.Animated.View style={{
                 transform: [{ rotate: showHeaderInfo ? '180deg' : '0deg' }],
@@ -238,10 +300,8 @@ const InspectorHeader = react_1.default.memo(() => {
               </TouchableScale_1.default>) : null}
           </react_native_1.View>
 
-          {(selected != null ||
-            selectedEvent != null ||
-            selectedLog != null) && (<react_native_1.View style={styles_1.default.headerCenter}>
-              {selected != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
+          {isDetailView && (<react_native_1.View style={styles_1.default.headerCenter}>
+              {activeTab === 'apis' && selected != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
                   <react_native_1.View style={styles_1.default.headerDetailRow}>
                     <react_native_1.View style={[
                     styles_1.default.headerMethodBadge,
@@ -302,7 +362,7 @@ const InspectorHeader = react_1.default.memo(() => {
                       </react_native_1.Text>
                     </react_native_1.View>
                   </react_native_1.View>
-                </react_native_1.View>) : selectedEvent != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
+                </react_native_1.View>) : activeTab === 'analytics' && selectedEvent != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
                   <react_native_1.View style={styles_1.default.headerDetailRow}>
                     <react_native_1.View style={[
                     styles_1.default.headerMethodBadge,
@@ -340,7 +400,7 @@ const InspectorHeader = react_1.default.memo(() => {
                       {selectedEvent.source}
                     </react_native_1.Text>
                   </react_native_1.View>
-                </react_native_1.View>) : selectedLog != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
+                </react_native_1.View>) : activeTab === 'logs' && selectedLog != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
                   <react_native_1.View style={styles_1.default.headerDetailRow}>
                     <react_native_1.View style={[
                     styles_1.default.headerMethodBadge,
@@ -373,27 +433,100 @@ const InspectorHeader = react_1.default.memo(() => {
                     borderRadius: 20,
                     backgroundColor: `${AppColors_1.AppColors.white}29`,
                 }}>
-                      <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.white} size={11}/>
-                      <react_native_1.Text style={styles_1.default.headerSubTitle}>
-                        {(0, helpers_4.formatTime)(selectedLog.timestamp)}
+                        <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.white} size={11}/>
+                        <react_native_1.Text style={styles_1.default.headerSubTitle}>
+                          {(0, helpers_1.formatTime)(selectedLog.timestamp)}
+                        </react_native_1.Text>
+                    </react_native_1.View>
+                  </react_native_1.View>
+                </react_native_1.View>) : activeTab === 'redux' && selectedReduxSlice != null ? ((() => {
+                const sliceData = reduxState?.[selectedReduxSlice];
+                const keyCount = sliceData && typeof sliceData === 'object'
+                    ? Object.keys(sliceData).length
+                    : typeof sliceData !== 'undefined'
+                        ? 1
+                        : 0;
+                const sliceSize = (0, helpers_1.getSize)(sliceData);
+                const lastAction = reduxLastActionMap[selectedReduxSlice];
+                return (<react_native_1.View style={styles_1.default.headerDetailCenter}>
+                      <react_native_1.View style={styles_1.default.headerDetailRow}>
+                        <react_native_1.View style={[
+                        styles_1.default.headerMethodBadge,
+                        {
+                            backgroundColor: `${AppColors_1.AppColors.purple}4D`,
+                        },
+                    ]}>
+                          <react_native_1.Text style={styles_1.default.headerMethodText}>
+                            SLICE
+                          </react_native_1.Text>
+                        </react_native_1.View>
+                        <react_native_1.Text style={styles_1.default.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
+                          {selectedReduxSlice}
+                        </react_native_1.Text>
+                      </react_native_1.View>
+                      <react_native_1.View style={styles_1.default.headerDetailSubRow}>
+                        <react_native_1.View style={[
+                        styles_1.default.headerStatusDot,
+                        { backgroundColor: AppColors_1.AppColors.liveGreen },
+                    ]}/>
+                        <react_native_1.Text style={styles_1.default.headerSubTitle}>
+                          Live
+                        </react_native_1.Text>
+                        <react_native_1.Text style={[styles_1.default.headerSubTitle, { opacity: 0.6 }]}>•</react_native_1.Text>
+                        <react_native_1.Text style={styles_1.default.headerSubTitle}>
+                          {keyCount} keys
+                        </react_native_1.Text>
+                        <react_native_1.Text style={[styles_1.default.headerSubTitle, { opacity: 0.6 }]}>•</react_native_1.Text>
+                        <react_native_1.Text style={styles_1.default.headerSubTitle}>
+                          {sliceSize}
+                        </react_native_1.Text>
+                        {lastAction?.timestamp && (<>
+                            <react_native_1.Text style={[styles_1.default.headerSubTitle, { opacity: 0.6 }]}>•</react_native_1.Text>
+                            <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 3 }}>
+                              <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.white} size={10}/>
+                              <react_native_1.Text style={styles_1.default.headerSubTitle}>
+                                {lastAction.timestamp}
+                              </react_native_1.Text>
+                            </react_native_1.View>
+                          </>)}
+                      </react_native_1.View>
+                    </react_native_1.View>);
+            })()) : activeTab === 'redux' && selectedReduxAction != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
+                  <react_native_1.View style={styles_1.default.headerDetailRow}>
+                    <react_native_1.View style={[
+                    styles_1.default.headerMethodBadge,
+                    {
+                        backgroundColor: `${AppColors_1.AppColors.brandPurple}4D`,
+                    },
+                ]}>
+                      <react_native_1.Text style={styles_1.default.headerMethodText}>
+                        ACTION
                       </react_native_1.Text>
                     </react_native_1.View>
+                    <react_native_1.Text style={styles_1.default.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
+                      {selectedReduxAction.type}
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                  <react_native_1.View style={styles_1.default.headerDetailSubRow}>
+                    <react_native_1.View style={[
+                    styles_1.default.headerStatusDot,
+                    { backgroundColor: AppColors_1.AppColors.purple },
+                ]}/>
+                    <react_native_1.Text style={styles_1.default.headerSubTitle}>
+                      {selectedReduxAction.timestamp || 'Dispatched'}
+                    </react_native_1.Text>
                   </react_native_1.View>
                 </react_native_1.View>) : null}
             </react_native_1.View>)}
 
           <react_native_1.View style={[
             styles_1.default.headerRight,
-            selected == null &&
-                selectedEvent == null &&
-                selectedLog == null && {
+            !isAnySelected && {
                 flexShrink: 0,
                 minWidth: 116,
             },
         ]}>
-            {selected == null &&
-            selectedEvent == null &&
-            selectedLog == null && (<TouchableScale_1.default onPress={() => {
+            {!isAnySelected && (<TouchableScale_1.default onPress={() => {
                 react_native_1.Alert.alert('Clear Everything', 'This clears all tabs — APIs, Logs, Analytics and Redux timeline. Continue?', [
                     { text: 'Cancel', style: 'cancel' },
                     {

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

@@ -1,9 +1,42 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const InspectorContext_1 = require("./InspectorContext");
 const ErrorBoundary_1 = __importDefault(require("../ErrorBoundary"));
@@ -15,13 +48,32 @@ const NetworkDetail_1 = __importDefault(require("./NetworkDetail"));
 const LogDetail_1 = __importDefault(require("./LogDetail"));
 const ConsoleTab_1 = __importDefault(require("./ConsoleTab"));
 const AnalyticsTab_1 = __importDefault(require("./AnalyticsTab"));
+const AnalyticsDetail_1 = __importDefault(require("../AnalyticsDetail"));
 const ReduxTab_1 = __importDefault(require("./ReduxTab"));
+const ReduxDetail_1 = __importDefault(require("./ReduxDetail"));
+const BundleTab_1 = __importDefault(require("./BundleTab"));
+const PerformanceTab_1 = __importDefault(require("./PerformanceTab"));
 const SettingsPanel_1 = __importDefault(require("./SettingsPanel"));
 const styles_1 = __importDefault(require("../../styles"));
 const AppColors_1 = require("../../styles/AppColors");
 const NavigationTracker_1 = __importDefault(require("./NavigationTracker"));
 const MainScreen = () => {
-    const { visible, modalAnimationType, closeModal, modalHeightPercent, selected, selectedEvent, selectedLog, settingsPage, activeTab, isReady, isEnabled, hasNavigationContext, setNavState, } = (0, InspectorContext_1.useInspector)();
+    const { visible, modalAnimationType, closeModal, modalHeightPercent, selected, selectedEvent, selectedLog, selectedReduxSlice, selectedReduxAction, settingsPage, activeTab, isReady, isEnabled, hasNavigationContext, setNavState, } = (0, InspectorContext_1.useInspector)();
+    // Lazy-mount each tab on first visit and cache it in memory for 0ms instantaneous switching
+    const [mountedTabs, setMountedTabs] = (0, react_1.useState)({
+        [activeTab]: true,
+    });
+    (0, react_1.useEffect)(() => {
+        setMountedTabs(prev => {
+            if (prev[activeTab])
+                return prev;
+            return { ...prev, [activeTab]: true };
+        });
+    }, [activeTab]);
+    const isDetailActive = (activeTab === 'apis' && selected != null) ||
+        (activeTab === 'analytics' && selectedEvent != null) ||
+        (activeTab === 'logs' && selectedLog != null) ||
+        (activeTab === 'redux' && (selectedReduxSlice != null || selectedReduxAction != null));
     return (<>
       {isEnabled && <FabLauncher_1.default />}
       <react_native_1.Modal visible={visible} animationType={modalAnimationType} transparent>
@@ -37,12 +89,46 @@ const MainScreen = () => {
               <InspectorHeader_1.default />
 
               {/* ─── Horizontal Scrollable Tab Bar inside Content ─── */}
-              {selected == null &&
-                selectedEvent == null &&
-                selectedLog == null &&
-                settingsPage === null ? (<TabBar_1.default />) : null}
+              {!isDetailActive && settingsPage === null ? (<TabBar_1.default />) : null}
 
-              {isReady ? (activeTab === 'analytics' ? (<AnalyticsTab_1.default />) : activeTab === 'apis' && selected == null ? (<NetworkTab_1.default />) : activeTab === 'logs' && selectedLog == null ? (<ConsoleTab_1.default />) : activeTab === 'logs' ? (<LogDetail_1.default />) : activeTab === 'redux' ? (<ReduxTab_1.default />) : (<NetworkDetail_1.default />)) : (<react_native_1.View style={styles_1.default.empty}>
+              {isReady ? (isDetailActive ? (activeTab === 'apis' && selected != null ? (<NetworkDetail_1.default />) : activeTab === 'analytics' && selectedEvent != null ? (<AnalyticsDetail_1.default event={selectedEvent}/>) : activeTab === 'logs' && selectedLog != null ? (<LogDetail_1.default />) : activeTab === 'redux' ? (<ReduxDetail_1.default />) : null) : (<>
+                    <react_native_1.View style={{
+                    flex: 1,
+                    display: activeTab === 'apis' ? 'flex' : 'none',
+                }}>
+                      {mountedTabs.apis && <NetworkTab_1.default />}
+                    </react_native_1.View>
+                    <react_native_1.View style={{
+                    flex: 1,
+                    display: activeTab === 'logs' ? 'flex' : 'none',
+                }}>
+                      {mountedTabs.logs && <ConsoleTab_1.default />}
+                    </react_native_1.View>
+                    <react_native_1.View style={{
+                    flex: 1,
+                    display: activeTab === 'analytics' ? 'flex' : 'none',
+                }}>
+                      {mountedTabs.analytics && <AnalyticsTab_1.default />}
+                    </react_native_1.View>
+                    <react_native_1.View style={{
+                    flex: 1,
+                    display: activeTab === 'redux' ? 'flex' : 'none',
+                }}>
+                      {mountedTabs.redux && <ReduxTab_1.default />}
+                    </react_native_1.View>
+                    <react_native_1.View style={{
+                    flex: 1,
+                    display: activeTab === 'bundle' ? 'flex' : 'none',
+                }}>
+                      {mountedTabs.bundle && <BundleTab_1.default />}
+                    </react_native_1.View>
+                    <react_native_1.View style={{
+                    flex: 1,
+                    display: activeTab === 'performance' ? 'flex' : 'none',
+                }}>
+                      {mountedTabs.performance && <PerformanceTab_1.default />}
+                    </react_native_1.View>
+                  </>)) : (<react_native_1.View style={styles_1.default.empty}>
                   <react_native_1.ActivityIndicator size="large" color={AppColors_1.AppColors.purple}/>
                   <react_native_1.Text style={[styles_1.default.emptySub, { marginTop: 12 }]}>
                     Loading logs...

package/dist/commonjs/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;