react-native-inapp-inspector 2.5.11 → 2.5.13

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

@@ -0,0 +1,117 @@
+import"react";import{ScrollView as G,StyleSheet as A,Text as C,TouchableOpacity as B,View as T}from"react-native";import{useInspector as v}from"./InspectorContext";import{ChevronIcon as M,EmptyRadarIcon as N,InspectPointerIcon as O,LayersIcon as U,RulerIcon as J,SlidersIcon as X,TrashIcon as Y}from"../NetworkIcons";import P from"../TouchableScale";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as f}from"../../styles/AppFonts";import{triggerNativeHaptic as w}from"../../native/NativeInspector";import{showToast as W}from"../../helpers/toast";import{BoxModelVisualizer as K}from"./BoxModelVisualizer";export const UiInspectorTab=()=>{const{selectedUiElement:S,setSelectedUiElement:D,setIsInspectModeActive:E,setVisible:H,showAlignmentGrid:I,setShowAlignmentGrid:L,uiInspectorHistory:F,clearUiInspectorHistory:V}=v(),z=()=>{w(),H(!1),E(!0),W("Touch anywhere to inspect JSX components")};return<G showsVerticalScrollIndicator={!1}contentContainerStyle={e.container}>
+      
+      <T style={e.heroCard}>
+        <T style={e.heroLeft}>
+          <T style={e.heroIconBadge}>
+            <O color={t.white}size={22}/>
+          </T>
+          <T style={e.heroTextGroup}>
+            <C style={e.heroTitle}>Inspect Elements On Screen</C>
+            <C style={e.heroSubtitle}>
+              Tap, drag, and highlight rendered JSX components to inspect styles, props & box model in real-time.
+            </C>
+          </T>
+        </T>
+
+        <P style={e.heroButton}onPress={z}>
+          <U color={t.brandPurple}size={16}/>
+          <C style={e.heroButtonText}>Start Inspect Mode</C>
+        </P>
+      </T>
+
+      
+      {S?<T style={e.selectedCard}>
+          <T style={e.selectedHeader}>
+            <T style={e.selectedTitleGroup}>
+              <T style={e.tagBadge}>
+                <C style={e.tagBadgeText}>&lt;{S.componentName}&gt;</C>
+              </T>
+              <C style={e.dimensionsBadge}>
+                {Math.round(S.layout.width)} × {Math.round(S.layout.height)} pt
+              </C>
+            </T>
+
+            <T style={e.a11yScoreBadge}>
+              <C style={[e.a11yScoreText,S.a11y.hasValidTouchTarget?e.a11yScoreTextPass:e.a11yScoreTextWarn]}>
+                {S.a11y.hasValidTouchTarget?"A11y Pass":"A11y Warning"}
+              </C>
+            </T>
+          </T>
+
+          
+          <K boxModel={S.boxModel}compact/>
+
+          
+          <T style={e.metricsBar}>
+            <T style={e.metricChip}>
+              <C style={e.metricChipLabel}>Props:</C>
+              <C style={e.metricChipValue}>
+                {Object.keys(S.props).length}
+              </C>
+            </T>
+            <T style={e.metricChip}>
+              <C style={e.metricChipLabel}>Styles:</C>
+              <C style={e.metricChipValue}>
+                {Object.keys(S.flattenedStyles).length}
+              </C>
+            </T>
+            <T style={e.metricChip}>
+              <C style={e.metricChipLabel}>Depth:</C>
+              <C style={e.metricChipValue}>
+                {S.hierarchy.length} levels
+              </C>
+            </T>
+          </T>
+        </T>:<T style={e.emptyCard}>
+          <N color={t.grayTextWeak}size={32}/>
+          <C style={e.emptyCardTitle}>No Element Selected</C>
+          <C style={e.emptyCardSubtitle}>
+            Launch Inspect Mode to select an on-screen JSX component.
+          </C>
+        </T>}
+
+      
+      <T style={e.toolsSection}>
+        <C style={e.sectionHeader}>DESIGN & ALIGNMENT TOOLS</C>
+        <T style={e.toolsGrid}>
+          <B style={[e.toolCard,I&&e.toolCardActive]}onPress={()=>{w(),L(!I)}}>
+            <J color={I?t.brandPurple:t.slate600}size={18}/>
+            <C style={[e.toolCardTitle,I&&e.toolCardTitleActive]}>
+              8pt Grid Guide
+            </C>
+            <C style={e.toolCardSub}>
+              {I?"Enabled":"Disabled"}
+            </C>
+          </B>
+
+          <B style={e.toolCard}onPress={z}>
+            <X color={t.brandPurple}size={18}/>
+            <C style={e.toolCardTitle}>Live Tweaker</C>
+            <C style={e.toolCardSub}>Sandbox Styles</C>
+          </B>
+        </T>
+      </T>
+
+      
+      {F.length>0&&<T style={e.historySection}>
+          <T style={e.historyHeader}>
+            <C style={e.sectionHeader}>RECENTLY INSPECTED ({F.length})</C>
+            <P style={e.clearHistoryBtn}onPress={()=>{w(),V(),W("Cleared inspection history")}}>
+              <Y color={t.grayTextWeak}size={12}/>
+              <C style={e.clearHistoryBtnText}>Clear</C>
+            </P>
+          </T>
+
+          <T style={e.historyList}>
+            {F.map((x,R)=><B key={x.id||R}style={e.historyItem}onPress={()=>{w(),D(x)}}>
+                <T style={e.historyItemLeft}>
+                  <C style={e.historyItemTag}>&lt;{x.componentName}&gt;</C>
+                  <C style={e.historyItemDim}>
+                    {Math.round(x.layout.width)} × {Math.round(x.layout.height)} pt
+                  </C>
+                </T>
+                <M color={t.grayTextWeak}size={12}direction="right"/>
+              </B>)}
+          </T>
+        </T>}
+    </G>};const e=A.create({container:{padding:12,gap:12},heroCard:{backgroundColor:t.brandPurple,borderRadius:14,padding:16,gap:14,shadowColor:t.brandPurple,shadowOffset:{width:0,height:4},shadowOpacity:.25,shadowRadius:8,elevation:4},heroLeft:{flexDirection:"row",gap:12,alignItems:"flex-start"},heroIconBadge:{width:40,height:40,borderRadius:10,backgroundColor:"#FFFFFF22",alignItems:"center",justifyContent:"center"},heroTextGroup:{flex:1},heroTitle:{fontSize:16,fontFamily:f.bold,color:t.white,marginBottom:4},heroSubtitle:{fontSize:12,fontFamily:f.medium,color:"#EEF2FF",lineHeight:17},heroButton:{flexDirection:"row",alignItems:"center",justifyContent:"center",backgroundColor:t.white,paddingVertical:10,borderRadius:10,gap:8},heroButtonText:{fontSize:13,fontFamily:f.bold,color:t.brandPurple},selectedCard:{backgroundColor:t.white,borderRadius:12,padding:14,borderWidth:1,borderColor:t.grayBorderSecondary,gap:10},selectedHeader:{flexDirection:"row",justifyContent:"space-between",alignItems:"center"},selectedTitleGroup:{flexDirection:"row",alignItems:"center",gap:8},tagBadge:{backgroundColor:"#4F46E518",paddingHorizontal:8,paddingVertical:4,borderRadius:6,borderWidth:1,borderColor:"#4F46E533"},tagBadgeText:{fontSize:13,fontFamily:f.bold,color:t.brandPurple},dimensionsBadge:{fontSize:12,fontFamily:f.medium,color:t.grayTextWeak},a11yScoreBadge:{paddingHorizontal:8,paddingVertical:3,borderRadius:5,backgroundColor:t.slate100},a11yScoreText:{fontSize:10,fontFamily:f.bold},a11yScoreTextPass:{color:"#059669"},a11yScoreTextWarn:{color:"#D97706"},metricsBar:{flexDirection:"row",backgroundColor:t.slate50,borderRadius:8,padding:8,justifyContent:"space-around"},metricChip:{flexDirection:"row",gap:4,alignItems:"center"},metricChipLabel:{fontSize:11,fontFamily:f.medium,color:t.grayTextWeak},metricChipValue:{fontSize:11,fontFamily:f.bold,color:t.slate900},emptyCard:{backgroundColor:t.white,borderRadius:12,padding:24,alignItems:"center",justifyContent:"center",borderWidth:1,borderColor:t.grayBorderSecondary,borderStyle:"dashed",gap:6},emptyCardTitle:{fontSize:14,fontFamily:f.semiBold,color:t.slate700,marginTop:4},emptyCardSubtitle:{fontSize:12,fontFamily:f.medium,color:t.grayTextWeak,textAlign:"center"},sectionHeader:{fontSize:10,fontFamily:f.bold,color:t.grayTextWeak,letterSpacing:.8},toolsSection:{gap:8},toolsGrid:{flexDirection:"row",gap:10},toolCard:{flex:1,backgroundColor:t.white,borderRadius:10,padding:12,borderWidth:1,borderColor:t.grayBorderSecondary,gap:4},toolCardActive:{borderColor:t.brandPurple,backgroundColor:"#EEF2FF"},toolCardTitle:{fontSize:12,fontFamily:f.semiBold,color:t.slate900,marginTop:4},toolCardTitleActive:{color:t.brandPurple},toolCardSub:{fontSize:10,fontFamily:f.medium,color:t.grayTextWeak},historySection:{gap:8,marginTop:4},historyHeader:{flexDirection:"row",justifyContent:"space-between",alignItems:"center"},clearHistoryBtn:{flexDirection:"row",alignItems:"center",gap:4},clearHistoryBtnText:{fontSize:10,fontFamily:f.medium,color:t.grayTextWeak},historyList:{backgroundColor:t.white,borderRadius:10,borderWidth:1,borderColor:t.grayBorderSecondary,overflow:"hidden"},historyItem:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",paddingHorizontal:12,paddingVertical:10,borderBottomWidth:1,borderBottomColor:t.slate100},historyItemLeft:{flexDirection:"row",alignItems:"center",gap:8},historyItemTag:{fontSize:12,fontFamily:f.bold,color:t.brandPurple},historyItemDim:{fontSize:11,fontFamily:f.medium,color:t.grayTextWeak}});

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

@@ -0,0 +1,10 @@
+import React from 'react';
+interface UiLiveStyleTweakerProps {
+    componentName: string;
+    originalStyles: Record<string, any>;
+    tweakedStyles: Record<string, any>;
+    onApplyStyle: (key: string, value: any) => void;
+    onResetStyles: () => void;
+}
+export declare const UiLiveStyleTweaker: React.FC<UiLiveStyleTweakerProps>;
+export {};

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

@@ -0,0 +1,148 @@
+import"react";import{ScrollView as G,StyleSheet as M,Text as B,TouchableOpacity as R,View as T}from"react-native";import{AppColors as w}from"../../styles/AppColors";import{AppFonts as S}from"../../styles/AppFonts";import{RotateCcwIcon as O,SlidersIcon as N,CopyIcon as U}from"../NetworkIcons";import W from"../TouchableScale";import{generateStyleSheetSnippet as q}from"../../helpers/uiInspectorEngine";import{triggerNativeHaptic as C}from"../../native/NativeInspector";import{showToast as P}from"../../helpers/toast";import J from"@react-native-clipboard/clipboard";const K=["#4F46E5","#7C3AED","#2563EB","#0D9488","#10B981","#F59E0B","#E11D48","#0F172A","#F8FAFC","#FFFFFF","transparent"];export const UiLiveStyleTweaker=({componentName:k,originalStyles:z,tweakedStyles:D,onApplyStyle:F,onResetStyles:A})=>{const f={...z,...D},I=Object.keys(D).length>0,V=()=>{const x=q(k,f);J.setString(x),C(),P("Copied tweaked StyleSheet to clipboard")},h=(x,E,v=0)=>{const H=typeof f[x]=="number"?f[x]:0,L=Math.max(v,H+E);F(x,L),C()};return<G showsVerticalScrollIndicator={!1}contentContainerStyle={e.container}>
+      
+      <T style={e.topActionsRow}>
+        <T style={e.titleWithBadge}>
+          <N color={w.brandPurple}size={18}/>
+          <B style={e.sectionTitle}>Live Style Sandbox</B>
+          {I&&<T style={e.modifiedBadge}>
+              <B style={e.modifiedBadgeText}>MODIFIED</B>
+            </T>}
+        </T>
+
+        <T style={e.actionButtonsGroup}>
+          {I&&<W style={e.resetButton}onPress={()=>{A(),C(),P("Reset styles to original")}}>
+              <O color="#E11D48"size={14}/>
+              <B style={e.resetButtonText}>Reset</B>
+            </W>}
+
+          <W style={e.exportButton}onPress={V}>
+            <U color={w.white}size={14}/>
+            <B style={e.exportButtonText}>Copy CSS</B>
+          </W>
+        </T>
+      </T>
+
+      
+      <T style={e.card}>
+        <B style={e.cardHeader}>Padding & Margin</B>
+
+        <T style={e.controlRow}>
+          <B style={e.controlLabel}>Padding</B>
+          <T style={e.stepperContainer}>
+            <R style={e.stepperBtn}onPress={()=>h("padding",-2)}>
+              <B style={e.stepperBtnText}>-</B>
+            </R>
+            <B style={e.stepperValue}>{f.padding??0} pt</B>
+            <R style={e.stepperBtn}onPress={()=>h("padding",2)}>
+              <B style={e.stepperBtnText}>+</B>
+            </R>
+          </T>
+        </T>
+
+        <T style={e.controlRow}>
+          <B style={e.controlLabel}>Margin</B>
+          <T style={e.stepperContainer}>
+            <R style={e.stepperBtn}onPress={()=>h("margin",-2)}>
+              <B style={e.stepperBtnText}>-</B>
+            </R>
+            <B style={e.stepperValue}>{f.margin??0} pt</B>
+            <R style={e.stepperBtn}onPress={()=>h("margin",2)}>
+              <B style={e.stepperBtnText}>+</B>
+            </R>
+          </T>
+        </T>
+
+        <T style={e.controlRow}>
+          <B style={e.controlLabel}>Gap</B>
+          <T style={e.stepperContainer}>
+            <R style={e.stepperBtn}onPress={()=>h("gap",-2)}>
+              <B style={e.stepperBtnText}>-</B>
+            </R>
+            <B style={e.stepperValue}>{f.gap??0} pt</B>
+            <R style={e.stepperBtn}onPress={()=>h("gap",2)}>
+              <B style={e.stepperBtnText}>+</B>
+            </R>
+          </T>
+        </T>
+      </T>
+
+      
+      <T style={e.card}>
+        <B style={e.cardHeader}>Borders & Corners</B>
+
+        <T style={e.controlRow}>
+          <B style={e.controlLabel}>Border Radius</B>
+          <T style={e.stepperContainer}>
+            <R style={e.stepperBtn}onPress={()=>h("borderRadius",-2)}>
+              <B style={e.stepperBtnText}>-</B>
+            </R>
+            <B style={e.stepperValue}>{f.borderRadius??0} pt</B>
+            <R style={e.stepperBtn}onPress={()=>h("borderRadius",2)}>
+              <B style={e.stepperBtnText}>+</B>
+            </R>
+          </T>
+        </T>
+
+        <T style={e.controlRow}>
+          <B style={e.controlLabel}>Border Width</B>
+          <T style={e.stepperContainer}>
+            <R style={e.stepperBtn}onPress={()=>h("borderWidth",-1)}>
+              <B style={e.stepperBtnText}>-</B>
+            </R>
+            <B style={e.stepperValue}>{f.borderWidth??0} pt</B>
+            <R style={e.stepperBtn}onPress={()=>h("borderWidth",1)}>
+              <B style={e.stepperBtnText}>+</B>
+            </R>
+          </T>
+        </T>
+      </T>
+
+      
+      <T style={e.card}>
+        <B style={e.cardHeader}>Typography</B>
+
+        <T style={e.controlRow}>
+          <B style={e.controlLabel}>Font Size</B>
+          <T style={e.stepperContainer}>
+            <R style={e.stepperBtn}onPress={()=>h("fontSize",-1,8)}>
+              <B style={e.stepperBtnText}>-</B>
+            </R>
+            <B style={e.stepperValue}>{f.fontSize??14} pt</B>
+            <R style={e.stepperBtn}onPress={()=>h("fontSize",1)}>
+              <B style={e.stepperBtnText}>+</B>
+            </R>
+          </T>
+        </T>
+
+        <T style={e.segmentedRow}>
+          <B style={e.controlLabel}>Weight</B>
+          <T style={e.segmentedGroup}>
+            {["normal","500","600","bold"].map(x=><R key={x}style={[e.segmentItem,f.fontWeight===x&&e.segmentItemActive]}onPress={()=>{F("fontWeight",x),C()}}>
+                <B style={[e.segmentText,f.fontWeight===x&&e.segmentTextActive]}>
+                  {x}
+                </B>
+              </R>)}
+          </T>
+        </T>
+      </T>
+
+      
+      <T style={e.card}>
+        <B style={e.cardHeader}>Background Color</B>
+        <T style={e.paletteGrid}>
+          {K.map(x=><R key={x}style={[e.colorSwatch,{backgroundColor:x},f.backgroundColor===x&&e.colorSwatchActive]}onPress={()=>{F("backgroundColor",x),C()}}/>)}
+        </T>
+      </T>
+
+      
+      <T style={e.card}>
+        <B style={e.cardHeader}>Opacity & Elevation</B>
+        <T style={e.segmentedGroup}>
+          {[1,.8,.6,.4,.2].map(x=><R key={x}style={[e.segmentItem,f.opacity===x&&e.segmentItemActive]}onPress={()=>{F("opacity",x),C()}}>
+              <B style={[e.segmentText,f.opacity===x&&e.segmentTextActive]}>
+                {Math.round(x*100)}%
+              </B>
+            </R>)}
+        </T>
+      </T>
+    </G>};const e=M.create({container:{paddingVertical:6,gap:10},topActionsRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginBottom:4},titleWithBadge:{flexDirection:"row",alignItems:"center",gap:6},sectionTitle:{fontSize:14,fontFamily:S.semiBold,color:w.slate900},modifiedBadge:{backgroundColor:"#F59E0B22",paddingHorizontal:6,paddingVertical:2,borderRadius:4,borderWidth:1,borderColor:"#F59E0B55"},modifiedBadgeText:{fontSize:9,fontFamily:S.bold,color:"#D97706"},actionButtonsGroup:{flexDirection:"row",gap:8},resetButton:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:"#E11D4811",borderWidth:1,borderColor:"#E11D4833",paddingHorizontal:8,paddingVertical:5,borderRadius:6},resetButtonText:{fontSize:11,fontFamily:S.semiBold,color:"#E11D48"},exportButton:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:w.brandPurple,paddingHorizontal:10,paddingVertical:5,borderRadius:6},exportButtonText:{fontSize:11,fontFamily:S.semiBold,color:w.white},card:{backgroundColor:w.white,borderRadius:12,padding:12,borderWidth:1,borderColor:w.grayBorderSecondary,gap:8},cardHeader:{fontSize:12,fontFamily:S.semiBold,color:w.slate700,marginBottom:2},controlRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center"},controlLabel:{fontSize:12,fontFamily:S.medium,color:w.slate600},stepperContainer:{flexDirection:"row",alignItems:"center",gap:8,backgroundColor:w.slate50,borderRadius:6,padding:2},stepperBtn:{width:28,height:28,backgroundColor:w.white,borderRadius:5,alignItems:"center",justifyContent:"center",borderWidth:1,borderColor:w.grayBorderSecondary},stepperBtnText:{fontSize:15,fontFamily:S.bold,color:w.slate900},stepperValue:{fontSize:12,fontFamily:S.semiBold,color:w.slate900,minWidth:44,textAlign:"center"},segmentedRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center"},segmentedGroup:{flexDirection:"row",backgroundColor:w.slate100,borderRadius:8,padding:2,gap:2},segmentItem:{paddingHorizontal:10,paddingVertical:5,borderRadius:6},segmentItemActive:{backgroundColor:w.brandPurple},segmentText:{fontSize:11,fontFamily:S.medium,color:w.slate600},segmentTextActive:{color:w.white,fontFamily:S.semiBold},paletteGrid:{flexDirection:"row",flexWrap:"wrap",gap:8},colorSwatch:{width:28,height:28,borderRadius:6,borderWidth:1,borderColor:w.grayBorderSecondary},colorSwatchActive:{borderColor:w.brandPurple,borderWidth:3}});

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

