react-native-inapp-inspector 2.2.9 → 2.3.1

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

@@ -47,6 +47,92 @@ const NetworkIcons_1 = require("../NetworkIcons");
 const storageInspector_1 = require("../../customHooks/storageInspector");
 const helpers_1 = require("../../helpers");
 const toast_1 = require("../../helpers/toast");
+const getTypeBadge = (type) => {
+    switch (type) {
+        case 'json':
+            return { label: 'JSON', color: AppColors_1.AppColors.purple, bg: `${AppColors_1.AppColors.purple}16` };
+        case 'number':
+            return { label: 'NUM', color: AppColors_1.AppColors.warningIconGold, bg: `${AppColors_1.AppColors.warningIconGold}16` };
+        case 'boolean':
+            return { label: 'BOOL', color: AppColors_1.AppColors.emerald500, bg: `${AppColors_1.AppColors.emerald500}16` };
+        case 'null':
+            return { label: 'NULL', color: AppColors_1.AppColors.grayTextWeak, bg: `${AppColors_1.AppColors.grayTextWeak}16` };
+        default:
+            return { label: 'STR', color: AppColors_1.AppColors.blue500, bg: `${AppColors_1.AppColors.blue500}16` };
+    }
+};
+const StorageEntryCard = react_1.default.memo(function StorageEntryCard({ entry, isExpanded, onToggleExpand, onCopy, onEdit, onDelete, badge, }) {
+    const formattedBytes = (0, react_1.useMemo)(() => {
+        return entry.byteSize < 1024
+            ? `${entry.byteSize} B`
+            : `${(entry.byteSize / 1024).toFixed(1)} KB`;
+    }, [entry.byteSize]);
+    // Lazy compute displayed value to avoid layout thrashing on large JSON strings
+    const displayValue = (0, react_1.useMemo)(() => {
+        if (!isExpanded) {
+            if (entry.value.length > 250) {
+                return entry.value.slice(0, 250) + '...';
+            }
+            return entry.value;
+        }
+        if (entry.type === 'json') {
+            try {
+                const parsed = entry.parsedValue ?? JSON.parse(entry.value);
+                return JSON.stringify(parsed, null, 2);
+            }
+            catch {
+                return entry.value;
+            }
+        }
+        return entry.value;
+    }, [isExpanded, entry.value, entry.type, entry.parsedValue]);
+    return (<react_native_1.View style={styles.entryCard}>
+      {/* Entry Header: Key name, Type Badge, Size, Actions */}
+      <react_native_1.View style={styles.entryHeader}>
+        <react_native_1.View style={{ flex: 1, marginRight: 8 }}>
+          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
+            <react_native_1.Text style={styles.entryKey} numberOfLines={1} selectable>
+              {entry.key}
+            </react_native_1.Text>
+            <react_native_1.View style={[
+            styles.typeBadge,
+            { backgroundColor: badge.bg, borderColor: `${badge.color}33` },
+        ]}>
+              <react_native_1.Text style={[styles.typeBadgeText, { color: badge.color }]}>
+                {badge.label}
+              </react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.Text style={styles.sizeText}>{formattedBytes}</react_native_1.Text>
+          </react_native_1.View>
+        </react_native_1.View>
+
+        {/* Actions: Copy, Edit, Delete */}
+        <react_native_1.View style={styles.entryActions}>
+          <TouchableScale_1.default hitSlop={6} onPress={() => onCopy(entry)} style={styles.entryActionBtn}>
+            <NetworkIcons_1.CopyIcon size={12} color={AppColors_1.AppColors.grayText}/>
+          </TouchableScale_1.default>
+
+          <TouchableScale_1.default hitSlop={6} onPress={() => onEdit(entry)} style={styles.entryActionBtn}>
+            <NetworkIcons_1.PencilIcon size={12} color={AppColors_1.AppColors.purple}/>
+          </TouchableScale_1.default>
+
+          <TouchableScale_1.default hitSlop={6} onPress={() => onDelete(entry.key)} style={[styles.entryActionBtn, { backgroundColor: `${AppColors_1.AppColors.errorColor}12` }]}>
+            <NetworkIcons_1.TrashIcon size={12} color={AppColors_1.AppColors.errorColor}/>
+          </TouchableScale_1.default>
+        </react_native_1.View>
+      </react_native_1.View>
+
+      {/* Entry Value Preview / Viewer */}
+      <TouchableScale_1.default onPress={() => onToggleExpand(entry.key)} style={styles.valuePreviewBox}>
+        <react_native_1.Text style={styles.valuePreviewText} numberOfLines={isExpanded ? undefined : 3} selectable={isExpanded}>
+          {displayValue}
+        </react_native_1.Text>
+        {entry.value.length > 80 && (<react_native_1.Text style={styles.expandHint}>
+            {isExpanded ? '▲ Collapse' : '▼ Expand'}
+          </react_native_1.Text>)}
+      </TouchableScale_1.default>
+    </react_native_1.View>);
+});
 exports.StorageTab = react_1.default.memo(() => {
     const { t } = (0, i18n_1.useTranslation)();
     const [activeDriver, setActiveDriver] = (0, react_1.useState)('asyncStorage');
@@ -205,20 +291,11 @@ exports.StorageTab = react_1.default.memo(() => {
             return `${(totalBytes / 1024).toFixed(1)} KB`;
         return `${(totalBytes / (1024 * 1024)).toFixed(2)} MB`;
     }, [totalBytes]);
-    const getTypeBadge = (type) => {
-        switch (type) {
-            case 'json':
-                return { label: 'JSON', color: AppColors_1.AppColors.purple, bg: `${AppColors_1.AppColors.purple}16` };
-            case 'number':
-                return { label: 'NUM', color: AppColors_1.AppColors.warningIconGold, bg: `${AppColors_1.AppColors.warningIconGold}16` };
-            case 'boolean':
-                return { label: 'BOOL', color: AppColors_1.AppColors.emerald500, bg: `${AppColors_1.AppColors.emerald500}16` };
-            case 'null':
-                return { label: 'NULL', color: AppColors_1.AppColors.grayTextWeak, bg: `${AppColors_1.AppColors.grayTextWeak}16` };
-            default:
-                return { label: 'STR', color: AppColors_1.AppColors.blue500, bg: `${AppColors_1.AppColors.blue500}16` };
-        }
-    };
+    const handleCopyEntry = (0, react_1.useCallback)((entry) => {
+        (0, helpers_1.copyToClipboard)(entry.value, entry.key);
+        (0, toast_1.showToast)(`Copied value of "${entry.key}"`);
+    }, []);
+    const renderItem = (0, react_1.useCallback)(({ item }) => (<StorageEntryCard entry={item} isExpanded={Boolean(expandedKeys[item.key])} onToggleExpand={toggleExpand} onCopy={handleCopyEntry} onEdit={handleOpenEdit} onDelete={handleDeleteKey} badge={getTypeBadge(item.type)}/>), [expandedKeys, handleCopyEntry]);
     const isConnected = activeDriver === 'asyncStorage'
         ? (0, storageInspector_1.isAsyncStorageConnected)()
         : (0, storageInspector_1.isMMKVConnected)();
@@ -284,9 +361,25 @@ exports.StorageTab = react_1.default.memo(() => {
         <react_native_1.View style={styles.searchBar}>
           <NetworkIcons_1.SearchIcon size={14} color={AppColors_1.AppColors.grayTextWeak}/>
           <react_native_1.TextInput value={search} onChangeText={setSearch} placeholder={`Search ${entries.length} keys & values...`} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} style={styles.searchInput} clearButtonMode="while-editing"/>
-          {search.length > 0 && (<TouchableScale_1.default onPress={() => setSearch('')} hitSlop={8}>
-              <NetworkIcons_1.ClearIcon size={13} color={AppColors_1.AppColors.grayTextWeak}/>
-            </TouchableScale_1.default>)}
+          {search.length > 0 && (<react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+              <react_native_1.View style={{
+                backgroundColor: `${AppColors_1.AppColors.purple}20`,
+                borderRadius: 10,
+                paddingHorizontal: 6,
+                paddingVertical: 1.5,
+            }}>
+                <react_native_1.Text style={{
+                color: AppColors_1.AppColors.purple,
+                fontSize: 9.5,
+                fontFamily: AppFonts_1.AppFonts.interBold,
+            }}>
+                  {filteredEntries.length}
+                </react_native_1.Text>
+              </react_native_1.View>
+              <TouchableScale_1.default onPress={() => setSearch('')} hitSlop={8}>
+                <NetworkIcons_1.ClearIcon size={13} color={AppColors_1.AppColors.grayTextWeak}/>
+              </TouchableScale_1.default>
+            </react_native_1.View>)}
         </react_native_1.View>
 
         {/* Action Buttons: Add Key & Refresh */}
@@ -318,81 +411,19 @@ exports.StorageTab = react_1.default.memo(() => {
       {isLoading ? (<react_native_1.View style={styles.loadingContainer}>
           <react_native_1.ActivityIndicator size="small" color={AppColors_1.AppColors.purple}/>
           <react_native_1.Text style={styles.loadingText}>Loading storage entries...</react_native_1.Text>
-        </react_native_1.View>) : filteredEntries.length === 0 ? (<react_native_1.ScrollView contentContainerStyle={styles.emptyContainer} showsVerticalScrollIndicator={false}>
-          <react_native_1.View style={styles.emptyIconWrap}>
-            <NetworkIcons_1.DatabaseIcon size={28} color={AppColors_1.AppColors.grayTextWeak}/>
-          </react_native_1.View>
-          <react_native_1.Text style={styles.emptyTitle}>
-            {search ? 'No matching keys found' : `No ${activeDriver === 'asyncStorage' ? 'AsyncStorage' : 'MMKV'} Keys`}
-          </react_native_1.Text>
-          <react_native_1.Text style={styles.emptySubtitle}>
-            {search
-                ? 'Try modifying your search query'
-                : `Storage is auto-detected. Tap "+ Add" above to create your first ${activeDriver === 'asyncStorage' ? 'AsyncStorage' : 'MMKV'} key!`}
-          </react_native_1.Text>
-        </react_native_1.ScrollView>) : (<react_native_1.ScrollView style={styles.scrollArea} contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
-          {filteredEntries.map(entry => {
-                const isExpanded = Boolean(expandedKeys[entry.key]);
-                const badge = getTypeBadge(entry.type);
-                const formattedBytes = entry.byteSize < 1024
-                    ? `${entry.byteSize} B`
-                    : `${(entry.byteSize / 1024).toFixed(1)} KB`;
-                return (<react_native_1.View key={entry.key} style={styles.entryCard}>
-                {/* Entry Header: Key name, Type Badge, Size, Actions */}
-                <react_native_1.View style={styles.entryHeader}>
-                  <react_native_1.View style={{ flex: 1, marginRight: 8 }}>
-                    <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
-                      <react_native_1.Text style={styles.entryKey} numberOfLines={1} selectable>
-                        {entry.key}
-                      </react_native_1.Text>
-                      <react_native_1.View style={[
-                        styles.typeBadge,
-                        { backgroundColor: badge.bg, borderColor: `${badge.color}33` },
-                    ]}>
-                        <react_native_1.Text style={[styles.typeBadgeText, { color: badge.color }]}>
-                          {badge.label}
-                        </react_native_1.Text>
-                      </react_native_1.View>
-                      <react_native_1.Text style={styles.sizeText}>{formattedBytes}</react_native_1.Text>
-                    </react_native_1.View>
-                  </react_native_1.View>
-
-                  {/* Actions: Copy, Edit, Delete */}
-                  <react_native_1.View style={styles.entryActions}>
-                    <TouchableScale_1.default hitSlop={6} onPress={() => {
-                        (0, helpers_1.copyToClipboard)(entry.value, entry.key);
-                        (0, toast_1.showToast)(`Copied value of "${entry.key}"`);
-                    }} style={styles.entryActionBtn}>
-                      <NetworkIcons_1.CopyIcon size={12} color={AppColors_1.AppColors.grayText}/>
-                    </TouchableScale_1.default>
-
-                    <TouchableScale_1.default hitSlop={6} onPress={() => handleOpenEdit(entry)} style={styles.entryActionBtn}>
-                      <NetworkIcons_1.PencilIcon size={12} color={AppColors_1.AppColors.purple}/>
-                    </TouchableScale_1.default>
-
-                    <TouchableScale_1.default hitSlop={6} onPress={() => handleDeleteKey(entry.key)} style={[styles.entryActionBtn, { backgroundColor: `${AppColors_1.AppColors.errorColor}12` }]}>
-                      <NetworkIcons_1.TrashIcon size={12} color={AppColors_1.AppColors.errorColor}/>
-                    </TouchableScale_1.default>
-                  </react_native_1.View>
-                </react_native_1.View>
-
-                {/* Entry Value Preview / Viewer */}
-                <TouchableScale_1.default onPress={() => toggleExpand(entry.key)} style={styles.valuePreviewBox}>
-                  <react_native_1.Text style={styles.valuePreviewText} numberOfLines={isExpanded ? undefined : 3} selectable>
-                    {entry.type === 'json' && entry.parsedValue
-                        ? isExpanded
-                            ? JSON.stringify(entry.parsedValue, null, 2)
-                            : entry.value
-                        : entry.value}
-                  </react_native_1.Text>
-                  {entry.value.length > 80 && (<react_native_1.Text style={styles.expandHint}>
-                      {isExpanded ? '▲ Collapse' : '▼ Expand'}
-                    </react_native_1.Text>)}
-                </TouchableScale_1.default>
-              </react_native_1.View>);
-            })}
-          <react_native_1.View style={{ height: 60 }}/>
-        </react_native_1.ScrollView>)}
+        </react_native_1.View>) : (<react_native_1.FlatList data={filteredEntries} keyExtractor={item => item.key} renderItem={renderItem} initialNumToRender={10} maxToRenderPerBatch={10} windowSize={5} removeClippedSubviews={react_native_1.Platform.OS === 'android'} style={styles.scrollArea} contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false} ListEmptyComponent={<react_native_1.View style={styles.emptyContainer}>
+              <react_native_1.View style={styles.emptyIconWrap}>
+                <NetworkIcons_1.DatabaseIcon size={28} color={AppColors_1.AppColors.grayTextWeak}/>
+              </react_native_1.View>
+              <react_native_1.Text style={styles.emptyTitle}>
+                {search ? 'No matching keys found' : `No ${activeDriver === 'asyncStorage' ? 'AsyncStorage' : 'MMKV'} Keys`}
+              </react_native_1.Text>
+              <react_native_1.Text style={styles.emptySubtitle}>
+                {search
+                    ? 'Try modifying your search query'
+                    : `Storage is auto-detected. Tap "+ Add" above to create your first ${activeDriver === 'asyncStorage' ? 'AsyncStorage' : 'MMKV'} key!`}
+              </react_native_1.Text>
+            </react_native_1.View>} ListFooterComponent={<react_native_1.View style={{ height: 60 }}/>}/>)}
 
       {/* ── Create / Edit Key Modal ── */}
       <react_native_1.Modal visible={modalVisible} transparent animationType="fade" onRequestClose={() => setModalVisible(false)}>

package/dist/commonjs/components/JsonViewer.js

@@ -43,6 +43,7 @@ const i18n_1 = require("../i18n");
 const TreeNode_1 = __importDefault(require("./TreeNode"));
 const SegmentedTabs_1 = __importDefault(require("./SegmentedTabs"));
 const HighlightText_1 = __importDefault(require("./HighlightText"));
+const CopyButton_1 = __importDefault(require("./CopyButton"));
 const NetworkIcons_1 = require("./NetworkIcons");
 // Styles
 const AppColors_1 = require("../styles/AppColors");
@@ -189,6 +190,7 @@ const JsonViewer = react_1.default.memo(({ data, search, forceOpen, defaultExpan
                     icon: (isActive) => (<NetworkIcons_1.TableIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.slate400} size={12}/>),
                 },
             ]} activeKey={mode} onChange={key => setMode(key)}/>
+          <CopyButton_1.default value={data} label="JSON"/>
         </react_native_1.View>)}
 
       {/* ── Main View Content Area (Royal Monospace Theme) ── */}

