react-native-inapp-inspector 2.3.9 → 2.3.10

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

@@ -39,99 +39,53 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const InspectorContext_1 = require("./InspectorContext");
-const useAccordion_1 = __importDefault(require("../../customHooks/useAccordion"));
 const TouchableScale_1 = __importDefault(require("../TouchableScale"));
 const AnimatedEntrance_1 = __importDefault(require("../AnimatedEntrance"));
 const DomainHeader_1 = __importDefault(require("../DomainHeader"));
 const LogCard_1 = __importDefault(require("../LogCard"));
 const EmptyState_1 = __importDefault(require("../EmptyState"));
 const EndOfListFooter_1 = __importDefault(require("../EndOfListFooter"));
+const NetworkFilterModal_1 = __importDefault(require("./NetworkFilterModal"));
 const styles_1 = __importDefault(require("../../styles"));
 const AppColors_1 = require("../../styles/AppColors");
 const AppFonts_1 = require("../../styles/AppFonts");
 const constants_1 = require("../../constants");
 const i18n_1 = require("../../i18n");
 const NetworkIcons_1 = require("../NetworkIcons");
-const STATUS_META = {
-    ALL: { color: AppColors_1.AppColors.grayText, Icon: NetworkIcons_1.LayersIcon },
-    '2xx': { color: AppColors_1.AppColors.greenColor, Icon: NetworkIcons_1.CircleCheckIcon },
-    '200': { color: AppColors_1.AppColors.greenColor, Icon: NetworkIcons_1.CircleCheckIcon },
-    '3xx': { color: AppColors_1.AppColors.warningIconGold, Icon: NetworkIcons_1.CircleAlertIcon },
-    '300': { color: AppColors_1.AppColors.warningIconGold, Icon: NetworkIcons_1.CircleAlertIcon },
-    '4xx': { color: AppColors_1.AppColors.darkOrange, Icon: NetworkIcons_1.CircleAlertIcon },
-    '400': { color: AppColors_1.AppColors.darkOrange, Icon: NetworkIcons_1.CircleAlertIcon },
-    '404': { color: AppColors_1.AppColors.darkOrange, Icon: NetworkIcons_1.CircleAlertIcon },
-    '5xx': { color: AppColors_1.AppColors.errorColor, Icon: NetworkIcons_1.CircleXIcon },
-    '500': { color: AppColors_1.AppColors.errorColor, Icon: NetworkIcons_1.CircleXIcon },
-    Failed: { color: AppColors_1.AppColors.errorColor, Icon: NetworkIcons_1.CircleXIcon },
-};
-const getStatusMeta = (filter) => {
-    if (STATUS_META[filter])
-        return STATUS_META[filter];
-    const num = parseInt(filter, 10);
-    if (!isNaN(num)) {
-        if (num >= 200 && num < 300)
-            return { color: AppColors_1.AppColors.greenColor, Icon: NetworkIcons_1.CircleCheckIcon };
-        if (num >= 300 && num < 400)
-            return { color: AppColors_1.AppColors.warningIconGold, Icon: NetworkIcons_1.CircleAlertIcon };
-        if (num >= 400 && num < 500)
-            return { color: AppColors_1.AppColors.darkOrange, Icon: NetworkIcons_1.CircleAlertIcon };
-        if (num >= 500)
-            return { color: AppColors_1.AppColors.errorColor, Icon: NetworkIcons_1.CircleXIcon };
-    }
-    if (filter.startsWith('2'))
-        return { color: AppColors_1.AppColors.greenColor, Icon: NetworkIcons_1.CircleCheckIcon };
-    if (filter.startsWith('3'))
-        return { color: AppColors_1.AppColors.warningIconGold, Icon: NetworkIcons_1.CircleAlertIcon };
-    if (filter.startsWith('4'))
-        return { color: AppColors_1.AppColors.darkOrange, Icon: NetworkIcons_1.CircleAlertIcon };
-    if (filter.startsWith('5'))
-        return { color: AppColors_1.AppColors.errorColor, Icon: NetworkIcons_1.CircleXIcon };
-    return { color: AppColors_1.AppColors.grayText, Icon: NetworkIcons_1.LayersIcon };
-};
-const FilterChip = react_1.default.memo(({ label, color, Icon, badge, active, onPress, }) => {
-    const iconColor = active ? color : AppColors_1.AppColors.grayTextWeak;
-    return (<TouchableScale_1.default style={styles_1.default.statusFilterWrap} onPress={onPress} hitSlop={10}>
-      <react_native_1.View style={[
-            styles_1.default.statusFilterChip,
-            {
-                paddingHorizontal: 9,
-                paddingVertical: 5,
-                borderRadius: 7,
-                borderWidth: 1,
-                borderColor: active ? color : `${AppColors_1.AppColors.grayBorderSecondary}`,
-                backgroundColor: active ? `${color}14` : AppColors_1.AppColors.grayBackground,
-            },
-            active && {
-                shadowColor: color,
-                shadowOffset: { width: 0, height: 1 },
-                shadowOpacity: 0.2,
-                shadowRadius: 2,
-                elevation: 1.5,
-            },
-        ]}>
-        {badge != null ? (<react_native_1.View style={[
-                styles_1.default.methodBadgeMini,
-                { backgroundColor: badge },
-            ]}/>) : (Icon && (<Icon color={iconColor} size={13}/>))}
-        <react_native_1.Text numberOfLines={1} style={[
-            styles_1.default.statusFilterText,
-            {
-                color: active ? color : AppColors_1.AppColors.grayText,
-                fontFamily: active ? AppFonts_1.AppFonts.interBold : AppFonts_1.AppFonts.interMedium,
-            },
-        ]}>
-          {label}
-        </react_native_1.Text>
-      </react_native_1.View>
-    </TouchableScale_1.default>);
-});
 const NetworkTab = react_1.default.memo(() => {
     const { groupedData, search, setSearch, searchScope, setSearchScope, isRegexSearch, setIsRegexSearch, isCaseSensitive, setIsCaseSensitive, quickFilter, setQuickFilter, handleDelete, selectedLogs, sortOrder, setSortOrder, statusFilters, setStatusFilters, methodFilters, setMethodFilters, availableMethods, filteredLogs, logs, toggleSectionFilter, toggleSectionCollapse, minStart, totalRange, newLogIds, toggleSelect, setSelected, isNetworkPaused, setIsNetworkPaused, } = (0, InspectorContext_1.useInspector)();
     const { t } = (0, i18n_1.useTranslation)();
-    const filtersAccordion = (0, useAccordion_1.default)(false, 300, 260);
     const apisListRef = (0, react_1.useRef)(null);
+    const [isFilterModalOpen, setIsFilterModalOpen] = react_1.default.useState(false);
     const [isSearchFocused, setIsSearchFocused] = react_1.default.useState(false);
+    const modalFilterState = (0, react_1.useMemo)(() => ({
+        statusCodes: statusFilters.size > 0 ? new Set(statusFilters) : new Set(['all']),
+        methods: methodFilters.size > 0 ? new Set(methodFilters) : new Set(['all']),
+        latency: 'all',
+        protocol: 'all',
+        sortBy: sortOrder === 'newest' ? 'time_desc' : 'time_asc',
+    }), [statusFilters, methodFilters, sortOrder]);
+    const handleApplyNetworkFilters = (0, react_1.useCallback)((newFilters) => {
+        if (newFilters.statusCodes.has('all') ||
+            newFilters.statusCodes.size === 0) {
+            setStatusFilters(new Set());
+        }
+        else {
+            setStatusFilters(new Set(newFilters.statusCodes));
+        }
+        if (newFilters.methods.has('all') || newFilters.methods.size === 0) {
+            setMethodFilters(new Set());
+        }
+        else {
+            setMethodFilters(new Set([...newFilters.methods].map(m => m)));
+        }
+        if (newFilters.sortBy === 'time_asc') {
+            setSortOrder('oldest');
+        }
+        else {
+            setSortOrder('newest');
+        }
+    }, [setStatusFilters, setMethodFilters, setSortOrder]);
     const quickCounts = (0, react_1.useMemo)(() => {
         let errorCount = 0;
         let successCount = 0;
@@ -558,10 +512,12 @@ const NetworkTab = react_1.default.memo(() => {
 
                 <TouchableScale_1.default style={[
                 styles_1.default.toolbarBtn,
-                filtersAccordion.isOpen &&
-                    styles_1.default.toolbarBtnActive,
-            ]} onPress={filtersAccordion.toggleOpen} hitSlop={6}>
-                  <NetworkIcons_1.FilterIcon color={filtersAccordion.isOpen
+                (statusFilters.size > 0 || methodFilters.size > 0) && {
+                    borderColor: AppColors_1.AppColors.purple,
+                    backgroundColor: `${AppColors_1.AppColors.purple}15`,
+                },
+            ]} onPress={() => setIsFilterModalOpen(true)} hitSlop={6}>
+                  <NetworkIcons_1.FilterIcon color={statusFilters.size > 0 || methodFilters.size > 0
                 ? AppColors_1.AppColors.purple
                 : AppColors_1.AppColors.grayTextStrong} size={16}/>
                   {(statusFilters.size > 0 ||
@@ -723,6 +679,51 @@ const NetworkTab = react_1.default.memo(() => {
                       </react_native_1.View>
                     </TouchableScale_1.default>);
             })}
+
+                <TouchableScale_1.default onPress={() => setIsFilterModalOpen(true)}>
+                  <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                paddingHorizontal: 10,
+                paddingVertical: 4.5,
+                borderRadius: 8,
+                backgroundColor: statusFilters.size > 0 || methodFilters.size > 0
+                    ? `${AppColors_1.AppColors.purple}20`
+                    : AppColors_1.AppColors.grayBackground,
+                borderWidth: 1,
+                borderColor: statusFilters.size > 0 || methodFilters.size > 0
+                    ? AppColors_1.AppColors.purple
+                    : AppColors_1.AppColors.grayBorderSecondary,
+                gap: 5,
+            }}>
+                    <NetworkIcons_1.FilterIcon size={11} color={statusFilters.size > 0 || methodFilters.size > 0
+                ? AppColors_1.AppColors.purple
+                : AppColors_1.AppColors.grayText}/>
+                    <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 10.5,
+                color: statusFilters.size > 0 || methodFilters.size > 0
+                    ? AppColors_1.AppColors.purple
+                    : AppColors_1.AppColors.grayText,
+            }}>
+                      More Filters
+                    </react_native_1.Text>
+                    {(statusFilters.size > 0 || methodFilters.size > 0) && (<react_native_1.View style={{
+                    backgroundColor: AppColors_1.AppColors.purple,
+                    paddingHorizontal: 4.5,
+                    paddingVertical: 1,
+                    borderRadius: 6,
+                }}>
+                        <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 8.5,
+                    color: AppColors_1.AppColors.white,
+                }}>
+                          {statusFilters.size + methodFilters.size}
+                        </react_native_1.Text>
+                      </react_native_1.View>)}
+                  </react_native_1.View>
+                </TouchableScale_1.default>
               </react_native_1.ScrollView>
             </react_native_1.View>
 
