react-native-inapp-inspector 1.1.23 → 1.1.25

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { useTranslation } from '../../i18n';
 import { Image, Linking, Pressable, ScrollView, Text, TextInput, View, } from 'react-native';
-import Svg, { Circle } from 'react-native-svg';
 import { animateNextLayout, useInspector } from './InspectorContext';
 import TouchableScale from '../TouchableScale';
 import SegmentedTabs from '../SegmentedTabs';
@@ -17,7 +16,7 @@ import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import { METHOD_COLORS } from '../../constants';
 import { getStatusColor, getSize, formatDateTime, getFetchCommand, getCurlCommand, } from '../../helpers';
-import { FailIcon, GlobeIcon, StatusIcon, HeadersIcon, RequestIcon, ResponseIcon, DownloadIcon, ClearIcon, SizeIcon, } from '../NetworkIcons';
+import { FailIcon, StatusIcon, HeadersIcon, RequestIcon, ResponseIcon, DownloadIcon, ClearIcon, SizeIcon, ExternalLinkIcon, ClockIcon, } from '../NetworkIcons';
 const NetworkDetail = React.memo(() => {
     const { t } = useTranslation();
     const { selected, detailDisplayUrl, apiDetailActiveTab, setApiDetailActiveTab, detailSearch, setDetailSearch, reqExpanded, setReqExpanded, resExpanded, setResExpanded, showReqDiff, setShowReqDiff, showResDiff, setShowResDiff, prevRequestData, prevResponseData, logRouteMapRef, } = useInspector();
@@ -73,70 +72,122 @@ const NetworkDetail = React.memo(() => {
                   <View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
-                    gap: 8,
+                    gap: 6,
+                    flexWrap: 'wrap',
+                    flex: 1,
                 }}>
+                    {/* Method Chip */}
                     <View style={[
                     styles.methodBadge,
                     {
                         backgroundColor: METHOD_COLORS[selected.method] ?? METHOD_COLORS.ALL,
+                        paddingHorizontal: 8,
+                        paddingVertical: 4,
+                        borderRadius: 7,
                     },
                 ]}>
                       <Text style={[
                     styles.methodBadgeText,
                     {
                         color: AppColors.white,
+                        fontSize: 10.5,
                     },
                 ]}>
                         {selected.method}
                       </Text>
                     </View>
 
+                    {/* Status Pill */}
                     {selected.status != null && (<View style={[
                         styles.chip,
                         {
                             backgroundColor: selected.status === 0
-                                ? `${AppColors.errorColor}15`
-                                : `${getStatusColor(selected.status)}15`,
+                                ? `${AppColors.errorColor}18`
+                                : `${getStatusColor(selected.status)}18`,
                             borderColor: selected.status === 0
                                 ? `${AppColors.errorColor}40`
                                 : `${getStatusColor(selected.status)}40`,
+                            paddingHorizontal: 7,
+                            paddingVertical: 3.5,
+                            borderRadius: 7,
                         },
                     ]}>
-                        {selected.status === 0 ? (<FailIcon size={8} color={AppColors.errorColor}/>) : (<Svg width={6} height={6} viewBox="0 0 10 10" fill="none">
-                            <Circle cx="5" cy="5" r="5" fill={getStatusColor(selected.status)}/>
-                          </Svg>)}
+                        {selected.status === 0 ? (<FailIcon size={8} color={AppColors.errorColor}/>) : (<View style={{
+                            width: 6,
+                            height: 6,
+                            borderRadius: 3,
+                            backgroundColor: getStatusColor(selected.status),
+                        }}/>)}
                         <Text style={[
                         styles.chipText,
                         {
                             color: selected.status === 0
                                 ? AppColors.errorColor
                                 : getStatusColor(selected.status),
+                            fontFamily: AppFonts.interBold,
+                            fontSize: 10.5,
                         },
                     ]}>
                           {selected.status === 0
                         ? 'Failed'
-                        : String(selected.status)}
+                        : `${selected.status} ${selected.status === 200 ? 'OK' : ''}`}
                         </Text>
                       </View>)}
 
+                    {/* Duration Pill */}
                     {selected.duration != null && (<View style={[
                         styles.chip,
                         {
-                            backgroundColor: `${AppColors.purple}14`,
-                            borderColor: `${AppColors.purple}2E`,
+                            backgroundColor: `${AppColors.brandPurple}14`,
+                            borderColor: `${AppColors.brandPurple}30`,
+                            paddingHorizontal: 7,
+                            paddingVertical: 3.5,
+                            borderRadius: 7,
+                            gap: 4,
                         },
                     ]}>
+                        <ClockIcon color={AppColors.brandPurple} size={10}/>
                         <Text style={[
                         styles.chipText,
-                        { color: AppColors.purple },
+                        {
+                            color: AppColors.brandPurple,
+                            fontFamily: AppFonts.interBold,
+                            fontSize: 10.5,
+                        },
                     ]}>
                           {selected.duration}ms
                         </Text>
                       </View>)}
+
+                    {/* Size Pill */}
+                    {selected.response != null && (<View style={[
+                        styles.chip,
+                        {
+                            backgroundColor: `${AppColors.sky600}14`,
+                            borderColor: `${AppColors.sky600}30`,
+                            paddingHorizontal: 7,
+                            paddingVertical: 3.5,
+                            borderRadius: 7,
+                            gap: 4,
+                        },
+                    ]}>
+                        <SizeIcon color={AppColors.sky600} size={10}/>
+                        <Text style={[
+                        styles.chipText,
+                        {
+                            color: AppColors.sky600,
+                            fontFamily: AppFonts.interBold,
+                            fontSize: 10.5,
+                        },
+                    ]}>
+                          {getSize(selected.response)}
+                        </Text>
+                      </View>)}
                   </View>
+
                   <View style={styles.detailInfoRight}>
-                    <TouchableScale style={styles.iconSquareBtn} onPress={() => Linking.openURL(detailDisplayUrl)} hitSlop={12}>
-                      <GlobeIcon color={AppColors.grayTextWeak} size={14}/>
+                    <TouchableScale style={[styles.iconSquareBtn, { backgroundColor: `${AppColors.sky600}15` }]} onPress={() => Linking.openURL(detailDisplayUrl)} hitSlop={12}>
+                      <ExternalLinkIcon color={AppColors.sky600} size={14}/>
                     </TouchableScale>
                     <CopyButton value={getFetchCommand(selected)} label="fetch()" iconType="fetch"/>
                     <CopyButton value={getCurlCommand(selected)} label="cURL" iconType="terminal"/>
@@ -144,67 +195,99 @@ const NetworkDetail = React.memo(() => {
                   </View>
                 </View>
 
+                {/* Full Live URL Analysis Card */}
                 <Pressable style={{
                     backgroundColor: AppColors.grayBackground,
                     borderRadius: 10,
                     borderWidth: 1,
                     borderColor: AppColors.dividerColor,
                     padding: 10,
-                    marginTop: 6,
+                    marginTop: 8,
+                    gap: 6,
                 }} onPress={() => Linking.openURL(detailDisplayUrl)}>
                   <View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
                     justifyContent: 'space-between',
-                    marginBottom: 2,
                 }}>
-                    <Text style={{
-                    fontFamily: AppFonts.interMedium,
-                    fontSize: 10,
-                    color: AppColors.grayTextWeak,
-                    flex: 1,
-                }} numberOfLines={1}>
-                      {schemeStr ? (<>
+                    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                      {schemeStr ? (<View style={{
+                        backgroundColor: schemeStr.startsWith('https')
+                            ? `${AppColors.green600}18`
+                            : `${AppColors.amber500}18`,
+                        paddingHorizontal: 6,
+                        paddingVertical: 2,
+                        borderRadius: 4,
+                    }}>
                           <Text style={{
-                        color: AppColors.slate400,
-                        fontFamily: AppFonts.interRegular,
+                        fontFamily: AppFonts.interBold,
+                        fontSize: 9,
+                        color: schemeStr.startsWith('https')
+                            ? AppColors.green600
+                            : AppColors.amber500,
                     }}>
-                            {schemeStr}
+                            {schemeStr.replace('://', '').toUpperCase()}
                           </Text>
-                          {hostStr}
-                        </>) : (hostStr || 'API Endpoint')}
-                    </Text>
-                    {queryStr ? (<View style={{
+                        </View>) : null}
+
+                      <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 10,
+                    color: AppColors.grayTextWeak,
+                    letterSpacing: 0.4,
+                    textTransform: 'uppercase',
+                }}>
+                        ENDPOINT URL ↗
+                      </Text>
+                    </View>
+
+                    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+                      {queryStr ? (<View style={{
                         backgroundColor: `${AppColors.purple}14`,
-                        paddingHorizontal: 5,
-                        paddingVertical: 1,
+                        paddingHorizontal: 6,
+                        paddingVertical: 2,
                         borderRadius: 4,
                     }}>
-                        <Text style={{
+                          <Text style={{
                         fontFamily: AppFonts.interBold,
                         fontSize: 8.5,
                         color: AppColors.purple,
                     }}>
-                          {t('network.queryParams')}
+                            {t('network.queryParams')}
+                          </Text>
+                        </View>) : null}
+
+                      <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 3,
+                    backgroundColor: `${AppColors.sky600}14`,
+                    paddingHorizontal: 6,
+                    paddingVertical: 2,
+                    borderRadius: 4,
+                }}>
+                        <ExternalLinkIcon color={AppColors.sky600} size={10}/>
+                        <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 9,
+                    color: AppColors.sky600,
+                }}>
+                          Open ↗
                         </Text>
-                      </View>) : null}
+                      </View>
+                    </View>
                   </View>