@@ -0,0 +1,28 @@
+export { default as MainScreen } from './MainScreen';
+export { default as TabBar } from './TabBar';
+export { default as InspectorHeader } from './InspectorHeader';
+export { default as FabLauncher } from './FabLauncher';
+export { default as NetworkTab } from './NetworkTab';
+export { default as NetworkDetail } from './NetworkDetail';
+export { default as ConsoleTab } from './ConsoleTab';
+export { default as LogDetail } from './LogDetail';
+export { PerformanceTab } from './PerformanceTab';
+export { default as AnalyticsTab } from './AnalyticsTab';
+export { default as ReduxTab } from './ReduxTab';
+export { default as ReduxDetail } from './ReduxDetail';
+export { default as CrashTab } from './CrashTab';
+export { default as CrashDetail } from './CrashDetail';
+export { default as PushTab } from './PushTab';
+export { default as PushDetail } from './PushDetail';
+export { default as SocketTab } from './SocketTab';
+export { default as SocketDetail } from './SocketDetail';
+export { default as DeviceInfoTab } from './DeviceInfoTab';
+export { default as StorageTab } from './StorageTab';
+export { default as DebuggingTab } from './DebuggingTab';
+export { MediaGalleryTab } from './MediaGalleryTab';
+export { default as SettingsPanel } from './SettingsPanel';
+export { UiInspectorTab } from './UiInspectorTab';
+export { UiInspectorDetail } from './UiInspectorDetail';
+export { UiInspectorOverlay } from './UiInspectorOverlay';
+export { BoxModelVisualizer } from './BoxModelVisualizer';
+export { UiA11yAuditPanel } from './UiA11yAuditPanel';

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