package/dist/commonjs/components/MetaAccordion.js

@@ -49,6 +49,7 @@ const helpers_1 = require("../helpers");
 const NetworkIcons_1 = require("./NetworkIcons");
 // Components
 const TouchableScale_1 = __importDefault(require("./TouchableScale"));
+const CopyButton_1 = __importDefault(require("./CopyButton"));
 // Stylesheet
 const AppColors_1 = require("../styles/AppColors");
 const AppFonts_1 = require("../styles/AppFonts");
@@ -98,9 +99,20 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
       <react_native_1.Pressable onPress={toggleOpen} hitSlop={12}>
         <react_native_1.View style={styles_1.default.metaHeader}>
           <react_native_1.Text style={styles_1.default.metaTitle}>Metadata</react_native_1.Text>
-          <react_native_1.Animated.View style={chevronStyle}>
-            <NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
-          </react_native_1.Animated.View>
+          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+            <CopyButton_1.default value={{
+            status: status ?? 0,
+            duration: duration != null ? `${duration} ms` : '—',
+            size: size || '—',
+            triggeredAt: triggeredAt || '',
+            method: method || 'GET',
+            contentType: contentType || 'application/json',
+            url: url || '',
+        }} label="Metadata"/>
+            <react_native_1.Animated.View style={chevronStyle}>
+              <NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+            </react_native_1.Animated.View>
+          </react_native_1.View>
         </react_native_1.View>
       </react_native_1.Pressable>
 

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