+
+                  {/* Full Clickable Hyperlink */}
                   <Text selectable={true} style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 12,
-                    color: AppColors.primaryBlack,
-                    marginTop: 2,
-                }} numberOfLines={2}>
-                    {pathStr}
+                    fontFamily: AppFonts.interMedium,
+                    fontSize: 12.5,
+                    color: AppColors.skyBlue,
+                    textDecorationLine: 'underline',
+                    lineHeight: 18,
+                }}>
+                    {detailDisplayUrl}
                   </Text>
-                  {queryStr ? (<Text selectable={true} style={{
-                        fontFamily: AppFonts.interRegular,
-                        fontSize: 10,
-                        color: AppColors.grayTextWeak,
-                        marginTop: 4,
-                    }} numberOfLines={1}>
-                      {queryStr}
-                    </Text>) : null}
                 </Pressable>
               </>);
         })()}

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

@@ -9,6 +9,7 @@ import { AppFonts } from '../../styles/AppFonts';
 import { useTranslation } from '../../i18n';
 import { getRuntimeDiagnostics } from '../../helpers';
 import { SearchIcon, CircleXIcon, PerformanceIcon, BoltIcon, LightbulbIcon, WarningTriangleIcon, MapIcon, AtomIcon, BrainIcon, GlobeIcon, } from '../NetworkIcons';
