react-native-inapp-inspector 1.1.25 → 1.1.26

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

@@ -12,7 +12,7 @@ import { LIB_VERSION } from '../../constants';
 import { getStatusColor, getAppName, getBundleIdentifier, formatTime, getSize } from '../../helpers';
 import { WhiteBackNavigation, TrashIcon, SettingsIcon, CloseWhite, ChevronIcon, ClockIcon, AppleIcon, AndroidIcon, PackageBoxIcon, } from '../NetworkIcons';
 const InspectorHeader = React.memo(() => {
-    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, } = 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, selectedCrash, setSelectedCrash, } = useInspector();
     const envConfig = useMemo(() => {
         const rawEnv = (environment || (__DEV__ ? 'DEV' : 'PROD')).trim();
         const clean = rawEnv.toUpperCase();
@@ -51,7 +51,8 @@ const InspectorHeader = React.memo(() => {
     const isDetailView = (activeTab === 'apis' && selected != null) ||
         (activeTab === 'analytics' && selectedEvent != null) ||
         (activeTab === 'logs' && selectedLog != null) ||
-        (activeTab === 'redux' && (selectedReduxSlice != null || selectedReduxAction != null));
+        (activeTab === 'redux' && (selectedReduxSlice != null || selectedReduxAction != null)) ||
+        (activeTab === 'crash' && selectedCrash != null);
     const isAnySelected = isDetailView;
     const headerTopPadding = Platform.OS === 'ios' && modalHeightPercent >= 95 ? 44 : 0;
     return (<LinearGradient colors={[AppColors.purple, AppColors.brandPurple]} style={styles.headerGradient}>
@@ -62,8 +63,9 @@ const InspectorHeader = React.memo(() => {
             {
                 flexDirection: 'row',
                 alignItems: 'center',
-                gap: 16,
-                flex: !isDetailView ? 5 : 1,
+                gap: 12,
+                flex: !isDetailView ? 1 : 0,
+                minWidth: 0,
             },
         ]}>
             <TouchableScale onPress={() => {
@@ -73,6 +75,7 @@ const InspectorHeader = React.memo(() => {
                 setSelectedLog(null);
                 setSelectedReduxSlice(null);
                 setSelectedReduxAction(null);
+                setSelectedCrash(null);
             });
         }} hitSlop={15} style={[
             {
@@ -486,18 +489,58 @@ const InspectorHeader = React.memo(() => {
                       {selectedReduxAction.timestamp || 'Dispatched'}
                     </Text>
                   </View>
+                </View>) : activeTab === 'crash' && selectedCrash != null ? (<View style={styles.headerDetailCenter}>
+                  <View style={styles.headerDetailRow}>
+                    <View style={[
+                    styles.headerMethodBadge,
+                    {
+                        backgroundColor: selectedCrash.isFatal
+                            ? '#DC2626'
+                            : '#D97706',
+                    },
+                ]}>
+                      <Text style={styles.headerMethodText}>
+                        {selectedCrash.isFatal ? 'FATAL' : selectedCrash.type.toUpperCase()}
+                      </Text>
+                    </View>
+                    <Text style={styles.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
+                      {selectedCrash.name || selectedCrash.message}
+                    </Text>
+                  </View>
+                  <View style={styles.headerDetailSubRow}>
+                    <View style={[
+                    styles.headerStatusDot,
+                    {
+                        backgroundColor: selectedCrash.isFatal
+                            ? '#DC2626'
+                            : '#F59E0B',
+                    },
+                ]}/>
+                    <Text style={styles.headerSubTitle}>
+                      {selectedCrash.timeStr || new Date(selectedCrash.timestamp).toLocaleTimeString()}
+                    </Text>
+                    {selectedCrash.deviceInfo?.platform && (<>
+                        <Text style={[styles.headerSubTitle, { opacity: 0.6 }]}>•</Text>
+                        <Text style={styles.headerSubTitle}>
+                          {selectedCrash.deviceInfo.platform.toUpperCase()}
+                        </Text>
+                      </>)}
+                  </View>
                 </View>) : null}
             </View>)}
 
           <View style={[
             styles.headerRight,
-            !isAnySelected && {
+            {
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'flex-end',
                 flexShrink: 0,
-                minWidth: 116,
+                gap: 8,
             },
         ]}>
             {!isAnySelected && (<TouchableScale onPress={() => {
-                Alert.alert('Clear Everything', 'This clears all tabs — APIs, Logs, Analytics and Redux timeline. Continue?', [
+                Alert.alert('Clear Everything', 'This clears all tabs — APIs, Logs, Analytics, Redux timeline and Crash history. Continue?', [
                     { text: 'Cancel', style: 'cancel' },
                     {
                         text: 'Clear All',
@@ -505,13 +548,7 @@ const InspectorHeader = React.memo(() => {
                         style: 'destructive',
                     },
                 ]);
-            }} hitSlop={15} style={[
-                styles.closeButtonSquare,
-                {
-                    marginRight: 8,
-                    backgroundColor: `${AppColors.white}26`,
-                },
-            ]}>
+            }} hitSlop={15} style={styles.closeButtonSquare}>
                 <Animated.View style={{
                 transform: [
                     {
@@ -532,15 +569,7 @@ const InspectorHeader = React.memo(() => {
                 </Animated.View>
               </TouchableScale>)}
 
-            {selected == null &&
-            selectedEvent == null &&
-            selectedLog == null && (<TouchableScale onPress={() => setSettingsPage('main')} hitSlop={15} style={[
-                styles.closeButtonSquare,
-                {
-                    marginRight: 8,
-                    backgroundColor: `${AppColors.white}26`,
-                },
-            ]}>
+            {!isAnySelected && (<TouchableScale onPress={() => setSettingsPage('main')} hitSlop={15} style={styles.closeButtonSquare}>
                 <SettingsIcon color={AppColors.white} size={16}/>
               </TouchableScale>)}
 

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

@@ -262,7 +262,8 @@ const LogDetail = React.memo(() => {
             fontSize: 13,
             color: AppColors.primaryBlack,
             lineHeight: 18,
-        }} numberOfLines={1}>
+            flexShrink: 1,
+        }}>
                 {originFrame?.functionName && originFrame.functionName !== '<anonymous>'
             ? `${originFrame.functionName}()`
             : originFrame?.fileName || t('console.consoleLog')}
@@ -277,11 +278,11 @@ const LogDetail = React.memo(() => {
                     paddingVertical: 2,
                 },
             ]}>
-                  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 3 }}>
+                  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 3, flexWrap: 'wrap', flexShrink: 1 }}>
                     <DocIcon color={AppColors.brandPurple} size={10}/>
                     <Text style={[
                 styles.metaChipText,
-                { color: AppColors.brandPurple, fontSize: 10, fontFamily: AppFonts.interBold },
+                { color: AppColors.brandPurple, fontSize: 10, fontFamily: AppFonts.interBold, flexShrink: 1 },
             ]}>
                       {originFrame.fileName}
                       {originFrame.lineNumber ? `:${originFrame.lineNumber}` : ''}

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

@@ -15,12 +15,14 @@ import ReduxTab from './ReduxTab';
 import ReduxDetail from './ReduxDetail';
 import BundleTab from './BundleTab';
 import PerformanceTab from './PerformanceTab';
+import CrashTab from './CrashTab';
+import CrashDetail from './CrashDetail';
 import SettingsPanel from './SettingsPanel';
 import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import NavigationTracker from './NavigationTracker';
 const MainScreen = () => {
-    const { visible, modalAnimationType, closeModal, modalHeightPercent, selected, selectedEvent, selectedLog, selectedReduxSlice, selectedReduxAction, settingsPage, activeTab, isReady, isEnabled, hasNavigationContext, setNavState, } = useInspector();
+    const { visible, modalAnimationType, closeModal, modalHeightPercent, selected, selectedEvent, selectedLog, selectedReduxSlice, selectedReduxAction, selectedCrash, settingsPage, activeTab, isReady, isEnabled, hasNavigationContext, setNavState, } = useInspector();
     // Lazy-mount each tab on first visit and cache it in memory for 0ms instantaneous switching
     const [mountedTabs, setMountedTabs] = useState({
         [activeTab]: true,
@@ -35,7 +37,8 @@ const MainScreen = () => {
     const isDetailActive = (activeTab === 'apis' && selected != null) ||
         (activeTab === 'analytics' && selectedEvent != null) ||
         (activeTab === 'logs' && selectedLog != null) ||
-        (activeTab === 'redux' && (selectedReduxSlice != null || selectedReduxAction != null));
+        (activeTab === 'redux' && (selectedReduxSlice != null || selectedReduxAction != null)) ||
+        (activeTab === 'crash' && selectedCrash != null);
     return (<>
       {(Platform.OS === 'ios' || Platform.OS === 'android') && isEnabled && <FabLauncher />}
       <Modal visible={visible} animationType={modalAnimationType} transparent>
@@ -53,7 +56,7 @@ const MainScreen = () => {
               {/* ─── Horizontal Scrollable Tab Bar inside Content ─── */}
               {!isDetailActive && settingsPage === null ? (<TabBar />) : null}
 
-              {isReady ? (isDetailActive ? (activeTab === 'apis' && selected != null ? (<NetworkDetail />) : activeTab === 'analytics' && selectedEvent != null ? (<AnalyticsDetail event={selectedEvent}/>) : activeTab === 'logs' && selectedLog != null ? (<LogDetail />) : activeTab === 'redux' ? (<ReduxDetail />) : null) : (<>
+              {isReady ? (isDetailActive ? (activeTab === 'apis' && selected != null ? (<NetworkDetail />) : activeTab === 'analytics' && selectedEvent != null ? (<AnalyticsDetail event={selectedEvent}/>) : activeTab === 'logs' && selectedLog != null ? (<LogDetail />) : activeTab === 'redux' ? (<ReduxDetail />) : activeTab === 'crash' && selectedCrash != null ? (<CrashDetail />) : null) : (<>
                     <View style={{
                     flex: 1,
                     display: activeTab === 'apis' ? 'flex' : 'none',
@@ -90,6 +93,12 @@ const MainScreen = () => {
                 }}>
                       {mountedTabs.performance && <PerformanceTab />}
                     </View>
+                    <View style={{
+                    flex: 1,
+                    display: activeTab === 'crash' ? 'flex' : 'none',
+                }}>
+                      {mountedTabs.crash && <CrashTab />}
+                    </View>
                   </>)) : (<View style={styles.empty}>
                   <ActivityIndicator size="large" color={AppColors.purple}/>
                   <Text style={[styles.emptySub, { marginTop: 12 }]}>

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

@@ -12,9 +12,10 @@ import { isPersistentStorageAvailable } from '../../helpers/settingsStore';
 import { clearNetworkLogs } from '../../customHooks/networkLogger';
 import { clearConsoleLogs } from '../../customHooks/consoleLogger';
 import { clearAnalyticsEvents } from '../../customHooks/analyticsLogger';
-import { SignalIcon, TerminalIcon, AnalyticsIcon, SettingsIcon, SunIcon, MoonIcon, ScreenIcon, MotionIcon, LayersIcon, EyeIcon, CheckIcon, TrashIcon, WhiteBackNavigation, PackageIcon, ReduxIcon, PerformanceIcon, } from '../NetworkIcons';
+import { clearCrashRecords, } from '../../customHooks/crashHandler';
+import { SignalIcon, TerminalIcon, AnalyticsIcon, SettingsIcon, SunIcon, MoonIcon, ScreenIcon, MotionIcon, LayersIcon, EyeIcon, CheckIcon, TrashIcon, WhiteBackNavigation, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, ShieldAlertIcon, } from '../NetworkIcons';
 const SettingsPanel = () => {
-    const { settingsPage, setSettingsPage, settingsActiveSubTab, setSettingsActiveSubTab, tabVisibility, toggleTabVisibility, defaultTab, setDefaultTab, isDark, setIsDark, modalHeightPercent, setModalHeightPercent, modalAnimationType, setModalAnimationType, showDuplicateLogs, setShowDuplicateLogs, showConsoleLevels, setShowConsoleLevels, resetToDefaults, storage, logs, consoleLogs, analyticsEvents, reduxState, maxNetworkLogs, setMaxNetworkLogs, maxConsoleLogs, setMaxConsoleLogs, reduxAutoRefresh, setReduxAutoRefreshState, reduxExpandDepth, setReduxExpandDepth, switchActiveTab, setSelected, setSelectedEvent, setReduxState, } = useInspector();
+    const { settingsPage, setSettingsPage, settingsActiveSubTab, setSettingsActiveSubTab, tabVisibility, toggleTabVisibility, defaultTab, setDefaultTab, isDark, setIsDark, modalHeightPercent, setModalHeightPercent, modalAnimationType, setModalAnimationType, showDuplicateLogs, setShowDuplicateLogs, showConsoleLevels, setShowConsoleLevels, resetToDefaults, storage, logs, consoleLogs, analyticsEvents, reduxState, maxNetworkLogs, setMaxNetworkLogs, maxConsoleLogs, setMaxConsoleLogs, reduxAutoRefresh, setReduxAutoRefreshState, reduxExpandDepth, setReduxExpandDepth, switchActiveTab, setSelected, setSelectedEvent, setReduxState, crashRecords, maxCrashLogs, setMaxCrashLogs, } = useInspector();
     const isPersistent = isPersistentStorageAvailable();
     const headerTopPadding = Platform.OS === 'ios' && modalHeightPercent >= 95 ? 44 : 0;
     if (settingsPage === 'main') {
@@ -25,6 +26,7 @@ const SettingsPanel = () => {
             { key: 'redux', label: 'Redux', icon: 'redux' },
             { key: 'bundle', label: 'Bundle', icon: 'bundle' },
             { key: 'performance', label: 'Performance', icon: 'performance' },
+            { key: 'crash', label: 'Crash', icon: 'crash' },
         ];
         return (<View style={{ flex: 1, backgroundColor: AppColors.grayBackground }}>
         {/* Settings Header with back button */}
@@ -235,6 +237,9 @@ const SettingsPanel = () => {
                         {tab.icon === 'performance' && (<PerformanceIcon color={isLocked
                                 ? AppColors.grayTextWeak
                                 : AppColors.purple} size={11}/>)}
+                        {tab.icon === 'crash' && (<CrashIcon color={isLocked
+                                ? AppColors.grayTextWeak
+                                : AppColors.purple} size={11}/>)}
                       </View>
                       {/* Label + Required badge */}
                       <Text style={{
@@ -674,6 +679,7 @@ const SettingsPanel = () => {
                             {tab.icon === 'redux' && (<ReduxIcon color={isActive ? AppColors.white : AppColors.purple} size={11}/>)}
                             {tab.icon === 'bundle' && (<PackageIcon color={isActive ? AppColors.white : AppColors.purple} size={11}/>)}
                             {tab.icon === 'performance' && (<PerformanceIcon color={isActive ? AppColors.white : AppColors.purple} size={11}/>)}
+                            {tab.icon === 'crash' && (<CrashIcon color={isActive ? AppColors.white : AppColors.purple} size={11}/>)}
                           </View>
                           <Text style={{
                             fontFamily: AppFonts.interBold,
@@ -1392,6 +1398,89 @@ const SettingsPanel = () => {
         </View>
       </ScrollView>);
     }
+    else if (settingsPage === 'crash') {
+        title = 'Crash Settings';
+        icon = <CrashIcon color={AppColors.white} size={16}/>;
+        rightInfo = `Total: ${crashRecords?.length || 0}`;
+        content = (<ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16 }}>
+        <View style={{
+                backgroundColor: AppColors.primaryLight,
+                padding: 16,
+                borderRadius: 12,
+                borderWidth: 1,
+                borderColor: AppColors.grayBorderSecondary,
+                gap: 4,
+            }}>
+          {renderSettingRow({
+                icon: <LayersIcon color={AppColors.purple} size={16}/>,
+                label: 'Max Crash Logs',
+                description: 'How many crash records to preserve in history',
+                picker: {
+                    options: [25, 50, 100, 200],
+                    selectedValue: maxCrashLogs || 100,
+                    onSelect: val => setMaxCrashLogs(val),
+                },
+            })}
+          <View style={{ height: 1, backgroundColor: AppColors.dividerColor }}/>
+          {renderSettingRow({
+                icon: <ShieldAlertIcon color={AppColors.greenColor} size={16}/>,
+                label: 'Global Crash Guard',
+                description: 'Intercepts native, JS, and render errors directly',
+                isLast: true,
+                right: (<View style={{
+                        paddingHorizontal: 8,
+                        paddingVertical: 4,
+                        borderRadius: 6,
+                        backgroundColor: `${AppColors.greenColor}1F`,
+                    }}>
+                <Text style={{
+                        fontFamily: AppFonts.interBold,
+                        fontSize: 10,
+                        color: AppColors.greenColor,
+                    }}>
+                  PROTECTED
+                </Text>
+              </View>),
+            })}
+        </View>
+
+        <View style={{
+                backgroundColor: AppColors.primaryLight,
+                borderRadius: 12,
+                borderWidth: 1,
+                borderColor: AppColors.grayBorderSecondary,
+                padding: 16,
+                marginTop: 12,
+            }}>
+          {renderSettingRow({
+                icon: <TrashIcon color={AppColors.errorColor} size={16}/>,
+                label: 'Clear Crash History',
+                description: `${crashRecords?.length || 0} crash logs stored`,
+                isLast: true,
+                onPress: () => {
+                    clearCrashRecords();
+                    Alert.alert('Success', 'Crash logs cleared.');
+                },
+                right: (<View style={{
+                        paddingHorizontal: 10,
+                        paddingVertical: 5,
+                        borderRadius: 7,
+                        backgroundColor: `${AppColors.errorColor}14`,
+                        borderWidth: 1,
+                        borderColor: `${AppColors.errorColor}33`,
+                    }}>
+                <Text style={{
+                        fontFamily: AppFonts.interBold,
+                        fontSize: 11,
+                        color: AppColors.errorColor,
+                    }}>
+                  Clear
+                </Text>
+              </View>),
+            })}
+        </View>
+      </ScrollView>);
+    }
     return (<View style={{ flex: 1, backgroundColor: AppColors.grayBackground }}>
       <LinearGradient colors={[AppColors.purple, AppColors.brandPurple]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.headerGradient}>
         <View style={{ paddingTop: headerTopPadding, width: '100%' }}>

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

@@ -4,9 +4,9 @@ import { useInspector } from './InspectorContext';
 import TouchableScale from '../TouchableScale';
 import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
-import { SignalIcon, TerminalIcon, AnalyticsIcon, PackageIcon, ReduxIcon, PerformanceIcon, } from '../NetworkIcons';
+import { SignalIcon, TerminalIcon, AnalyticsIcon, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, } from '../NetworkIcons';
 const TabBar = React.memo(() => {
-    const { activeTab, switchActiveTab, tabVisibility, logs, consoleLogs, analyticsEvents, lastReadApisCount, lastReadLogsCount, unreadPulseAnim, } = useInspector();
+    const { activeTab, switchActiveTab, tabVisibility, logs, consoleLogs, analyticsEvents, crashRecords, lastReadApisCount, lastReadLogsCount, lastReadCrashesCount, unreadPulseAnim, } = useInspector();
     return (<View style={styles.tabBarContainer}>
       <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ paddingRight: 16 }}>
         {[
@@ -46,18 +46,28 @@ const TabBar = React.memo(() => {
                 count: 0,
                 icon: 'performance',
             },
+            {
+                key: 'crash',
+                label: 'Crash',
+                count: crashRecords?.length || 0,
+                icon: 'crash',
+            },
         ]
             .filter(tab => tabVisibility?.[tab.key])
             .map(tab => {
             const isActive = activeTab === tab.key;
             const iconColor = isActive
                 ? AppColors.white
-                : AppColors.grayText;
+                : tab.key === 'crash' && tab.count > 0
+                    ? AppColors.errorColor
+                    : AppColors.grayText;
             const countLabel = tab.count > 9 ? '9+' : String(tab.count);
             const hasUnreadApis = activeTab !== 'apis' &&
                 logs.length > lastReadApisCount;
             const hasUnreadLogs = activeTab !== 'logs' &&
                 consoleLogs.length > lastReadLogsCount;
+            const hasUnreadCrashes = activeTab !== 'crash' &&
+                (crashRecords?.length || 0) > (lastReadCrashesCount || 0);
             return (<TouchableScale key={tab.key} onPress={() => switchActiveTab(tab.key)} style={[
                     styles.contentTabButton,
                     isActive && styles.contentTabButtonActive,
@@ -73,6 +83,7 @@ const TabBar = React.memo(() => {
                   {tab.icon === 'redux' && (<ReduxIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'bundle' && (<PackageIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'performance' && (<PerformanceIcon color={iconColor} size={14}/>)}
+                  {tab.icon === 'crash' && (<CrashIcon color={iconColor} size={14}/>)}
                   <Text numberOfLines={1} ellipsizeMode="tail" style={[
                     styles.contentTabButtonText,
                     isActive &&
@@ -82,7 +93,8 @@ const TabBar = React.memo(() => {
                     {tab.count > 0 ? `(${countLabel})` : ''}
                   </Text>
                   {((tab.key === 'apis' && hasUnreadApis) ||
-                    (tab.key === 'logs' && hasUnreadLogs)) && (<Animated.View style={{
+                    (tab.key === 'logs' && hasUnreadLogs) ||
+                    (tab.key === 'crash' && hasUnreadCrashes)) && (<Animated.View style={{
                         width: 6,
                         height: 6,
                         borderRadius: 3,

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

@@ -92,3 +92,14 @@ export declare const PinIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const RepeatIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const TargetGoalIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const UserCheckIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const CrashIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const ShieldAlertIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const SkullIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const ChipIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const LayoutIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const StackTraceIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const DiagnosticsIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const TrailIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const RawJsonIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const AppFramesIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const AllFramesIcon: ({ color, size, }: any) => React.JSX.Element;

package/dist/esm/components/NetworkIcons.js

@@ -559,3 +559,86 @@ export const UserCheckIcon = ({ color = AppColors.grayTextWeak, size = 14, }) =>
       <Path d="M16 11l2 2 4-4" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
     </Svg>);
 };
+export const CrashIcon = ({ color = AppColors.errorColor, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      {/* Bug / Crash Hybrid Icon */}
+      <Path d="M12 2v3M4.93 4.93l2.12 2.12M19.07 4.93l-2.12 2.12M9 10h6M8 14h8M9 18h6" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
+      <Path d="M12 8a6 6 0 0 1 6 6v3a6 6 0 0 1-12 0v-3a6 6 0 0 1 6-6z" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+      <Path d="M3 13h3M18 13h3M4 19l2.5-1.5M20 19l-2.5-1.5M4 9l2.5 1.5M20 9l-2.5 1.5" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
+    </Svg>);
+};
+export const ShieldAlertIcon = ({ color = AppColors.errorColor, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+      <Line x1="12" y1="8" x2="12" y2="12" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+      <Circle cx="12" cy="16" r="1" fill={color}/>
+    </Svg>);
+};
+export const SkullIcon = ({ color = AppColors.errorColor, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Circle cx="12" cy="12" r="9" stroke={color} strokeWidth="1.8"/>
+      <Circle cx="9" cy="11" r="1.6" fill={color}/>
+      <Circle cx="15" cy="11" r="1.6" fill={color}/>
+      <Path d="M8 16c1.2 1 3.2 1.2 4 1.2.8 0 2.8-.2 4-1.2" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
+      <Line x1="12" y1="16" x2="12" y2="18" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
+    </Svg>);
+};
+export const ChipIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Rect x="7" y="7" width="10" height="10" rx="2" stroke={color} strokeWidth="1.8"/>
+      <Rect x="10" y="10" width="4" height="4" fill={color}/>
+      <Line x1="9" y1="3" x2="9" y2="7" stroke={color} strokeWidth="1.6" strokeLinecap="round"/>
+      <Line x1="15" y1="3" x2="15" y2="7" stroke={color} strokeWidth="1.6" strokeLinecap="round"/>
+      <Line x1="9" y1="17" x2="9" y2="21" stroke={color} strokeWidth="1.6" strokeLinecap="round"/>
+      <Line x1="15" y1="17" x2="15" y2="21" stroke={color} strokeWidth="1.6" strokeLinecap="round"/>
+      <Line x1="3" y1="9" x2="7" y2="9" stroke={color} strokeWidth="1.6" strokeLinecap="round"/>
+      <Line x1="3" y1="15" x2="7" y2="15" stroke={color} strokeWidth="1.6" strokeLinecap="round"/>
+      <Line x1="17" y1="9" x2="21" y2="9" stroke={color} strokeWidth="1.6" strokeLinecap="round"/>
+      <Line x1="17" y1="15" x2="21" y2="15" stroke={color} strokeWidth="1.6" strokeLinecap="round"/>
+    </Svg>);
+};
+export const LayoutIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Rect x="3" y="3" width="18" height="18" rx="2" stroke={color} strokeWidth="1.8"/>
+      <Line x1="3" y1="9" x2="21" y2="9" stroke={color} strokeWidth="1.8"/>
+      <Line x1="9" y1="9" x2="9" y2="21" stroke={color} strokeWidth="1.8"/>
+      <Rect x="12" y="12" width="6" height="6" fill={color}/>
+    </Svg>);
+};
+export const StackTraceIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M4 6h16M4 10h11M4 14h16M4 18h9" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+      <Path d="M7.5 12.5 4 14l3.5 1.5" stroke={color} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};
+export const DiagnosticsIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M3 12h3l2-5 3 9 2-6 1.5 2H21" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <Line x1="4" y1="19" x2="20" y2="19" stroke={color} strokeWidth="1.6" strokeLinecap="round"/>
+    </Svg>);
+};
+export const TrailIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Circle cx="5" cy="18" r="2" fill={color}/>
+      <Circle cx="12" cy="12" r="2" fill={color}/>
+      <Circle cx="19" cy="6" r="2" fill={color}/>
+      <Path d="M6.5 16.5 10.5 13.5M13.5 10.5 17.5 7.5" stroke={color} strokeWidth="1.6" strokeLinecap="round"/>
+    </Svg>);
+};
+export const RawJsonIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M8 3c-2 1-3 2.5-3 5 0 2-1 3.5-2 4 1 .5 2 2 2 4 0 2.5 1 4 3 5M16 3c2 1 3 2.5 3 5 0 2 1 3.5 2 4-1 .5-2 2-2 4 0 2.5-1 4-3 5" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};
+export const AppFramesIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M4 6h16M4 10h11M4 14h16M4 18h9" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+      <Path d="M18 12.5l2 2 3-3.5" stroke="#059669" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};
+export const AllFramesIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M4 4h16M4 8h16M4 12h16M4 16h16M4 20h10" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
+      <Rect x="16" y="16" width="4" height="4" rx="1" fill={color}/>
+    </Svg>);
+};

package/dist/esm/components/SegmentedTabs.js

@@ -40,7 +40,8 @@ const SegmentedTabs = React.memo(({ tabs, activeKey, onChange, style }) => (<Vie
                 },
             ]}>
           {tab.icon ? tab.icon(isActive) : null}
-          <Text style={{
+          <Text numberOfLines={1} ellipsizeMode="tail" style={{
+                flexShrink: 1,
                 fontFamily: AppFonts.interBold,
                 fontSize: 10.5,
                 color: isActive

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

@@ -1 +1 @@
-export declare const LIB_VERSION = "1.1.25";
+export declare const LIB_VERSION = "1.1.26";

package/dist/esm/constants/version.js

@@ -1,3 +1,3 @@
 // AUTO-GENERATED FILE — do not edit by hand.
 // Regenerated from package.json on every build by scripts/gen-version.js.
-export const LIB_VERSION = '1.1.25';
+export const LIB_VERSION = '1.1.26';