@@ -871,86 +872,24 @@ const NetworkTab = react_1.default.memo(() => {
                 </TouchableScale_1.default>
               </react_native_1.View>)}
 
-            <react_native_1.Animated.View style={[
-                filtersAccordion.bodyStyle,
-                { overflow: 'hidden' },
-            ]}>
-              <react_native_1.View style={styles_1.default.filtersContainer}>
-                <react_native_1.Text style={styles_1.default.filtersHeading}>
-                  STATUS
-                </react_native_1.Text>
-                <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles_1.default.statusRowContent}>
-                  {constants_1.STATUS_FILTERS.map(filter => {
-                const isAll = filter === 'ALL';
-                const active = isAll
-                    ? statusFilters.size === 0
-                    : statusFilters.has(filter);
-                const meta = getStatusMeta(filter);
-                return (<FilterChip key={filter} label={filter} color={meta.color} Icon={meta.Icon} active={active} onPress={() => {
-                        if (isAll) {
-                            setStatusFilters(new Set());
-                        }
-                        else {
-                            setStatusFilters(prev => {
-                                const next = new Set(prev);
-                                next.has(filter)
-                                    ? next.delete(filter)
-                                    : next.add(filter);
-                                return next;
-                            });
-                        }
-                    }}/>);
-            })}
-                </react_native_1.ScrollView>
-
-                <react_native_1.Text style={[
-                styles_1.default.filtersHeading,
-                { marginTop: 16 },
-            ]}>
-                  METHOD
-                </react_native_1.Text>
-                <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles_1.default.statusRowContent}>
-                  {availableMethods.map(filter => {
-                const isAll = filter === 'ALL';
-                const active = isAll
-                    ? methodFilters.size === 0
-                    : methodFilters.has(filter);
-                const methodColor = constants_1.METHOD_COLORS[filter] ??
-                    constants_1.METHOD_COLORS.ALL;
-                return (<FilterChip key={filter} label={filter} color={methodColor} badge={methodColor} active={active} onPress={() => {
-                        if (isAll) {
-                            setMethodFilters(new Set());
-                        }
-                        else {
-                            setMethodFilters(prev => {
-                                const next = new Set(prev);
-                                next.has(filter)
-                                    ? next.delete(filter)
-                                    : next.add(filter);
-                                return next;
-                            });
-                        }
-                    }}/>);
-            })}
-                </react_native_1.ScrollView>
-              </react_native_1.View>
-            </react_native_1.Animated.View>
-
             {(search ||
                 statusFilters.size > 0 ||
-                methodFilters.size > 0) && (<react_native_1.Text style={styles_1.default.resultCount}>
+                methodFilters.size > 0 ||
+                quickFilter !== 'all') && (<react_native_1.Text style={styles_1.default.resultCount}>
                 {filteredLogs.length === logs.length
                     ? `${logs.length} requests`
                     : `${filteredLogs.length} of ${logs.length} filtered requests`}
               </react_native_1.Text>)}
           </react_native_1.View>} ListEmptyComponent={<EmptyState_1.default isSearch={search.length > 0 ||
                 statusFilters.size > 0 ||
-                methodFilters.size > 0} searchQuery={search} customTitle={search.length > 0
+                methodFilters.size > 0 ||
+                quickFilter !== 'all'} searchQuery={search} customTitle={search.length > 0
                 ? 'No matching API requests'
                 : 'No network activity'} onClearSearch={() => {
                 setSearch('');
                 setStatusFilters(new Set());
                 setMethodFilters(new Set());
+                setQuickFilter('all');
                 setSearchScope('all');
             }}/>} ListFooterComponent={groupedData.length > 0 ? (<EndOfListFooter_1.default count={filteredLogs.length} label="requests"/>) : null} contentContainerStyle={[
             styles_1.default.listContent,
@@ -978,6 +917,9 @@ const NetworkTab = react_1.default.memo(() => {
           <NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.white} size={18}/>
         </react_native_1.View>
       </TouchableScale_1.default>
+
+      
+      <NetworkFilterModal_1.default visible={isFilterModalOpen} onClose={() => setIsFilterModalOpen(false)} filters={modalFilterState} onApply={handleApplyNetworkFilters} searchQuery={search}/>
     </react_native_1.View>);
 });
 exports.default = NetworkTab;