@@ -0,0 +1,6 @@
+import React from 'react';
+interface SkeletonPlaceholderProps {
+    cardCount?: number;
+}
+declare const SkeletonPlaceholder: React.NamedExoticComponent<SkeletonPlaceholderProps>;
+export default SkeletonPlaceholder;

package/dist/commonjs/components/SkeletonPlaceholder.js

@@ -0,0 +1,208 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const AppColors_1 = require("../styles/AppColors");
+const SkeletonPlaceholder = react_1.default.memo(function SkeletonPlaceholder({ cardCount = 4, }) {
+    const shimmerAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0.35)).current;
+    (0, react_1.useEffect)(() => {
+        const animation = react_native_1.Animated.loop(react_native_1.Animated.sequence([
+            react_native_1.Animated.timing(shimmerAnim, {
+                toValue: 0.85,
+                duration: 750,
+                useNativeDriver: true,
+            }),
+            react_native_1.Animated.timing(shimmerAnim, {
+                toValue: 0.35,
+                duration: 750,
+                useNativeDriver: true,
+            }),
+        ]));
+        animation.start();
+        return () => animation.stop();
+    }, [shimmerAnim]);
+    return (<react_native_1.View style={skeletonStyles.container}>
+      {/* ─── Search & Scope Toolbar Skeleton ─── */}
+      <react_native_1.View style={skeletonStyles.toolbarSkeleton}>
+        <react_native_1.Animated.View style={[
+            skeletonStyles.searchBarSkeleton,
+            { opacity: shimmerAnim },
+        ]}/>
+        <react_native_1.View style={skeletonStyles.actionButtonsRow}>
+          <react_native_1.Animated.View style={[skeletonStyles.iconButtonSkeleton, { opacity: shimmerAnim }]}/>
+          <react_native_1.Animated.View style={[skeletonStyles.iconButtonSkeleton, { opacity: shimmerAnim }]}/>
+        </react_native_1.View>
+      </react_native_1.View>
+
+      {/* ─── Quick Filter Chips Skeleton Strip ─── */}
+      <react_native_1.View style={skeletonStyles.chipStripSkeleton}>
+        <react_native_1.Animated.View style={[skeletonStyles.chipSkeleton, { width: 48, opacity: shimmerAnim }]}/>
+        <react_native_1.Animated.View style={[skeletonStyles.chipSkeleton, { width: 68, opacity: shimmerAnim }]}/>
+        <react_native_1.Animated.View style={[skeletonStyles.chipSkeleton, { width: 76, opacity: shimmerAnim }]}/>
+        <react_native_1.Animated.View style={[skeletonStyles.chipSkeleton, { width: 58, opacity: shimmerAnim }]}/>
+      </react_native_1.View>
+
+      {/* ─── List Cards Skeleton ─── */}
+      {Array.from({ length: cardCount }).map((_, i) => (<react_native_1.Animated.View key={`skeleton_card_${i}`} style={[skeletonStyles.cardSkeleton, { opacity: shimmerAnim }]}>
+          {/* Top row: Status pill + Method + Time */}
+          <react_native_1.View style={skeletonStyles.cardTopRow}>
+            <react_native_1.View style={skeletonStyles.badgeGroup}>
+              <react_native_1.View style={skeletonStyles.statusBadgeSkeleton}/>
+              <react_native_1.View style={skeletonStyles.methodBadgeSkeleton}/>
+            </react_native_1.View>
+            <react_native_1.View style={skeletonStyles.timeSkeleton}/>
+          </react_native_1.View>
+
+          {/* Middle row: URL lines */}
+          <react_native_1.View style={skeletonStyles.urlLineLong}/>
+          <react_native_1.View style={skeletonStyles.urlLineShort}/>
+
+          {/* Bottom row: Latency & Size */}
+          <react_native_1.View style={skeletonStyles.cardBottomRow}>
+            <react_native_1.View style={skeletonStyles.metaPillSkeleton}/>
+            <react_native_1.View style={skeletonStyles.metaPillSkeleton}/>
+          </react_native_1.View>
+        </react_native_1.Animated.View>))}
+    </react_native_1.View>);
+});
+const skeletonStyles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        paddingHorizontal: 12,
+        paddingTop: 8,
+    },
+    toolbarSkeleton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+        marginBottom: 8,
+    },
+    searchBarSkeleton: {
+        flex: 1,
+        height: 36,
+        borderRadius: 8,
+        backgroundColor: AppColors_1.AppColors.graySurface,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.dividerColor,
+    },
+    actionButtonsRow: {
+        flexDirection: 'row',
+        gap: 6,
+    },
+    iconButtonSkeleton: {
+        width: 36,
+        height: 36,
+        borderRadius: 8,
+        backgroundColor: AppColors_1.AppColors.graySurface,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.dividerColor,
+    },
+    chipStripSkeleton: {
+        flexDirection: 'row',
+        gap: 6,
+        marginBottom: 10,
+    },
+    chipSkeleton: {
+        height: 24,
+        borderRadius: 6,
+        backgroundColor: AppColors_1.AppColors.graySurface,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.dividerColor,
+    },
+    cardSkeleton: {
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+        borderRadius: 10,
+        padding: 12,
+        marginBottom: 8,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.dividerColor,
+    },
+    cardTopRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: 8,
+    },
+    badgeGroup: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+    },
+    statusBadgeSkeleton: {
+        width: 38,
+        height: 18,
+        borderRadius: 4,
+        backgroundColor: AppColors_1.AppColors.graySurface,
+    },
+    methodBadgeSkeleton: {
+        width: 44,
+        height: 18,
+        borderRadius: 4,
+        backgroundColor: AppColors_1.AppColors.graySurface,
+    },
+    timeSkeleton: {
+        width: 48,
+        height: 12,
+        borderRadius: 4,
+        backgroundColor: AppColors_1.AppColors.graySurface,
+    },
+    urlLineLong: {
+        height: 13,
+        borderRadius: 4,
+        backgroundColor: AppColors_1.AppColors.graySurface,
+        marginBottom: 5,
+        width: '90%',
+    },
+    urlLineShort: {
+        height: 11,
+        borderRadius: 4,
+        backgroundColor: AppColors_1.AppColors.graySurface,
+        marginBottom: 8,
+        width: '55%',
+    },
+    cardBottomRow: {
+        flexDirection: 'row',
+        gap: 8,
+        marginTop: 2,
+    },
+    metaPillSkeleton: {
+        width: 52,
+        height: 14,
+        borderRadius: 4,
+        backgroundColor: AppColors_1.AppColors.graySurface,
+    },
+});
+exports.default = SkeletonPlaceholder;

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