@@ -0,0 +1 @@
+export{default as MainScreen}from"./MainScreen";export{default as TabBar}from"./TabBar";export{default as InspectorHeader}from"./InspectorHeader";export{default as FabLauncher}from"./FabLauncher";export{default as NetworkTab}from"./NetworkTab";export{default as NetworkDetail}from"./NetworkDetail";export{default as ConsoleTab}from"./ConsoleTab";export{default as LogDetail}from"./LogDetail";export{PerformanceTab}from"./PerformanceTab";export{default as AnalyticsTab}from"./AnalyticsTab";export{default as ReduxTab}from"./ReduxTab";export{default as ReduxDetail}from"./ReduxDetail";export{default as CrashTab}from"./CrashTab";export{default as CrashDetail}from"./CrashDetail";export{default as PushTab}from"./PushTab";export{default as PushDetail}from"./PushDetail";export{default as SocketTab}from"./SocketTab";export{default as SocketDetail}from"./SocketDetail";export{default as DeviceInfoTab}from"./DeviceInfoTab";export{default as StorageTab}from"./StorageTab";export{default as DebuggingTab}from"./DebuggingTab";export{MediaGalleryTab}from"./MediaGalleryTab";export{default as SettingsPanel}from"./SettingsPanel";export{UiInspectorTab}from"./UiInspectorTab";export{UiInspectorDetail}from"./UiInspectorDetail";export{UiInspectorOverlay}from"./UiInspectorOverlay";export{BoxModelVisualizer}from"./BoxModelVisualizer";export{UiA11yAuditPanel}from"./UiA11yAuditPanel";