package/dist/commonjs/components/LogCard.js

@@ -236,29 +236,6 @@ const LogCard = react_1.default.memo(function LogCard({ item, onPress, timelineM
                   GQL
                 </react_native_1.Text>
               </react_native_1.View>)}
-
-            
-            {item.duration != null && !isFailed && (<react_native_1.View style={[
-                styles_1.default.chip,
-                {
-                    backgroundColor: `${durationColor}12`,
-                    borderColor: `${durationColor}2E`,
-                    paddingHorizontal: 4.5,
-                    paddingVertical: 1,
-                    borderRadius: 4,
-                },
-            ]}>
-                <react_native_1.Text style={[
-                styles_1.default.chipText,
-                {
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 8.5,
-                    color: durationColor,
-                },
-            ]}>
-                  {item.duration}ms
-                </react_native_1.Text>
-              </react_native_1.View>)}
           </react_native_1.View>
 
           <react_native_1.View style={[
@@ -277,6 +254,7 @@ const LogCard = react_1.default.memo(function LogCard({ item, onPress, timelineM
                     : isLoading
                         ? `${AppColors_1.AppColors.darkOrange}30`
                         : `${statusColor}30`,
+                flexShrink: 0,
             },
         ]}>
             {renderStatusIcon()}
@@ -310,6 +288,7 @@ const LogCard = react_1.default.memo(function LogCard({ item, onPress, timelineM
             alignItems: 'center',
             justifyContent: 'center',
             marginRight: 4,
+            flexShrink: 0,
         }}>
               <NetworkIcons_1.GlobeIcon color={AppColors_1.AppColors.skyBlue} size={11}/>
             </react_native_1.View>
@@ -348,8 +327,8 @@ const LogCard = react_1.default.memo(function LogCard({ item, onPress, timelineM
 
         
         <react_native_1.View style={styles_1.default.cardFooterRow}>
-          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexShrink: 1, minWidth: 0 }}>
-            <react_native_1.View style={styles_1.default.cardDateRow}>
+          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flex: 1, minWidth: 0, marginRight: 8 }}>
+            <react_native_1.View style={[styles_1.default.cardDateRow, { flexShrink: 0 }]}>
               <NetworkIcons_1.CalendarIcon color={AppColors_1.AppColors.grayTextWeak} size={10}/>
               <react_native_1.Text style={styles_1.default.cardDateText}>{triggeredAt}</react_native_1.Text>
             </react_native_1.View>
@@ -366,7 +345,7 @@ const LogCard = react_1.default.memo(function LogCard({ item, onPress, timelineM
                     paddingVertical: 1,
                     borderRadius: 4,
                     flexShrink: 1,
-                    maxWidth: 160,
+                    minWidth: 0,
                 },
             ]}>
                 <NetworkIcons_1.PinIcon color={AppColors_1.AppColors.skyBlue} size={8.5}/>

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

@@ -133,3 +133,4 @@ export declare const ShieldCheckIcon: ({ color, size, }: IconProps) => React.JSX
 export declare const DatabaseIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const PencilIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const PlusIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const LockIcon: ({ color, size, }: IconProps) => React.JSX.Element;

package/dist/commonjs/components/NetworkIcons.js

@@ -38,7 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InfoCircleIcon = exports.UserIcon = exports.LayersIcon = exports.WipeIcon = exports.FolderIcon = exports.SettingsIcon = exports.EyeIcon = exports.JsIcon = exports.CssIcon = exports.HtmlIcon = exports.BrandSquareIcon = exports.BrandCircleIcon = exports.MoonIcon = exports.SunIcon = exports.DebugIcon = exports.InsightsIcon = exports.AnalyticsIcon = exports.WhiteBackNavigation = exports.CloseWhite = exports.DownloadIcon = exports.FilterIcon = exports.ChevronIcon = exports.SortArrowIcon = exports.GlobeIcon = exports.DiffIcon = exports.SignalIcon = exports.ExportIcon = exports.HeaderPauseIcon = exports.TrashIcon = exports.FailIcon = exports.CircleAlertIcon = exports.CircleXIcon = exports.CircleCheckIcon = exports.CheckIcon = exports.TerminalIcon = exports.FetchIcon = exports.CopyIcon = exports.HeadersIcon = exports.ResponseIcon = exports.RequestIcon = exports.SizeIcon = exports.StatusIcon = exports.CalendarIcon = exports.ClockIcon = exports.ClearIcon = exports.SearchIcon = exports.ExpandCollapseIcon = exports.ScreenIcon = exports.MapPinIcon = exports.EmptyRadarIcon = void 0;
 exports.DiagnosticsIcon = exports.StackTraceIcon = exports.LayoutIcon = exports.ChipIcon = exports.SkullIcon = exports.ShieldAlertIcon = exports.CrashIcon = exports.UserCheckIcon = exports.TargetGoalIcon = exports.RepeatIcon = exports.PinIcon = exports.HourglassIcon = exports.FlameIcon = exports.CodeBracketsIcon = exports.AndroidIcon = exports.AppleIcon = exports.LinkChainIcon = exports.GitHubIcon = exports.PackageBoxIcon = exports.ExternalLinkIcon = exports.MoneyIcon = exports.CartIcon = exports.TextAaIcon = exports.BrainIcon = exports.AtomIcon = exports.MapIcon = exports.SparkleIcon = exports.LightbulbIcon = exports.DocIcon = exports.FolderOpenIcon = exports.BanIcon = exports.BoltIcon = exports.PerformanceIcon = exports.ReduxIcon = exports.MetadataIcon = exports.StorageIcon = exports.RefreshCcwIcon = exports.TimelineIcon = exports.LiveStateIcon = exports.BundleIcon = exports.ForwardChevronIcon = exports.PackageIcon = exports.TableIcon = exports.RawIcon = exports.PrettyIcon = exports.SortIcon = exports.MotionIcon = exports.TrendingUpIcon = exports.ErrorCircleIcon = exports.WarningTriangleIcon = void 0;
-exports.PlusIcon = exports.PencilIcon = exports.DatabaseIcon = exports.ShieldCheckIcon = exports.WifiIcon = exports.CpuIcon = exports.ChevronDownIcon = exports.ResetIcon = exports.NpmIcon = exports.TagIcon = exports.BugIcon = exports.AlertTriangleIcon = exports.SmartphoneIcon = exports.KeyIcon = exports.BarChartIcon = exports.DiceIcon = exports.ZapIcon = exports.FlaskIcon = exports.LoadingSpinnerIcon = exports.ListenerIcon = exports.AllFramesIcon = exports.AppFramesIcon = exports.RawJsonIcon = exports.TrailIcon = void 0;
+exports.LockIcon = exports.PlusIcon = exports.PencilIcon = exports.DatabaseIcon = exports.ShieldCheckIcon = exports.WifiIcon = exports.CpuIcon = exports.ChevronDownIcon = exports.ResetIcon = exports.NpmIcon = exports.TagIcon = exports.BugIcon = exports.AlertTriangleIcon = exports.SmartphoneIcon = exports.KeyIcon = exports.BarChartIcon = exports.DiceIcon = exports.ZapIcon = exports.FlaskIcon = exports.LoadingSpinnerIcon = exports.ListenerIcon = exports.AllFramesIcon = exports.AppFramesIcon = exports.RawJsonIcon = exports.TrailIcon = void 0;
 const react_1 = __importDefault(require("react"));
 const react_native_svg_1 = __importStar(require("react-native-svg"));
 const AppColors_1 = require("../styles/AppColors");
@@ -894,3 +894,8 @@ const PlusIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) =>
     <react_native_svg_1.Path d="M12 5v14M5 12h14" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
   </react_native_svg_1.default>);
 exports.PlusIcon = PlusIcon;
+const LockIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Rect x="3" y="11" width="18" height="11" rx="2" ry="2" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <react_native_svg_1.Path d="M7 11V7a5 5 0 0 1 10 0v4" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </react_native_svg_1.default>);
+exports.LockIcon = LockIcon;