+import { INITIAL_EVENTS, subscribePerformanceEvents, logPerformanceEvent, clearPerformanceEvents, } from '../../customHooks/performanceTracker';
 const PerformanceTab = React.memo(() => {
     const { t } = useTranslation();
     // ─── Real-Time FPS Tracking ────────────────────────────────────────────────
@@ -34,10 +35,16 @@ const PerformanceTab = React.memo(() => {
     const [fpsHistory, setFpsHistory] = useState([
         60, 59, 60, 60, 58, 60, 59, 60, 60, 60, 57, 60, 59, 60, 60, 58, 60, 60, 59, 60,
     ]);
-    // Performance Log Events
-    const [events, setEvents] = useState([]);
+    // Performance Log Events (Initialized with benchmark & diagnostics events)
+    const [events, setEvents] = useState(INITIAL_EVENTS);
     const [filterCategory, setFilterCategory] = useState('ALL');
     const [search, setSearch] = useState('');
+    useEffect(() => {
+        const unsub = subscribePerformanceEvents(liveEvents => {
+            setEvents(liveEvents);
+        });
+        return unsub;
+    }, []);
     // ─── Live Frame Measurement Loop (1-Second Batch Interval) ────────────────
     const lastFrameTimeRef = useRef(Date.now());
     const rafIdRef = useRef(null);
@@ -81,9 +88,7 @@ const PerformanceTab = React.memo(() => {
                 // Trigger log if noticeable frame drop
                 if (measuredFps < 50) {
                     const durationStr = (1000 / measuredFps).toFixed(1);
-                    const newEvent = {
-                        id: `drop-${Date.now()}`,
-                        timestamp: Date.now(),
+                    logPerformanceEvent({
                         type: 'fps_drop',
                         category: 'render',
                         fps: measuredFps,
@@ -97,8 +102,7 @@ const PerformanceTab = React.memo(() => {
                         },
                         advice: t('performance.liveFpsDipAdvice'),
                         severity: measuredFps < 30 ? 'critical' : 'warning',
-                    };
-                    setEvents(prev => [newEvent, ...prev.slice(0, 49)]);
+                    });
                 }
                 frameCount = 0;
                 maxLagInSecond = 0;
@@ -208,7 +212,7 @@ const PerformanceTab = React.memo(() => {
         };
     }, [avgFps, jsLagMs]);
     const clearEvents = () => {
-        setEvents([]);
+        clearPerformanceEvents();
     };
     return (<View style={perfStyles.container}>
       {/* Search & Live Control Header */}
@@ -253,9 +257,9 @@ const PerformanceTab = React.memo(() => {
         </View>
       </View>
 
-      {/* Filter Tabs */}
+      {/* ─── Frozen Interactive Filter Tabs Under Search Component ─── */}
       <View style={perfStyles.filterRow}>
-        <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ gap: 6, paddingHorizontal: 12, paddingVertical: 4 }}>
+        <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={perfStyles.filterScrollContent}>
           {[
             { key: 'ALL', label: t('performance.allLogs'), Icon: BoltIcon, count: events.length },
             {
@@ -652,6 +656,12 @@ const perfStyles = StyleSheet.create({
         backgroundColor: AppColors.white,
         borderBottomWidth: 1,
         borderBottomColor: AppColors.dividerColor,
+        paddingVertical: 5,
+    },
+    filterScrollContent: {
+        gap: 6,
+        paddingHorizontal: 12,
+        paddingVertical: 2,
     },
     filterPill: {
         flexDirection: 'row',

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

@@ -62,6 +62,7 @@ export declare const ForwardChevronIcon: ({ color, size, }: any) => React.JSX.El
 export declare const BundleIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const LiveStateIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const TimelineIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const RefreshCcwIcon: ({ 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;
@@ -78,3 +79,16 @@ export declare const BrainIcon: ({ color, size }: any) => React.JSX.Element;
 export declare const TextAaIcon: ({ color, size }: any) => React.JSX.Element;
 export declare const CartIcon: ({ color, size }: any) => React.JSX.Element;
 export declare const MoneyIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const ExternalLinkIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const PackageBoxIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const GitHubIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const LinkChainIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const AppleIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const AndroidIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const CodeBracketsIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const FlameIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const HourglassIcon: ({ color, size, }: any) => React.JSX.Element;
+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;

package/dist/esm/components/NetworkIcons.js

@@ -373,6 +373,11 @@ export const TimelineIcon = ({ color = AppColors.purple, size = 14, }) => {
       <Path d="M12 7.5v4.5l3 2" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
     </Svg>);
 };
+export const RefreshCcwIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M3 12a9 9 0 0 1 15-6.7L21 8M21 3v5h-5M21 12a9 9 0 0 1-15 6.7L3 16M3 21v-5h5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};
 export const StorageIcon = ({ color = AppColors.purple, size = 14, }) => {
     return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
       <Ellipse cx="12" cy="6" rx="8" ry="2.8" stroke={color} strokeWidth="1.8"/>
@@ -481,3 +486,76 @@ export const MoneyIcon = ({ color = AppColors.emerald500, size = 14 }) => {
       <Path d="M12 7v10M14.5 9.5c-.6-1-1.5-1.5-2.5-1.5-1.5 0-2.5.9-2.5 2s1 1.8 2.5 2 2.5.8 2.5 2-1 2-2.5 2c-1 0-1.9-.5-2.5-1.5" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
     </Svg>);
 };
+export const ExternalLinkIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <Path d="M15 3h6v6M10 14L21 3" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};
+export const PackageBoxIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+      <Path d="M3.27 6.96L12 12.01l8.73-5.05M12 22.08V12" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};
+export const GitHubIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};
+export const LinkChainIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <Path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};
+export const AppleIcon = ({ color = AppColors.white, size = 12, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill={color}>
+      <Path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M15.97 6.37c.61-.75 1.04-1.8 0.92-2.87-.9.04-1.99.6-2.63 1.35-.56.65-1.06 1.71-.93 2.74 1.01.08 2.03-.47 2.64-1.22z"/>
+    </Svg>);
+};
+export const AndroidIcon = ({ color = AppColors.white, size = 12, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill={color}>
+      <Path d="M6 18c0 .55.45 1 1 1h1v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h2v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h1c.55 0 1-.45 1-1V8H6v10zM3.5 8C2.67 8 2 8.67 2 9.5v6c0 .83.67 1.5 1.5 1.5S5 16.33 5 15.5v-6C5 8.67 4.33 8 3.5 8zm17 0c-.83 0-1.5.67-1.5 1.5v6c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-6c0-.83-.67-1.5-1.5-1.5zm-4.97-4.84l1.3-1.3c.2-.2.2-.51 0-.71-.2-.2-.51-.2-.71 0l-1.48 1.48C13.85 2.23 12.95 2 12 2c-.96 0-1.86.23-2.66.63L7.85 1.15c-.2-.2-.51-.2-.71 0-.2.2-.2.51 0 .71l1.31 1.31C6.73 4.26 5.54 6 5.16 8h13.68c-.38-2-1.57-3.74-3.31-4.84zM9 6c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm6 0c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"/>
+    </Svg>);
+};
+export const CodeBracketsIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M16 18l6-6-6-6M8 6l-6 6 6 6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};
+export const FlameIcon = ({ color = AppColors.darkOrange, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 3z" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};
+export const HourglassIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M5 22h14M5 2h14M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};
+export const PinIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M12 21s-6-5.333-6-10a6 6 0 0 1 12 0c0 4.667-6 10-6 10z" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+      <Circle cx="12" cy="11" r="2" fill={color}/>
+    </Svg>);
+};
+export const RepeatIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M17 2l4 4-4 4M3 11v-1a4 4 0 0 1 4-4h14M7 22l-4-4 4-4M21 13v1a4 4 0 0 1-4 4H3" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};
+export const TargetGoalIcon = ({ color = AppColors.brandPurple, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Circle cx="12" cy="12" r="10" stroke={color} strokeWidth="1.8"/>
+      <Circle cx="12" cy="12" r="6" stroke={color} strokeWidth="1.8"/>
+      <Circle cx="12" cy="12" r="2" fill={color}/>
+    </Svg>);
+};
+export const UserCheckIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+      <Circle cx="9" cy="7" r="4" stroke={color} strokeWidth="1.8"/>
+      <Path d="M16 11l2 2 4-4" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};

package/dist/esm/components/SegmentedTabs.js

@@ -5,39 +5,48 @@ import { AppFonts } from '../styles/AppFonts';
 const SegmentedTabs = React.memo(({ tabs, activeKey, onChange, style }) => (<View style={[
         {
             flexDirection: 'row',
-            borderRadius: 8,
-            overflow: 'hidden',
+            borderRadius: 10,
+            backgroundColor: `${AppColors.slate200}80`,
+            padding: 3,
             borderWidth: 1,
             borderColor: AppColors.dividerColor,
-            backgroundColor: AppColors.primaryLight,
+            gap: 3,
         },
         style,
     ]}>
-    {tabs.map((tab, index) => {
+    {tabs.map((tab) => {
         const isActive = activeKey === tab.key;
-        return (<Pressable key={tab.key} onPress={() => onChange(tab.key)} style={{
-                flex: 1,
-                paddingVertical: 8,
-                paddingHorizontal: 8,
-                backgroundColor: isActive
-                    ? AppColors.brandPurple
-                    : AppColors.primaryLight,
-                borderRightWidth: index < tabs.length - 1 ? 1 : 0,
-                borderRightColor: AppColors.dividerColor,
-                alignItems: 'center',
-                justifyContent: 'center',
-                gap: 4,
-                flexDirection: 'row',
-            }}>
+        return (<Pressable key={tab.key} onPress={() => onChange(tab.key)} style={({ pressed }) => [
+                {
+                    flex: 1,
+                    paddingVertical: 7,
+                    paddingHorizontal: 6,
+                    borderRadius: 7,
+                    backgroundColor: isActive
+                        ? AppColors.brandPurple
+                        : 'transparent',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    gap: 4.5,
+                    flexDirection: 'row',
+                    opacity: pressed ? 0.8 : 1,
+                },
+                isActive && {
+                    shadowColor: AppColors.brandPurple,
+                    shadowOffset: { width: 0, height: 1 },
+                    shadowOpacity: 0.25,
+                    shadowRadius: 3,
+                    elevation: 2,
+                },
+            ]}>
           {tab.icon ? tab.icon(isActive) : null}
           <Text style={{
                 fontFamily: AppFonts.interBold,
-                fontSize: 10,
+                fontSize: 10.5,
                 color: isActive
                     ? AppColors.white
-                    : AppColors.grayTextWeak,
-                textTransform: 'capitalize',
-                letterSpacing: 0.3,
+                    : AppColors.grayText,
+                letterSpacing: 0.2,
             }}>
             {tab.label}
           </Text>

package/dist/esm/components/TreeNode.js

@@ -12,6 +12,19 @@ const TreeNode = React.memo(function TreeNode({ data, name, level = 0, search, f
     const open = localOpen;
     const isObject = typeof data === 'object' && data !== null;
     const isArray = Array.isArray(data);
+    // Declare all hooks at the top unconditionally (prevents "Rendered fewer hooks than expected" error)
+    const treeChevronAnim = useRef(new Animated.Value(open ? 1 : 0)).current;
+    useEffect(() => {
+        Animated.timing(treeChevronAnim, {
+            toValue: open ? 1 : 0,
+            duration: 160,
+            useNativeDriver: true,
+        }).start();
+    }, [open]);
+    const treeChevronRotate = treeChevronAnim.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['0deg', '180deg'],
+    });
     function renderHighlighted(text) {
         if (text === 'null' || text === 'undefined') {
             return [
@@ -68,18 +81,6 @@ const TreeNode = React.memo(function TreeNode({ data, name, level = 0, search, f
         ? data.map((v, i) => [i, v])
         : Object.entries(data);
     const countLabel = isArray ? `[${entries.length}]` : `{${entries.length}}`;
-    const treeChevronAnim = useRef(new Animated.Value(open ? 1 : 0)).current;
-    useEffect(() => {
-        Animated.timing(treeChevronAnim, {
-            toValue: open ? 1 : 0,
-            duration: 160,
-            useNativeDriver: true,
-        }).start();
-    }, [open]);
-    const treeChevronRotate = treeChevronAnim.interpolate({
-        inputRange: [0, 1],
-        outputRange: ['0deg', '180deg'],
-    });
     return (<View style={indentStyle}>
       <Pressable style={styles.treeRow} onPress={() => setLocalOpen(v => !v)} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
         <Animated.View style={{ transform: [{ rotate: treeChevronRotate }], marginRight: 6 }}>

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

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

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.23';
+export const LIB_VERSION = '1.1.25';

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

@@ -104,12 +104,16 @@ export interface HostBundleAnalysisResult {
     };
 }
 export declare const getHostScriptURL: () => string;
+export declare const trackRuntimeModuleExecution: () => void;
+export declare const trackRuntimeDefine: () => void;
 /**
  * Parses raw Metro bundle source code to discover real modules and packages in the host app.
  */
-export declare const parseBundleSource: (bundleText: string, totalBytes: number, scriptURL: string) => HostBundleAnalysisResult;
+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.
  */
-export declare const analyzeHostAppBundle: () => Promise<HostBundleAnalysisResult>;
+export declare const analyzeHostAppBundle: (forceRefresh?: boolean) => Promise<HostBundleAnalysisResult>;
+export declare const clearCachedBundleAnalysis: () => void;
 export declare const getCachedBundleAnalysis: () => HostBundleAnalysisResult | null;