@@ -1 +1 @@
-export declare const LIB_VERSION = "2.2.9";
+export declare const LIB_VERSION = "2.3.1";

package/dist/commonjs/constants/version.js

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

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

@@ -1,3 +1,4 @@
+import { RouteInfo } from "../types";
 type NetworkLog = {
     id: number;
     url: string;
@@ -11,7 +12,9 @@ type NetworkLog = {
     client?: string;
     requestHeaders?: Record<string, string>;
     responseHeaders?: Record<string, string>;
+    routeInfo?: RouteInfo;
 };
+export declare const setRouteInfoProvider: (provider: (() => RouteInfo | null) | null) => void;
 export declare const setNetworkModuleEnabled: (enabled: boolean) => void;
 export declare const getNetworkModuleEnabled: () => boolean;
 export declare const subscribeNetworkLogs: (callback: (logs: NetworkLog[]) => void) => () => void;

package/dist/commonjs/customHooks/networkLogger.js

@@ -3,13 +3,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.addAxiosInterceptors = exports.setupNetworkLogger = exports.pruneNetworkLogs = exports.getMaxNetworkLogsLimit = exports.setMaxNetworkLogsLimit = exports.getNetworkLogs = exports.clearNetworkLogs = exports.subscribeNetworkLogs = exports.getNetworkModuleEnabled = exports.setNetworkModuleEnabled = void 0;
+exports.addAxiosInterceptors = exports.setupNetworkLogger = exports.pruneNetworkLogs = exports.getMaxNetworkLogsLimit = exports.setMaxNetworkLogsLimit = exports.getNetworkLogs = exports.clearNetworkLogs = exports.subscribeNetworkLogs = exports.getNetworkModuleEnabled = exports.setNetworkModuleEnabled = exports.setRouteInfoProvider = void 0;
 const axios_1 = __importDefault(require("axios"));
 const crashHandler_1 = require("./crashHandler");
 let logs = [];
 let listeners = [];
 let counter = 0;
 let isNetworkModuleEnabled = true;
+let currentRouteProvider = null;
+const setRouteInfoProvider = (provider) => {
+    currentRouteProvider = provider;
+};
+exports.setRouteInfoProvider = setRouteInfoProvider;
 const setNetworkModuleEnabled = (enabled) => {
     isNetworkModuleEnabled = enabled;
 };
@@ -199,6 +204,7 @@ const setupNetworkLogger = () => {
                 else if (caller?.toLowerCase().includes('axios')) {
                     client = 'axios';
                 }
+                const currentRoute = currentRouteProvider ? currentRouteProvider() : null;
                 addOrUpdateLog({
                     id,
                     url: finalUrl,
@@ -206,6 +212,7 @@ const setupNetworkLogger = () => {
                     startTime: start,
                     caller,
                     client,
+                    routeInfo: currentRoute || undefined,
                     request: method === "GET" ? undefined : parseRequestData(options?.body),
                     requestHeaders,
                 });
@@ -313,6 +320,7 @@ const addAxiosInterceptors = (axiosInstance) => {
         config.__logId = id;
         config.__logStart = start;
         config.__logCaller = caller;
+        const currentRoute = currentRouteProvider ? currentRouteProvider() : null;
         addOrUpdateLog({
             id,
             url,
@@ -320,6 +328,7 @@ const addAxiosInterceptors = (axiosInstance) => {
             startTime: start,
             caller,
             client: 'axios',
+            routeInfo: currentRoute || undefined,
             request: method === "GET" ? undefined : parseRequestData(config.data),
             requestHeaders: normaliseHeaders(config.headers),
         });

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

@@ -37,11 +37,11 @@ export declare const getRegisteredMMKVInstanceIds: () => string[];
  */
 export declare const calculateByteSize: (str: string) => number;
 /**
- * Determine type and format value safely
+ * Determine type and format value safely without blocking JS thread
  */
 export declare const analyzeStorageValue: (rawVal: any) => {
     strVal: string;
-    parsedVal?: any;
+    parsedValue?: any;
     type: "json" | "string" | "number" | "boolean" | "null";
     byteSize: number;
 };