package/dist/esm/components/LogCard.js

@@ -1,113 +1,118 @@
-import te,{useEffect as oe,useRef as ne,useMemo as le}from"react";import{Alert as v,Animated as W,Linking as ie,View as C,Pressable as E,Text as T,StyleSheet as A}from"react-native";import Ce,{Path as Te}from"react-native-svg";import{AppColors as e}from"../styles/AppColors";import{METHOD_COLORS as U}from"../constants";import{getStatusColor as Se,getDurationColor as Be,formatDateTime as Re,getSize as He,getPath as Ve,getBaseUrl as ze}from"../helpers";import{CalendarIcon as Ie,ClockIcon as N,SizeIcon as Le,CircleCheckIcon as $e,CircleAlertIcon as De,CircleXIcon as Oe,RepeatIcon as We,ForwardChevronIcon as Fe,GlobeIcon as Pe}from"./NetworkIcons";import{AppFonts as S}from"../styles/AppFonts";import G from"./HighlightText";import Me from"./TouchableScale";import{useTranslation as ve}from"../i18n";function Ee({item:r,onPress:B,timelineMinStart:Ue,timelineTotalRange:qe,isNew:L,isSelected:F,onToggleSelect:J,searchStr:P,testID:K}){const{t:R}=ve(),j=U[r.method]??U.ALL,V=le(()=>{try{const o=new URL(r.url),O=o.host,M=o.pathname+(o.search?o.search:""),re=o.protocol==="https:";return{host:O,path:M||"/",isHttps:re}}catch{const o=r.url.toLowerCase().startsWith("https:"),O=Ve(r.url);return{host:ze(r.url).replace(/^https?:\/\//,""),path:O||r.url,isHttps:o}}},[r.url]),Q=o=>{o?.stopPropagation?.(),v.alert(R("common.openInBrowser")||"Open in Browser",`${R("common.openInBrowserPrompt")||"Are you sure you want to open this URL in your external browser?"}
+import re,{useEffect as ne,useRef as le,useMemo as ie}from"react";import{Alert as E,Animated as O,Linking as ae,View as C,Pressable as D,Text as T,StyleSheet as U}from"react-native";import Ce,{Path as Te}from"react-native-svg";import{AppColors as e}from"../styles/AppColors";import{METHOD_COLORS as A}from"../constants";import{getStatusColor as Se,getDurationColor as Be,formatDateTime as Re,getSize as He,getPath as Ve,getBaseUrl as ze,openWithPostman as q}from"../helpers";import{CalendarIcon as Ie,ClockIcon as N,SizeIcon as Le,CircleCheckIcon as Pe,CircleAlertIcon as $e,CircleXIcon as We,RepeatIcon as Oe,ForwardChevronIcon as De,GlobeIcon as Fe,PostmanIcon as Me}from"./NetworkIcons";import{AppFonts as S}from"../styles/AppFonts";import G from"./HighlightText";import Ee from"./TouchableScale";import{useTranslation as Ue}from"../i18n";function Ae({item:t,onPress:B,timelineMinStart:Ne,timelineTotalRange:Ge,isNew:L,isSelected:F,onToggleSelect:J,searchStr:j,testID:K}){const{t:R}=Ue(),M=A[t.method]??A.ALL,V=ie(()=>{try{const r=new URL(t.url),W=r.host,v=r.pathname+(r.search?r.search:""),oe=r.protocol==="https:";return{host:W,path:v||"/",isHttps:oe}}catch{const r=t.url.toLowerCase().startsWith("https:"),W=Ve(t.url);return{host:ze(t.url).replace(/^https?:\/\//,""),path:W||t.url,isHttps:r}}},[t.url]),Q=r=>{r?.stopPropagation?.(),E.alert(R("common.openInBrowser")||"Open URL",`${R("common.openInBrowserPrompt")||"Choose how you want to open or inspect this URL:"}
 
-${r.url}`,[{text:R("common.cancel")||"Cancel",style:"cancel"},{text:R("common.open")||"Open",onPress:()=>{ie.openURL(r.url).catch(()=>{v.alert(R("common.error")||"Error",R("common.cannotOpenUrl")||"Could not open URL")})}}])},H=r.status===0||r.status!=null&&r.status>=400,z=r.status==null,$=Se(r.status),I=Be(r.duration),X=z?e.darkOrange:H?e.errorColor:e.greenColor,D=ne(new W.Value(L?.35:0)).current;oe(()=>{L&&W.timing(D,{toValue:0,duration:1200,useNativeDriver:!0}).start()},[L,D]);const _=()=>{if(z)return"...";if(r.status===0||r.status==null)return R("network.statusFailed")||"FAILED";const o=typeof r.status=="number"?r.status:parseInt(String(r.status||0),10);return o===200?"200 OK":o===201?"201 Created":o===204?"204 No Content":o===304?"304 Not Modified":o===400?"400 Bad Req":o===401?"401 Unauth":o===403?"403 Forbidden":o===404?"404 Not Found":o===500?"500 Error":String(r.status)},Y=()=>{if(z)return<N color={e.darkOrange}size={10}/>;const o=typeof r.status=="number"?r.status:parseInt(String(r.status||0),10);return o>=200&&o<300?<$e color={e.greenColor}size={10}/>:o>=300&&o<400?<We color={e.amber700}size={10}/>:o>=400&&o<500?<De color={e.darkOrange}size={10}/>:<Oe color={e.errorColor}size={10}/>},Z=Re(r.startTime),ee=r.url.split("?")[0].toLowerCase().endsWith(".json");return<C style={t.container}>
-      <Me testID={K}onPress={B}style={[t.card,{borderLeftWidth:3.5,borderLeftColor:X,backgroundColor:H?e.errorCardBg:e.white}]}>
-        <C style={t.cardBody}>
+${t.url}`,[{text:R("common.cancel")||"Cancel",style:"cancel"},{text:"Open in Postman",onPress:()=>q(t)},{text:R("common.open")||"Browser",onPress:()=>{ae.openURL(t.url).catch(()=>{E.alert(R("common.error")||"Error",R("common.cannotOpenUrl")||"Could not open URL")})}}])},X=r=>{r?.stopPropagation?.(),q(t)},H=t.status===0||t.status!=null&&t.status>=400,z=t.status==null,P=Se(t.status),I=Be(t.duration),_=z?e.darkOrange:H?e.errorColor:e.greenColor,$=le(new O.Value(L?.35:0)).current;ne(()=>{L&&O.timing($,{toValue:0,duration:1200,useNativeDriver:!0}).start()},[L,$]);const Y=()=>{if(z)return"...";if(t.status===0||t.status==null)return R("network.statusFailed")||"FAILED";const r=typeof t.status=="number"?t.status:parseInt(String(t.status||0),10);return r===200?"200 OK":r===201?"201 Created":r===204?"204 No Content":r===304?"304 Not Modified":r===400?"400 Bad Req":r===401?"401 Unauth":r===403?"403 Forbidden":r===404?"404 Not Found":r===500?"500 Error":String(t.status)},Z=()=>{if(z)return<N color={e.darkOrange}size={10}/>;const r=typeof t.status=="number"?t.status:parseInt(String(t.status||0),10);return r>=200&&r<300?<Pe color={e.greenColor}size={10}/>:r>=300&&r<400?<Oe color={e.amber700}size={10}/>:r>=400&&r<500?<$e color={e.darkOrange}size={10}/>:<We color={e.errorColor}size={10}/>},ee=Re(t.startTime),te=t.url.split("?")[0].toLowerCase().endsWith(".json");return<C style={o.container}>
+      <Ee testID={K}onPress={B}style={[o.card,{borderLeftWidth:3.5,borderLeftColor:_,backgroundColor:H?e.errorCardBg:e.white}]}>
+        <C style={o.cardBody}>
           
-          <C style={t.cardHeaderRow}>
-            <C style={t.cardHeaderLeft}>
-              <E onPress={()=>J(r.id)}hitSlop={12}style={[t.smallCheckbox,F&&t.smallCheckboxChecked]}>
+          <C style={o.cardHeaderRow}>
+            <C style={o.cardHeaderLeft}>
+              <D onPress={()=>J(t.id)}hitSlop={12}style={[o.smallCheckbox,F&&o.smallCheckboxChecked]}>
                 {F&&<Ce width={9}height={9}viewBox="0 0 24 24"fill="none">
                     <Te d="M20 6L9 17l-5-5"stroke={e.white}strokeWidth="4"strokeLinecap="round"strokeLinejoin="round"/>
                   </Ce>}
-              </E>
+              </D>
 
-              <T style={t.serialNumber}>#{r.id+1}</T>
+              <T style={o.serialNumber}>#{t.id+1}</T>
 
-              <C style={[t.methodBadge,{backgroundColor:j}]}>
-                <T style={t.methodBadgeText}>
-                  {r.method}
+              <C style={[o.methodBadge,{backgroundColor:M}]}>
+                <T style={o.methodBadgeText}>
+                  {t.method}
                 </T>
               </C>
 
-              {r.client&&<C style={[t.chip,{backgroundColor:r.client==="axios"?`${e.purple}14`:r.client==="apollo"||r.client==="graphql"?`${e.pink500}14`:r.client==="xhr"?`${e.amber500}14`:`${e.sky500}14`,borderColor:r.client==="axios"?`${e.purple}30`:r.client==="apollo"||r.client==="graphql"?`${e.pink500}30`:r.client==="xhr"?`${e.amber500}30`:`${e.sky500}30`}]}>
-                  <T style={[t.chipText,{color:r.client==="axios"?e.purple:r.client==="apollo"||r.client==="graphql"?e.pink500:r.client==="xhr"?e.amber700:e.sky600}]}>
-                    {r.client.toUpperCase()}
+              {t.client&&<C style={[o.chip,{backgroundColor:t.client==="axios"?`${e.purple}14`:t.client==="apollo"||t.client==="graphql"?`${e.pink500}14`:t.client==="xhr"?`${e.amber500}14`:`${e.sky500}14`,borderColor:t.client==="axios"?`${e.purple}30`:t.client==="apollo"||t.client==="graphql"?`${e.pink500}30`:t.client==="xhr"?`${e.amber500}30`:`${e.sky500}30`}]}>
+                  <T style={[o.chipText,{color:t.client==="axios"?e.purple:t.client==="apollo"||t.client==="graphql"?e.pink500:t.client==="xhr"?e.amber700:e.sky600}]}>
+                    {t.client.toUpperCase()}
                   </T>
                 </C>}
 
               
-              {(r.url.toLowerCase().includes("graphql")||r.client==="apollo"||r.client==="graphql")&&<C style={[t.chip,{backgroundColor:e.roseBg,borderColor:e.roseBorder}]}>
-                  <T style={[t.chipText,{color:e.pink600}]}>
+              {(t.url.toLowerCase().includes("graphql")||t.client==="apollo"||t.client==="graphql")&&<C style={[o.chip,{backgroundColor:e.roseBg,borderColor:e.roseBorder}]}>
+                  <T style={[o.chipText,{color:e.pink600}]}>
                     GQL
                   </T>
                 </C>}
             </C>
 
-            <C style={t.cardHeaderRight}>
-              <C style={[t.statusPill,{backgroundColor:H?`${e.errorColor}14`:z?`${e.darkOrange}14`:`${$}14`,borderColor:H?`${e.errorColor}33`:z?`${e.darkOrange}33`:`${$}33`}]}>
-                {Y()}
-                <T style={[t.statusPillText,{color:H?e.errorColor:z?e.darkOrange:$}]}>
-                  {_()}
+            <C style={o.cardHeaderRight}>
+              <C style={[o.statusPill,{backgroundColor:H?`${e.errorColor}14`:z?`${e.darkOrange}14`:`${P}14`,borderColor:H?`${e.errorColor}33`:z?`${e.darkOrange}33`:`${P}33`}]}>
+                {Z()}
+                <T style={[o.statusPillText,{color:H?e.errorColor:z?e.darkOrange:P}]}>
+                  {Y()}
                 </T>
               </C>
-              <E onPress={Q}hitSlop={8}style={t.globeBtn}accessibilityRole="button"accessibilityLabel="Open in Browser">
-                <Pe color={e.grayTextWeak}size={12}/>
-              </E>
-              <Fe color={e.grayTextWeak}size={13}/>
+              <D onPress={Q}hitSlop={{top:6,bottom:6,left:3,right:3}}style={o.globeBtn}accessibilityRole="button"accessibilityLabel="Open in Browser">
+                <Fe color={e.grayTextWeak}size={12}/>
+              </D>
+              <D onPress={X}hitSlop={{top:6,bottom:6,left:3,right:3}}style={[o.globeBtn,{backgroundColor:"rgba(255, 108, 55, 0.12)",borderColor:"rgba(255, 108, 55, 0.28)"}]}accessibilityRole="button"accessibilityLabel="Open with Postman">
+                <Me color="#FF6C37"size={11}/>
+              </D>
+              <C style={o.chevronWrapper}>
+                <De color={e.grayTextWeak}size={13}/>
+              </C>
             </C>
           </C>
 
           
-          <C style={t.urlBox}>
+          <C style={o.urlBox}>
             
-            <C style={t.urlMainRow}>
-              <C style={t.hostRow}>
-                <C style={[t.protoBadge,{backgroundColor:V.isHttps?`${e.emerald600}12`:`${e.amber600}12`,borderColor:V.isHttps?`${e.emerald600}2B`:`${e.amber600}2B`}]}>
-                  <T style={[t.protoBadgeText,{color:V.isHttps?e.emerald600:e.amber700}]}>
+            <C style={o.urlMainRow}>
+              <C style={o.hostRow}>
+                <C style={[o.protoBadge,{backgroundColor:V.isHttps?`${e.emerald600}12`:`${e.amber600}12`,borderColor:V.isHttps?`${e.emerald600}2B`:`${e.amber600}2B`}]}>
+                  <T style={[o.protoBadgeText,{color:V.isHttps?e.emerald600:e.amber700}]}>
                     {V.isHttps?"HTTPS":"HTTP"}
                   </T>
                 </C>
-                <G text={V.host||r.url}search={P}style={t.hostText}highlightStyle={t.highlight}numberOfLines={1}ellipsizeMode="tail"/>
+                <G text={V.host||t.url}search={j}style={o.hostText}highlightStyle={o.highlight}numberOfLines={1}ellipsizeMode="tail"/>
               </C>
-              <C style={t.urlBadgeRow}>
-                {ee&&<C style={t.jsonBadge}>
-                    <T style={t.jsonBadgeText}>.json</T>
+              <C style={o.urlBadgeRow}>
+                {te&&<C style={o.jsonBadge}>
+                    <T style={o.jsonBadgeText}>.json</T>
                   </C>}
-                {r.duplicateCount!=null&&r.duplicateCount>1&&<C style={t.dupBadge}>
-                    <T style={t.dupBadgeText}>×{r.duplicateCount}</T>
+                {t.duplicateCount!=null&&t.duplicateCount>1&&<C style={o.dupBadge}>
+                    <T style={o.dupBadgeText}>×{t.duplicateCount}</T>
                   </C>}
               </C>
             </C>
 
             
-            <C style={t.slugRow}>
-              <G text={V.path}search={P}style={t.pathText}highlightStyle={t.highlight}numberOfLines={1}ellipsizeMode="middle"/>
+            <C style={o.slugRow}>
+              <G text={V.path}search={j}style={o.pathText}highlightStyle={o.highlight}numberOfLines={1}ellipsizeMode="middle"/>
             </C>
           </C>
 
           
-          <C style={t.cardFooterRow}>
-            <C style={t.footerLeft}>
-              <C style={t.cardDateRow}>
+          <C style={o.cardFooterRow}>
+            <C style={o.footerLeft}>
+              <C style={o.cardDateRow}>
                 <Ie color={e.grayTextWeak}size={10}/>
-                <T style={t.cardDateText}numberOfLines={1}>{Z}</T>
+                <T style={o.cardDateText}numberOfLines={1}>{ee}</T>
               </C>
             </C>
 
-            <C style={t.footerRight}>
-              {r.response!=null&&<C style={t.metaStatChip}>
+            <C style={o.footerRight}>
+              {t.response!=null&&<C style={o.metaStatChip}>
                   <Le color={e.purple}size={9}/>
-                  <T style={t.metaStatText}>
-                    {He(r.response)}
+                  <T style={o.metaStatText}>
+                    {He(t.response)}
                   </T>
                 </C>}
 
-              {r.duration!=null&&!H&&<C style={[t.metaStatChip,{backgroundColor:`${I}12`,borderColor:`${I}2E`}]}>
+              {t.duration!=null&&!H&&<C style={[o.metaStatChip,{backgroundColor:`${I}12`,borderColor:`${I}2E`}]}>
                   <N color={I}size={9}/>
-                  <T style={[t.metaStatText,{color:I}]}>
-                    {r.duration}ms
+                  <T style={[o.metaStatText,{color:I}]}>
+                    {t.duration}ms
                   </T>
                 </C>}
             </C>
           </C>
 
           
-          <C style={t.waterfallContainer}>
-            {typeof r.duration=="number"&&r.duration>0&&!H&&<C style={[t.waterfallBar,{width:`${Math.min(100,Math.max(6,r.duration/1200*100))}%`,backgroundColor:I}]}/>}
+          <C style={o.waterfallContainer}>
+            {typeof t.duration=="number"&&t.duration>0&&!H&&<C style={[o.waterfallBar,{width:`${Math.min(100,Math.max(6,t.duration/1200*100))}%`,backgroundColor:I}]}/>}
           </C>
         </C>
 
-        {L&&<W.View pointerEvents="none"style={[A.absoluteFill,{backgroundColor:j,opacity:D}]}/>}
-      </Me>
-    </C>}const t=A.create({container:{paddingHorizontal:8,paddingVertical:4,height:126,justifyContent:"center"},card:{height:118,alignSelf:"stretch",borderRadius:10,overflow:"hidden",borderWidth:1,borderColor:e.dividerColor,shadowColor:e.shadowColorString},cardBody:{height:"100%",paddingHorizontal:8,paddingTop:8,paddingBottom:6,justifyContent:"space-between"},cardHeaderRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",height:22,minHeight:22,maxHeight:22},cardHeaderLeft:{flexDirection:"row",alignItems:"center",flex:1,marginRight:4,gap:4.5,minWidth:0,overflow:"hidden"},cardHeaderRight:{flexDirection:"row",alignItems:"center",gap:4,flexShrink:0},smallCheckbox:{width:15,height:15,borderRadius:4,borderWidth:1.5,borderColor:e.grayTextWeak,alignItems:"center",justifyContent:"center",backgroundColor:e.white},smallCheckboxChecked:{backgroundColor:e.purple,borderColor:e.purple},serialNumber:{fontFamily:S.interBold,color:e.grayTextWeak,fontSize:10},methodBadge:{paddingHorizontal:6,paddingVertical:2,borderRadius:5,alignItems:"center",justifyContent:"center"},methodBadgeText:{fontFamily:S.interBold,fontSize:9.5,lineHeight:12,letterSpacing:.5,color:e.white},chip:{paddingHorizontal:5.5,paddingVertical:1.5,borderRadius:4,borderWidth:1},chipText:{fontFamily:S.interBold,fontSize:9,lineHeight:12},statusPill:{flexDirection:"row",alignItems:"center",gap:3.5,paddingHorizontal:6,paddingVertical:2,borderRadius:6,borderWidth:1,flexShrink:0},statusPillText:{fontFamily:S.interBold,fontSize:9.5,lineHeight:12},globeBtn:{padding:3,borderRadius:4,backgroundColor:`${e.grayTextWeak}12`,alignItems:"center",justifyContent:"center"},urlBox:{backgroundColor:e.grayBackground,borderRadius:7,borderWidth:1,borderColor:e.dividerColor,paddingHorizontal:7,paddingVertical:4.5,height:48,minHeight:48,maxHeight:48,justifyContent:"center",gap:2.5,overflow:"hidden"},urlMainRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:4,minHeight:16},hostRow:{flexDirection:"row",alignItems:"center",gap:5,flex:1,minWidth:0},protoBadge:{paddingHorizontal:4,paddingVertical:1,borderRadius:3.5,borderWidth:1},protoBadgeText:{fontFamily:S.interBold,fontSize:8,lineHeight:10},hostText:{fontFamily:S.interBold,fontSize:11.5,lineHeight:15,color:e.primaryBlack,flex:1},urlBadgeRow:{flexDirection:"row",alignItems:"center",gap:4,flexShrink:0},jsonBadge:{backgroundColor:`${e.darkOrange}14`,borderColor:`${e.darkOrange}2E`,borderWidth:1,paddingHorizontal:4.5,paddingVertical:1,borderRadius:3.5},jsonBadgeText:{fontFamily:S.interBold,fontSize:8.5,color:e.darkOrange},dupBadge:{backgroundColor:`${e.purple}14`,borderColor:`${e.purple}2E`,borderWidth:1,paddingHorizontal:4.5,paddingVertical:1,borderRadius:3.5},dupBadgeText:{fontFamily:S.interBold,fontSize:8.5,color:e.purple},slugRow:{flexDirection:"row",alignItems:"center",minHeight:15},pathText:{fontFamily:S.interMedium,fontSize:10.5,lineHeight:14,color:e.slate600||e.grayText,flex:1},highlight:{backgroundColor:e.yellowHighlight,color:e.primaryBlack,borderRadius:2},cardFooterRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",height:18,minHeight:18,maxHeight:18,gap:4},footerLeft:{flexDirection:"row",alignItems:"center",gap:4.5,flex:1,minWidth:0,overflow:"hidden"},footerRight:{flexDirection:"row",alignItems:"center",gap:4,flexShrink:0},cardDateRow:{flexDirection:"row",alignItems:"center",gap:3.5},cardDateText:{fontFamily:S.interRegular,fontSize:10,lineHeight:13,color:e.slate400},metaStatChip:{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:e.violetSoftBg,borderColor:e.violetSoftBorder,borderWidth:1,paddingHorizontal:5.5,paddingVertical:1.5,borderRadius:4},metaStatText:{fontFamily:S.interBold,color:e.violetSoftText,fontSize:9,lineHeight:12},waterfallContainer:{height:2.5,width:"100%",backgroundColor:e.graySurface,borderRadius:1.5,overflow:"hidden",marginTop:2},waterfallBar:{height:"100%",borderRadius:1.5}});function Ae(r,B){return r.item===B.item&&r.isSelected===B.isSelected&&r.isNew===B.isNew&&r.searchStr===B.searchStr&&r.timelineMinStart===B.timelineMinStart&&r.timelineTotalRange===B.timelineTotalRange&&r.onPress===B.onPress&&r.onToggleSelect===B.onToggleSelect}export default te.memo(Ee,Ae);
+        {L&&<O.View pointerEvents="none"style={[U.absoluteFill,{backgroundColor:M,opacity:$}]}/>}
+      </Ee>
+    </C>}const o=U.create({container:{paddingHorizontal:8,paddingVertical:4,height:126,justifyContent:"center"},card:{height:118,alignSelf:"stretch",borderRadius:10,overflow:"hidden",borderWidth:1,borderColor:e.dividerColor,shadowColor:e.shadowColorString},cardBody:{height:"100%",paddingHorizontal:8,paddingTop:8,paddingBottom:6,justifyContent:"space-between"},cardHeaderRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",height:22,minHeight:22,maxHeight:22},cardHeaderLeft:{flexDirection:"row",alignItems:"center",flex:1,marginRight:4,gap:4.5,minWidth:0,overflow:"hidden"},cardHeaderRight:{flexDirection:"row",alignItems:"center",gap:7,flexShrink:0},smallCheckbox:{width:15,height:15,borderRadius:4,borderWidth:1.5,borderColor:e.grayTextWeak,alignItems:"center",justifyContent:"center",backgroundColor:e.white},smallCheckboxChecked:{backgroundColor:e.purple,borderColor:e.purple},serialNumber:{fontFamily:S.interBold,color:e.grayTextWeak,fontSize:10},methodBadge:{paddingHorizontal:6,paddingVertical:2,borderRadius:5,alignItems:"center",justifyContent:"center"},methodBadgeText:{fontFamily:S.interBold,fontSize:9.5,lineHeight:12,letterSpacing:.5,color:e.white},chip:{paddingHorizontal:5.5,paddingVertical:1.5,borderRadius:4,borderWidth:1},chipText:{fontFamily:S.interBold,fontSize:9,lineHeight:12},statusPill:{flexDirection:"row",alignItems:"center",gap:3.5,paddingHorizontal:6,paddingVertical:2,borderRadius:6,borderWidth:1,flexShrink:0},statusPillText:{fontFamily:S.interBold,fontSize:9.5,lineHeight:12},globeBtn:{width:26,height:22,borderRadius:5,backgroundColor:`${e.grayTextWeak}14`,borderWidth:1,borderColor:`${e.grayTextWeak}28`,alignItems:"center",justifyContent:"center"},chevronWrapper:{paddingLeft:2,alignItems:"center",justifyContent:"center"},urlBox:{backgroundColor:e.grayBackground,borderRadius:7,borderWidth:1,borderColor:e.dividerColor,paddingHorizontal:7,paddingVertical:4.5,height:48,minHeight:48,maxHeight:48,justifyContent:"center",gap:2.5,overflow:"hidden"},urlMainRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:4,minHeight:16},hostRow:{flexDirection:"row",alignItems:"center",gap:5,flex:1,minWidth:0},protoBadge:{paddingHorizontal:4,paddingVertical:1,borderRadius:3.5,borderWidth:1},protoBadgeText:{fontFamily:S.interBold,fontSize:8,lineHeight:10},hostText:{fontFamily:S.interBold,fontSize:11.5,lineHeight:15,color:e.primaryBlack,flex:1},urlBadgeRow:{flexDirection:"row",alignItems:"center",gap:4,flexShrink:0},jsonBadge:{backgroundColor:`${e.darkOrange}14`,borderColor:`${e.darkOrange}2E`,borderWidth:1,paddingHorizontal:4.5,paddingVertical:1,borderRadius:3.5},jsonBadgeText:{fontFamily:S.interBold,fontSize:8.5,color:e.darkOrange},dupBadge:{backgroundColor:`${e.purple}14`,borderColor:`${e.purple}2E`,borderWidth:1,paddingHorizontal:4.5,paddingVertical:1,borderRadius:3.5},dupBadgeText:{fontFamily:S.interBold,fontSize:8.5,color:e.purple},slugRow:{flexDirection:"row",alignItems:"center",minHeight:15},pathText:{fontFamily:S.interMedium,fontSize:10.5,lineHeight:14,color:e.slate600||e.grayText,flex:1},highlight:{backgroundColor:e.yellowHighlight,color:e.primaryBlack,borderRadius:2},cardFooterRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",height:18,minHeight:18,maxHeight:18,gap:4},footerLeft:{flexDirection:"row",alignItems:"center",gap:4.5,flex:1,minWidth:0,overflow:"hidden"},footerRight:{flexDirection:"row",alignItems:"center",gap:4,flexShrink:0},cardDateRow:{flexDirection:"row",alignItems:"center",gap:3.5},cardDateText:{fontFamily:S.interRegular,fontSize:10,lineHeight:13,color:e.slate400},metaStatChip:{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:e.violetSoftBg,borderColor:e.violetSoftBorder,borderWidth:1,paddingHorizontal:5.5,paddingVertical:1.5,borderRadius:4},metaStatText:{fontFamily:S.interBold,color:e.violetSoftText,fontSize:9,lineHeight:12},waterfallContainer:{height:2.5,width:"100%",backgroundColor:e.graySurface,borderRadius:1.5,overflow:"hidden",marginTop:2},waterfallBar:{height:"100%",borderRadius:1.5}});function qe(t,B){return t.item===B.item&&t.isSelected===B.isSelected&&t.isNew===B.isNew&&t.searchStr===B.searchStr&&t.timelineMinStart===B.timelineMinStart&&t.timelineTotalRange===B.timelineTotalRange&&t.onPress===B.onPress&&t.onToggleSelect===B.onToggleSelect}export default re.memo(Ae,qe);

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

@@ -58,6 +58,7 @@ export declare const WipeIcon: ({ color, size }: IconProps) => React.JSX.Element
 export declare const LayersIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const UserIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const InfoCircleIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const PostmanIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const WarningTriangleIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const ErrorCircleIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const TrendingUpIcon: ({ color, size, }: IconProps) => React.JSX.Element;
@@ -232,3 +233,8 @@ export declare const ArrowForwardIcon: ({ color, size }: IconProps) => React.JSX
 export declare const ScaleBalanceIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const VolumeMuteIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const ShieldBanIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const SpeedometerIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const CpuChipIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const PulseGraphIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const GaugeIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const MemoryRamIcon: ({ color, size }: IconProps) => React.JSX.Element;

package/dist/esm/components/NetworkIcons.js

@@ -146,6 +146,8 @@ import"react";import W,{Circle as M,Ellipse as T,Line as S,Path as L,Polygon as
     </W>,InfoCircleIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
       <M cx="12"cy="12"r="9"stroke={e}strokeWidth="2"/>
       <L d="M12 16v-4M12 8.5h.01"stroke={e}strokeWidth="2.2"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,PostmanIcon=({color:e="#FF6C37",size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M21.5 2.5L10.5 13.5M21.5 2.5L14.5 21.5L10.5 13.5M21.5 2.5L2.5 9.5L10.5 13.5"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
     </W>,WarningTriangleIcon=({color:e=p.grayTextWeak,size:t=12})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
       <L d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
       <L d="M12 9v4M12 17h.01"stroke={e}strokeWidth="2"strokeLinecap="round"/>
@@ -767,4 +769,34 @@ import"react";import W,{Circle as M,Ellipse as T,Line as S,Path as L,Polygon as
   </W>,ShieldBanIcon=({color:e=p.white,size:t=16})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
     <L d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
     <S x1="4.5"y1="4.5"x2="19.5"y2="19.5"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+  </W>,SpeedometerIcon=({color:e=p.white,size:t=16})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <L d="M12 2a10 10 0 0 0-7.07 17.07L12 12l5.07-5.07"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    <L d="M2 12a10 10 0 1 0 20 0 10 10 0 0 0-20 0z"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    <M cx="12"cy="12"r="2"fill={e}/>
+  </W>,CpuChipIcon=({color:e=p.white,size:t=16})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <B x="4"y="4"width="16"height="16"rx="2"stroke={e}strokeWidth="2"/>
+    <B x="9"y="9"width="6"height="6"stroke={e}strokeWidth="1.5"/>
+    <S x1="9"y1="1"x2="9"y2="4"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    <S x1="15"y1="1"x2="15"y2="4"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    <S x1="9"y1="20"x2="9"y2="23"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    <S x1="15"y1="20"x2="15"y2="23"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    <S x1="20"y1="9"x2="23"y2="9"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    <S x1="20"y1="15"x2="23"y2="15"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    <S x1="1"y1="9"x2="4"y2="9"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    <S x1="1"y1="15"x2="4"y2="15"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+  </W>,PulseGraphIcon=({color:e=p.white,size:t=16})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <C points="22 12 18 12 15 21 9 3 6 12 2 12"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+  </W>,GaugeIcon=({color:e=p.white,size:t=16})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <L d="M3.34 17a10 10 0 1 1 17.32 0"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    <L d="M12 12l4-4"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    <M cx="12"cy="12"r="2"fill={e}/>
+  </W>,MemoryRamIcon=({color:e=p.white,size:t=16})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <B x="2"y="6"width="20"height="12"rx="2"stroke={e}strokeWidth="2"/>
+    <S x1="6"y1="18"x2="6"y2="21"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    <S x1="10"y1="18"x2="10"y2="21"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    <S x1="14"y1="18"x2="14"y2="21"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    <S x1="18"y1="18"x2="18"y2="21"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    <B x="5"y="9"width="3"height="5"fill={e}/>
+    <B x="10.5"y="9"width="3"height="5"fill={e}/>
+    <B x="16"y="9"width="3"height="5"fill={e}/>
   </W>;

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

@@ -4,4 +4,5 @@ export declare const METHOD_COLORS: Record<Method, string>;
 export declare const DOMAIN_COLORS: string[];
 export declare const DURATION_FAST_MS = 200;
 export declare const DURATION_SLOW_MS = 800;
+export declare const DEFAULT_HIDDEN_URL_PATTERNS: string[];
 export { LIB_VERSION } from './version';

package/dist/esm/constants/index.js

@@ -1 +1 @@
-import{AppColors as o}from"../styles/AppColors";export const STATUS_FILTERS=["ALL","2xx","200","3xx","4xx","400","404","5xx","500","Failed"],METHOD_COLORS={ALL:o.slate500,GET:o.emerald600,POST:o.blue600,PUT:o.amber600,PATCH:o.violet600,DELETE:o.red600,QUERY:o.sky600,OPTIONS:o.slate600,HEAD:o.cyan600},DOMAIN_COLORS=o.domainColors,DURATION_FAST_MS=200,DURATION_SLOW_MS=800;export{LIB_VERSION}from"./version";
+import{AppColors as o}from"../styles/AppColors";export const STATUS_FILTERS=["ALL","2xx","200","3xx","4xx","400","404","5xx","500","Failed"],METHOD_COLORS={ALL:o.slate500,GET:o.emerald600,POST:o.blue600,PUT:o.amber600,PATCH:o.violet600,DELETE:o.red600,QUERY:o.sky600,OPTIONS:o.slate600,HEAD:o.cyan600},DOMAIN_COLORS=o.domainColors,DURATION_FAST_MS=200,DURATION_SLOW_MS=800,DEFAULT_HIDDEN_URL_PATTERNS=["https://google-analytics.com/g/collect","https://api.npmjs.org","https://api.github.com","https://registry.npmjs.org","clients3.google.com"];export{LIB_VERSION}from"./version";

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

@@ -1 +1 @@
-export declare const LIB_VERSION = "2.5.11";
+export declare const LIB_VERSION = "2.5.13";