package/dist/commonjs/constants/index.js

@@ -21,6 +21,9 @@ exports.METHOD_COLORS = {
     PUT: '#D97706',
     PATCH: '#7C3AED',
     DELETE: '#DC2626',
+    QUERY: '#0284C7',
+    OPTIONS: '#475569',
+    HEAD: '#0891B2',
 };
 exports.DOMAIN_COLORS = AppColors_1.AppColors.domainColors;
 exports.DURATION_FAST_MS = 200;

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

@@ -1 +1 @@
-export declare const LIB_VERSION = "2.3.9";
+export declare const LIB_VERSION = "2.3.10";

package/dist/commonjs/constants/version.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LIB_VERSION = void 0;
-exports.LIB_VERSION = '2.3.9';
+exports.LIB_VERSION = '2.3.10';

package/dist/commonjs/styles/index.d.ts

@@ -603,6 +603,7 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         alignItems: string;
         justifyContent: string;
         marginBottom: number;
+        minHeight: number;
     };
     cardHeaderLeft: {
         flexDirection: string;
@@ -610,11 +611,13 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         flex: number;
         marginRight: number;
         gap: number;
+        minWidth: number;
     };
     cardHeaderRight: {
         flexDirection: string;
         alignItems: string;
         gap: number;
+        flexShrink: number;
     };
     smallCheckbox: {
         width: number;
@@ -701,6 +704,7 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         flexDirection: string;
         alignItems: string;
         flex: number;
+        minWidth: number;
         gap: number;
     };
     slugTag: {
@@ -713,6 +717,7 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         paddingVertical: number;
         borderRadius: number;
         marginTop: number;
+        flexShrink: number;
     };
     slugText: {
         fontFamily: string;
@@ -725,17 +730,20 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         flexDirection: string;
         alignItems: string;
         gap: number;
+        flexShrink: number;
     };
     cardFooterRow: {
         flexDirection: string;
         alignItems: string;
         justifyContent: string;
         marginTop: number;
+        minHeight: number;
     };
     cardDateRow: {
         flexDirection: string;
         alignItems: string;
         gap: number;
+        flexShrink: number;
     };
     cardDateText: {
         fontFamily: string;
@@ -747,6 +755,7 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         flexDirection: string;
         alignItems: string;
         gap: number;
+        flexShrink: number;
     };
     chip: {
         flexDirection: string;
@@ -848,11 +857,13 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         alignItems: string;
         justifyContent: string;
         paddingBottom: number;
+        gap: number;
     };
     detailInfoRight: {
         flexDirection: string;
         alignItems: string;
         gap: number;
+        flexShrink: number;
     };
     metaContainer: {
         backgroundColor: string;

package/dist/commonjs/styles/index.js

@@ -594,18 +594,21 @@ const getRawStyles = (colors) => ({
         alignItems: 'center',
         justifyContent: 'space-between',
         marginBottom: 4,
+        minHeight: 22,
     },
     cardHeaderLeft: {
         flexDirection: 'row',
         alignItems: 'center',
         flex: 1,
-        marginRight: 8,
-        gap: 6,
+        marginRight: 6,
+        gap: 5,
+        minWidth: 0,
     },
     cardHeaderRight: {
         flexDirection: 'row',
         alignItems: 'center',
         gap: 5,
+        flexShrink: 0,
     },
     smallCheckbox: {
         width: 15,
@@ -686,6 +689,7 @@ const getRawStyles = (colors) => ({
         flexDirection: 'row',
         alignItems: 'flex-start',
         flex: 1,
+        minWidth: 0,
         gap: 6,
     },
     slugTag: {
@@ -698,6 +702,7 @@ const getRawStyles = (colors) => ({
         paddingVertical: 1.5,
         borderRadius: 4,
         marginTop: 1,
+        flexShrink: 0,
     },
     slugText: {
         fontFamily: AppFonts_1.AppFonts.interMedium,
@@ -710,17 +715,20 @@ const getRawStyles = (colors) => ({
         flexDirection: 'row',
         alignItems: 'center',
         gap: 4,
+        flexShrink: 0,
     },
     cardFooterRow: {
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'space-between',
-        marginTop: 2,
+        marginTop: 4,
+        minHeight: 18,
     },
     cardDateRow: {
         flexDirection: 'row',
         alignItems: 'center',
         gap: 3.5,
+        flexShrink: 0,
     },
     cardDateText: {
         fontFamily: AppFonts_1.AppFonts.interRegular,
@@ -732,6 +740,7 @@ const getRawStyles = (colors) => ({
         flexDirection: 'row',
         alignItems: 'center',
         gap: 5,
+        flexShrink: 0,
     },
     chip: {
         flexDirection: 'row',
@@ -823,9 +832,15 @@ const getRawStyles = (colors) => ({
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'space-between',
-        paddingBottom: 10,
+        paddingBottom: 8,
+        gap: 8,
+    },
+    detailInfoRight: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 5,
+        flexShrink: 0,
     },
-    detailInfoRight: { flexDirection: 'row', alignItems: 'center', gap: 6 },
     metaContainer: {
         backgroundColor: colors.primaryLight,
         borderWidth: 1,

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

@@ -17,6 +17,9 @@ export declare const Method: {
     readonly Put: "PUT";
     readonly Patch: "PATCH";
     readonly Delete: "DELETE";
+    readonly Query: "QUERY";
+    readonly Options: "OPTIONS";
+    readonly Head: "HEAD";
 };
 export type Method = (typeof Method)[keyof typeof Method];
 export declare const StatusFilter: {

package/dist/commonjs/types/enums.js

@@ -19,6 +19,9 @@ exports.Method = {
     Put: 'PUT',
     Patch: 'PATCH',
     Delete: 'DELETE',
+    Query: 'QUERY',
+    Options: 'OPTIONS',
+    Head: 'HEAD',
 };
 exports.StatusFilter = {
     All: 'ALL',

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

@@ -44,7 +44,7 @@ const NetworkDetail = React.memo(() => {
         return null;
     return (<View style={{ flex: 1 }}>
       
-      <View style={{ paddingHorizontal: 6, paddingTop: 4 }}>
+      <View style={{ paddingHorizontal: 8, paddingTop: 4 }}>
         <View style={styles.detailInfoBar}>
           {(() => {
             let schemeStr = '';
@@ -94,6 +94,7 @@ const NetworkDetail = React.memo(() => {
                     gap: 6,
                     flexWrap: 'wrap',
                     flex: 1,
+                    minWidth: 0,
                 }}>
                     
                     <View style={[

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

@@ -0,0 +1,19 @@
+import React from 'react';
+export interface NetworkFilterState {
+    statusCodes: Set<string>;
+    methods: Set<string>;
+    latency: 'all' | 'fast' | 'normal' | 'slow';
+    protocol: 'all' | 'https' | 'http';
+    sortBy: 'time_desc' | 'time_asc' | 'duration_desc' | 'duration_asc' | 'size_desc';
+}
+export declare const DEFAULT_NETWORK_FILTERS: NetworkFilterState;
+export declare const isNetworkFiltersDefault: (f: NetworkFilterState) => boolean;
+interface NetworkFilterModalProps {
+    visible: boolean;
+    onClose: () => void;
+    filters: NetworkFilterState;
+    onApply: (filters: NetworkFilterState) => void;
+    searchQuery?: string;
+}
+export declare const NetworkFilterModal: React.FC<NetworkFilterModalProps>;
+export default NetworkFilterModal;