react-native-inapp-inspector 2.3.20 → 2.3.21

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

@@ -1,25 +1,25 @@
-import oe,{useRef as W,useState as $}from"react";import{Platform as te,ScrollView as Ce,Text as F,TouchableOpacity as U,View as C}from"react-native";import{useInspector as we}from"./InspectorContext";import k from"../../styles";import{AppColors as o}from"../../styles/AppColors";import{AppFonts as ke}from"../../styles/AppFonts";import G from"../TouchableScale";import{SignalIcon as Re,TerminalIcon as Te,AnalyticsIcon as Ie,PackageIcon as Se,ReduxIcon as Le,PerformanceIcon as Ae,CrashIcon as Ee,SmartphoneIcon as Be,DatabaseIcon as Ve,QrCodeIcon as Oe,ScreencastIcon as Pe,ChevronIcon as Q}from"../NetworkIcons";import{isReduxConnected as je}from"../../customHooks/reduxLogger";import{isAnalyticsConnected as De}from"../../customHooks/analyticsLogger";import{isLocalDebugEnvironment as Me}from"../../helpers";const He=oe.memo(()=>{const{activeTab:T,switchActiveTab:E,tabVisibility:v,logs:B,consoleLogs:V,analyticsEvents:q,crashRecords:O,lastReadApisCount:J,lastReadLogsCount:K,lastReadCrashesCount:N,mediaCount:P}=we(),X=je(),Y=De(),R=T==="media",z=(v?.media??!0)&&P>0,j=W(null),[L,Z]=$(!1),[D,_]=$(!0),M=W(0),ee=e=>{const{contentOffset:w,layoutMeasurement:t,contentSize:A}=e.nativeEvent,I=w.x;M.current=I;const S=I>8,x=I<A.width-t.width-8;L!==S&&Z(S),D!==x&&_(x)},H=e=>{j.current?.scrollTo({x:Math.max(0,M.current+e),animated:!0})};return<C style={[k.tabBarContainer,{flexDirection:"row",alignItems:"center",paddingHorizontal:0}]}>
+import oe,{useRef as $,useState as E}from"react";import{Platform as te,ScrollView as Ce,Text as F,TouchableOpacity as U,View as C}from"react-native";import{useInspector as we}from"./InspectorContext";import k from"../../styles";import{AppColors as o}from"../../styles/AppColors";import{AppFonts as ke}from"../../styles/AppFonts";import G from"../TouchableScale";import{SignalIcon as Se,TerminalIcon as Re,AnalyticsIcon as Te,PackageIcon as Ie,ReduxIcon as Le,PerformanceIcon as Ae,CrashIcon as Be,SmartphoneIcon as Ve,DatabaseIcon as Oe,QrCodeIcon as Pe,ScreencastIcon as De,ChevronIcon as Q}from"../NetworkIcons";import{isReduxConnected as Me}from"../../customHooks/reduxLogger";import{isAnalyticsConnected as He}from"../../customHooks/analyticsLogger";import{isLocalDebugEnvironment as We}from"../../helpers";const $e=oe.memo(()=>{const{activeTab:R,switchActiveTab:B,tabVisibility:x,logs:V,consoleLogs:O,analyticsEvents:q,crashRecords:P,lastReadApisCount:J,lastReadLogsCount:K,lastReadCrashesCount:N,mediaCount:j}=we(),X=Me(),Y=He(),S=R==="media",z=(x?.media??!0)&&j>0,D=$(null),[L,Z]=E(!1),[M,_]=E(!0),H=$(0),ee=e=>{const{contentOffset:w,layoutMeasurement:t,contentSize:A}=e.nativeEvent,T=w.x;H.current=T;const v=T>8,I=T<A.width-t.width-8;L!==v&&Z(v),M!==I&&_(I)},W=e=>{D.current?.scrollTo({x:Math.max(0,H.current+e),animated:!0})};return<C style={[k.tabBarContainer,{flexDirection:"row",alignItems:"center",paddingHorizontal:0}]}>
       
-      {L&&<U onPress={()=>H(-160)}hitSlop={{top:6,bottom:6,left:6,right:6}}activeOpacity={.7}style={{paddingLeft:6,paddingRight:2,justifyContent:"center",alignItems:"center"}}>
-          <C style={{width:22,height:22,borderRadius:11,backgroundColor:"#E5E7EB",alignItems:"center",justifyContent:"center"}}>
+      {L&&<U onPress={()=>W(-160)}hitSlop={{top:6,bottom:6,left:6,right:6}}activeOpacity={.7}style={{paddingLeft:6,paddingRight:2,justifyContent:"center",alignItems:"center"}}>
+          <C style={{width:22,height:22,borderRadius:11,backgroundColor:o.grayBorderSecondary,alignItems:"center",justifyContent:"center"}}>
             <Q direction="left"size={13}color={o.purple}/>
           </C>
         </U>}
 
       
-      <Ce ref={j}horizontal showsHorizontalScrollIndicator={!1}onScroll={ee}scrollEventThrottle={16}style={{flex:1}}contentContainerStyle={{paddingLeft:L?4:12,paddingRight:z?6:12}}>
-        {[{id:1,key:"apis",label:"APIs",count:B.length,icon:"apis"},{id:2,key:"logs",label:"Logs",count:V.length,icon:"logs"},{id:3,key:"analytics",label:"Analytics",count:q.length,icon:"analytics"},{id:4,key:"redux",label:"Redux",count:0,icon:"redux"},{id:5,key:"storage",label:"Storage",count:0,icon:"storage"},{id:6,key:"device",label:"Device",count:0,icon:"device"},{id:7,key:"crash",label:"Crash",count:O?.length||0,icon:"crash"},{id:8,key:"bundle",label:"Bundle",count:0,icon:"bundle"},{id:9,key:"performance",label:"Performance",count:0,icon:"performance"},{id:10,key:"debugging",label:"Debugging",count:0,icon:"debugging"}].filter(e=>e.key==="debugging"?te.OS==="android"&&Me()&&!!v?.debugging:!(!v?.[e.key]||e.key==="redux"&&!X||e.key==="analytics"&&!Y)).map(e=>{const w=T===e.key,t=w?o.white:e.key==="crash"&&e.count>0?o.errorColor:o.grayText,A=e.count>9?"9+":String(e.count),I=T!=="apis"&&B.length>J,S=T!=="logs"&&V.length>K,x=T!=="crash"&&(O?.length||0)>(N||0);return<G key={e.key}onPress={()=>{E(e.key)}}style={[k.contentTabButton,w&&k.contentTabButtonActive]}>
+      <Ce ref={D}horizontal showsHorizontalScrollIndicator={!1}onScroll={ee}scrollEventThrottle={16}style={{flex:1}}contentContainerStyle={{paddingLeft:L?4:12,paddingRight:z?6:12}}>
+        {[{id:1,key:"apis",label:"APIs",count:V.length,icon:"apis"},{id:2,key:"logs",label:"Logs",count:O.length,icon:"logs"},{id:3,key:"analytics",label:"Analytics",count:q.length,icon:"analytics"},{id:4,key:"redux",label:"Redux",count:0,icon:"redux"},{id:5,key:"storage",label:"Storage",count:0,icon:"storage"},{id:6,key:"device",label:"Device",count:0,icon:"device"},{id:7,key:"crash",label:"Crash",count:P?.length||0,icon:"crash"},{id:8,key:"bundle",label:"Bundle",count:0,icon:"bundle"},{id:9,key:"performance",label:"Performance",count:0,icon:"performance"},{id:10,key:"debugging",label:"Debugging",count:0,icon:"debugging"}].filter(e=>e.key==="debugging"?te.OS==="android"&&We()&&!!x?.debugging:!(!x?.[e.key]||e.key==="redux"&&!X||e.key==="analytics"&&!Y)).map(e=>{const w=R===e.key,t=w?o.white:e.key==="crash"&&e.count>0?o.errorColor:o.grayText,A=e.count>9?"9+":String(e.count),T=R!=="apis"&&V.length>J,v=R!=="logs"&&O.length>K,I=R!=="crash"&&(P?.length||0)>(N||0);return<G key={e.key}onPress={()=>{B(e.key)}}style={[k.contentTabButton,w&&k.contentTabButtonActive]}>
                 <C style={{flexDirection:"row",alignItems:"center",gap:6}}>
-                  {e.icon==="apis"&&<Re color={t}size={14}/>}
-                  {e.icon==="logs"&&<Te color={t}size={14}/>}
-                  {e.icon==="analytics"&&<Ie color={t}size={14}/>}
+                  {e.icon==="apis"&&<Se color={t}size={14}/>}
+                  {e.icon==="logs"&&<Re color={t}size={14}/>}
+                  {e.icon==="analytics"&&<Te color={t}size={14}/>}
                   {e.icon==="redux"&&<Le color={t}size={14}/>}
-                  {e.icon==="storage"&&<Ve color={t}size={14}/>}
-                  {e.icon==="device"&&<Be color={t}size={14}/>}
-                  {e.icon==="crash"&&<Ee color={t}size={14}/>}
-                  {e.icon==="bundle"&&<Se color={t}size={14}/>}
+                  {e.icon==="storage"&&<Oe color={t}size={14}/>}
+                  {e.icon==="device"&&<Ve color={t}size={14}/>}
+                  {e.icon==="crash"&&<Be color={t}size={14}/>}
+                  {e.icon==="bundle"&&<Ie color={t}size={14}/>}
                   {e.icon==="performance"&&<Ae color={t}size={14}/>}
-                  {e.icon==="debugging"&&<Oe color={t}size={14}/>}
+                  {e.icon==="debugging"&&<Pe color={t}size={14}/>}
                   <C style={{minWidth:20,height:20,paddingHorizontal:4,borderRadius:10,backgroundColor:w?`${o.white}33`:`${o.purple}1F`,borderWidth:1,borderColor:w?`${o.white}66`:`${o.purple}40`,alignItems:"center",justifyContent:"center"}}>
                     <F style={{fontFamily:ke.interBold,fontSize:9.5,lineHeight:12,color:w?o.white:o.purple}}>
                       #{e.id}
@@ -28,25 +28,25 @@ import oe,{useRef as W,useState as $}from"react";import{Platform as te,ScrollVie
                   <F numberOfLines={1}ellipsizeMode="tail"style={[k.contentTabButtonText,w&&k.contentTabButtonTextActive]}>
                     {e.label} {e.count>0?`(${A})`:""}
                   </F>
-                  {(e.key==="apis"&&I||e.key==="logs"&&S||e.key==="crash"&&x)&&<C style={{width:6,height:6,borderRadius:3,backgroundColor:o.errorColor,marginLeft:4,alignSelf:"center"}}/>}
+                  {(e.key==="apis"&&T||e.key==="logs"&&v||e.key==="crash"&&I)&&<C style={{width:6,height:6,borderRadius:3,backgroundColor:o.errorColor,marginLeft:4,alignSelf:"center"}}/>}
                 </C>
               </G>})}
       </Ce>
 
       
-      {D&&<U onPress={()=>H(160)}hitSlop={{top:6,bottom:6,left:6,right:6}}activeOpacity={.7}style={{paddingLeft:2,paddingRight:z?4:8,justifyContent:"center",alignItems:"center"}}>
-          <C style={{width:22,height:22,borderRadius:11,backgroundColor:"#E5E7EB",alignItems:"center",justifyContent:"center"}}>
+      {M&&<U onPress={()=>W(160)}hitSlop={{top:6,bottom:6,left:6,right:6}}activeOpacity={.7}style={{paddingLeft:2,paddingRight:z?4:8,justifyContent:"center",alignItems:"center"}}>
+          <C style={{width:22,height:22,borderRadius:11,backgroundColor:o.grayBorderSecondary,alignItems:"center",justifyContent:"center"}}>
             <Q direction="right"size={13}color={o.purple}/>
           </C>
         </U>}
 
       
-      {z&&<C style={{paddingLeft:6,paddingRight:10,borderLeftWidth:1,borderLeftColor:"#E5E7EB",backgroundColor:"#ffffff",justifyContent:"center",shadowColor:"#000000",shadowOffset:{width:-3,height:0},shadowOpacity:.12,shadowRadius:4,elevation:4,zIndex:10}}>
-          <G key="media"onPress={()=>{E("media")}}accessibilityRole="button"accessibilityLabel="Media Gallery"style={[k.contentTabButton,{marginRight:0,borderRadius:8,backgroundColor:R?o.purple:"#eeeeee",borderColor:R?o.purple:"#E5E7EB",borderWidth:1,paddingHorizontal:10,paddingVertical:7,alignItems:"center",justifyContent:"center"},R&&k.contentTabButtonActive]}>
+      {z&&<C style={{paddingLeft:6,paddingRight:10,borderLeftWidth:1,borderLeftColor:o.dividerColor,backgroundColor:o.primaryLight,justifyContent:"center",shadowColor:o.shadowColorString,shadowOffset:{width:-3,height:0},shadowOpacity:.12,shadowRadius:4,elevation:4,zIndex:10}}>
+          <G key="media"onPress={()=>{B("media")}}accessibilityRole="button"accessibilityLabel="Media Gallery"style={[k.contentTabButton,{marginRight:0,borderRadius:8,backgroundColor:S?o.purple:o.graySurface,borderColor:S?o.purple:o.dividerColor,borderWidth:1,paddingHorizontal:10,paddingVertical:7,alignItems:"center",justifyContent:"center"},S&&k.contentTabButtonActive]}>
             <C style={{position:"relative",alignItems:"center",justifyContent:"center"}}>
-              <Pe color={R?o.white:o.grayText}size={15}/>
-              {P>0&&<C style={{position:"absolute",top:-3,right:-4,width:7,height:7,borderRadius:3.5,backgroundColor:R?o.emerald400:o.purple,borderWidth:1.2,borderColor:R?o.purple:o.white}}/>}
+              <De color={S?o.white:o.grayText}size={15}/>
+              {j>0&&<C style={{position:"absolute",top:-3,right:-4,width:7,height:7,borderRadius:3.5,backgroundColor:S?o.emerald400:o.purple,borderWidth:1.2,borderColor:S?o.purple:o.white}}/>}
             </C>
           </G>
         </C>}
-    </C>});export default He;
+    </C>});export default $e;

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

@@ -1,94 +1,93 @@
-import{useState as A,useEffect as _}from"react";import{Modal as P,View as C,Text as F,TouchableOpacity as R,StyleSheet as U,Animated as k,Linking as q}from"react-native";import T,{Path as B}from"react-native-svg";import{BrandSquareIcon as G}from"../BrandSquareIcon";import{NpmIcon as J}from"../NetworkIcons";import{LIB_VERSION as K}from"../../constants";import{copyToClipboard as Q}from"../../helpers";import{showToast as X}from"../../helpers/toast";import{AppFonts as D}from"../../styles/AppFonts";const Y=({size:t=14,color:o="#64748B"})=><T width={t}height={t}viewBox="0 0 24 24"fill="none">
-    <B d="M8 4v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2z"stroke={o}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
-    <B d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"stroke={o}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
-  </T>,O=({size:t=14,color:o="#10B981"})=><T width={t}height={t}viewBox="0 0 24 24"fill="none">
-    <B d="M20 6L9 17l-5-5"stroke={o}strokeWidth="2.4"strokeLinecap="round"strokeLinejoin="round"/>
-  </T>,Z=({size:t=13,color:o="#FFFFFF"})=><T width={t}height={t}viewBox="0 0 24 24"fill="none">
-    <B d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"stroke={o}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
-    <B d="M15 3h6v6"stroke={o}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
-    <B d="M10 14L21 3"stroke={o}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
-  </T>,$=({size:t=13,color:o="#64748B"})=><T width={t}height={t}viewBox="0 0 24 24"fill="none">
-    <B d="M18 6L6 18M6 6l12 12"stroke={o}strokeWidth="2.2"strokeLinecap="round"strokeLinejoin="round"/>
-  </T>,Ce=({size:t=14,color:o="#F59E0B"})=><T width={t}height={t}viewBox="0 0 24 24"fill="none">
-    <B d="M12 2l2.4 6.6L21 11l-6.6 2.4L12 20l-2.4-6.6L3 11l6.6-2.4L12 2z"fill={o}/>
-  </T>,Fe=({size:t=14,color:o="#94A3B8"})=><T width={t}height={t}viewBox="0 0 24 24"fill="none">
-    <B d="M5 12h14M12 5l7 7-7 7"stroke={o}strokeWidth="2.2"strokeLinecap="round"strokeLinejoin="round"/>
-  </T>;export const UpdateAvailableModal=({visible:t,latestVersion:o,onClose:M})=>{const[I,W]=A(!1),L=A(new k.Value(0))[0],V=A(new k.Value(.92))[0],z="npm install react-native-inapp-inspector@latest";if(typeof __DEV__>"u"||!__DEV__)return null;_(()=>{t&&(W(!1),k.parallel([k.timing(L,{toValue:1,duration:220,useNativeDriver:!0}),k.spring(V,{toValue:1,friction:8,tension:50,useNativeDriver:!0})]).start())},[t,L,V]);const E=()=>{k.parallel([k.timing(L,{toValue:0,duration:160,useNativeDriver:!0}),k.timing(V,{toValue:.92,duration:160,useNativeDriver:!0})]).start(()=>{M()})},H=()=>{Q(z,"Install Command"),W(!0),X("Copied npm install command to clipboard!"),setTimeout(()=>{W(!1)},2500)},N=()=>{q.openURL("https://www.npmjs.com/package/react-native-inapp-inspector").catch(()=>{}),E()};return t?<P transparent visible={t}animationType="none"statusBarTranslucent onRequestClose={E}>
-      <C style={e.overlay}>
-        <k.View style={[e.card,{opacity:L,transform:[{scale:V}]}]}>
+import{useState as M,useEffect as F}from"react";import{Modal as G,View as C,Text as S,TouchableOpacity as O,StyleSheet as Y,Animated as T,Linking as J}from"react-native";import B,{Path as L}from"react-native-svg";import{BrandSquareIcon as K}from"../BrandSquareIcon";import{NpmIcon as Q}from"../NetworkIcons";import{LIB_VERSION as X}from"../../constants";import{copyToClipboard as Z}from"../../helpers";import{showToast as $}from"../../helpers/toast";import{AppFonts as P}from"../../styles/AppFonts";import{AppColors as e}from"../../styles/AppColors";const Ce=({size:o=14,color:r=e.grayTextWeak})=><B width={o}height={o}viewBox="0 0 24 24"fill="none">
+    <L d="M8 4v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2z"stroke={r}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    <L d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"stroke={r}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+  </B>,N=({size:o=14,color:r=e.emerald500})=><B width={o}height={o}viewBox="0 0 24 24"fill="none">
+    <L d="M20 6L9 17l-5-5"stroke={r}strokeWidth="2.4"strokeLinecap="round"strokeLinejoin="round"/>
+  </B>,Se=({size:o=13,color:r=e.white})=><B width={o}height={o}viewBox="0 0 24 24"fill="none">
+    <L d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"stroke={r}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    <L d="M15 3h6v6"stroke={r}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    <L d="M10 14L21 3"stroke={r}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+  </B>,Te=({size:o=13,color:r=e.grayTextWeak})=><B width={o}height={o}viewBox="0 0 24 24"fill="none">
+    <L d="M18 6L6 18M6 6l12 12"stroke={r}strokeWidth="2.2"strokeLinecap="round"strokeLinejoin="round"/>
+  </B>,Le=({size:o=14,color:r=e.amber500})=><B width={o}height={o}viewBox="0 0 24 24"fill="none">
+    <L d="M12 2l2.4 6.6L21 11l-6.6 2.4L12 20l-2.4-6.6L3 11l6.6-2.4L12 2z"fill={r}/>
+  </B>,Ve=({size:o=14,color:r=e.slate400})=><B width={o}height={o}viewBox="0 0 24 24"fill="none">
+    <L d="M5 12h14M12 5l7 7-7 7"stroke={r}strokeWidth="2.2"strokeLinecap="round"strokeLinejoin="round"/>
+  </B>;export const UpdateAvailableModal=({visible:o,latestVersion:r,onClose:_})=>{const[A,D]=M(!1),W=M(new T.Value(0))[0],R=M(new T.Value(.92))[0],H="npm install react-native-inapp-inspector@latest";if(typeof __DEV__>"u"||!__DEV__)return null;F(()=>{o&&(D(!1),T.parallel([T.timing(W,{toValue:1,duration:220,useNativeDriver:!0}),T.spring(R,{toValue:1,friction:8,tension:50,useNativeDriver:!0})]).start())},[o,W,R]);const I=()=>{T.parallel([T.timing(W,{toValue:0,duration:160,useNativeDriver:!0}),T.timing(R,{toValue:.92,duration:160,useNativeDriver:!0})]).start(()=>{_()})},E=()=>{Z(H,"Install Command"),D(!0),$("Copied npm install command to clipboard!"),setTimeout(()=>{D(!1)},2500)},U=()=>{J.openURL("https://www.npmjs.com/package/react-native-inapp-inspector").catch(()=>{}),I()};return o?<G transparent visible={o}animationType="none"statusBarTranslucent onRequestClose={I}>
+      <C style={t.overlay}>
+        <T.View style={[t.card,{opacity:W,transform:[{scale:R}]}]}>
           
-          <R style={e.topCloseButton}onPress={E}hitSlop={10}activeOpacity={.7}>
-            <$ size={13}color="#64748B"/>
-          </R>
+          <O style={t.topCloseButton}onPress={I}hitSlop={10}activeOpacity={.7}>
+            <Te size={13}color={e.grayTextWeak}/>
+          </O>
 
           
-          <C style={e.headerSection}>
-            <C style={e.iconHaloRing}>
-              <G size={52}/>
-              <C style={e.sparkleBadge}>
-                <Ce size={13}color="#F59E0B"/>
+          <C style={t.headerSection}>
+            <C style={t.iconHaloRing}>
+              <K size={38}/>
+              <C style={t.sparkleBadge}>
+                <Le size={13}color={e.amber500}/>
               </C>
             </C>
-
-            <F style={e.title}>Update Available</F>
-            <F style={e.subtitle}>
-              A newer release of react-native-inapp-inspector is ready
-            </F>
+            <S style={t.title}>Update Available</S>
+            <S style={t.subtitle}>
+              A new version of react-native-inapp-inspector is ready to install
+            </S>
           </C>
 
           
-          <C style={e.versionComparisonCard}>
-            <C style={e.versionColumn}>
-              <F style={e.versionLabel}>INSTALLED</F>
-              <C style={e.installedChip}>
-                <F style={e.installedText}>v{K}</F>
+          <C style={t.versionComparisonCard}>
+            <C style={t.versionColumn}>
+              <S style={t.versionLabel}>INSTALLED</S>
+              <C style={t.installedChip}>
+                <S style={t.installedText}>v{X}</S>
               </C>
             </C>
 
-            <C style={e.arrowContainer}>
-              <Fe size={14}color="#94A3B8"/>
+            <C style={t.arrowContainer}>
+              <Ve size={14}color={e.slate400}/>
             </C>
 
-            <C style={e.versionColumn}>
-              <F style={e.versionLabel}>LATEST ON NPM</F>
-              <C style={e.latestChip}>
-                <J size={12}color="#CB3837"/>
-                <F style={e.latestText}>v{o||"latest"}</F>
+            <C style={t.versionColumn}>
+              <S style={t.versionLabel}>LATEST</S>
+              <C style={t.latestChip}>
+                <Q size={12}color={e.npmRed}/>
+                <S style={t.latestText}>v{r}</S>
               </C>
             </C>
           </C>
 
           
-          <C style={e.codeSnippetBox}>
-            <C style={e.codeSnippetHeader}>
-              <F style={e.codeSnippetLabel}>UPGRADE COMMAND</F>
-              {I&&<C style={e.copiedIndicator}>
-                  <O size={11}color="#10B981"/>
-                  <F style={e.copiedText}>Copied</F>
+          <C style={t.codeSnippetBox}>
+            <C style={t.codeSnippetHeader}>
+              <S style={t.codeSnippetLabel}>UPGRADE COMMAND</S>
+              {A&&<C style={t.copiedIndicator}>
+                  <N size={11}color={e.emerald500}/>
+                  <S style={t.copiedText}>Copied</S>
                 </C>}
             </C>
 
-            <R style={e.commandRow}onPress={H}activeOpacity={.75}>
-              <F style={e.commandText}numberOfLines={1}>
-                {z}
-              </F>
-              <C style={e.copyIconWrapper}>
-                {I?<O size={14}color="#10B981"/>:<Y size={14}color="#64748B"/>}
+            <O activeOpacity={.75}onPress={E}style={t.commandRow}>
+              <S style={t.commandText}numberOfLines={1}>
+                {H}
+              </S>
+              <C style={t.copyIconWrapper}>
+                {A?<N size={14}color={e.emerald500}/>:<Ce size={14}color={e.grayTextWeak}/>}
               </C>
-            </R>
+            </O>
           </C>
 
           
-          <C style={e.buttonRow}>
-            <R style={e.secondaryButton}onPress={E}activeOpacity={.7}>
-              <F style={e.secondaryButtonText}>Later</F>
-            </R>
+          <C style={t.buttonRow}>
+            <O activeOpacity={.7}onPress={I}style={t.secondaryButton}>
+              <S style={t.secondaryButtonText}>Later</S>
+            </O>
 
-            <R style={e.primaryButton}onPress={N}activeOpacity={.85}>
-              <F style={e.primaryButtonText}>View on NPM</F>
-              <Z size={12}color="#FFFFFF"/>
-            </R>
+            <O activeOpacity={.8}onPress={U}style={t.primaryButton}>
+              <S style={t.primaryButtonText}>View on NPM</S>
+              <Se size={12}color={e.white}/>
+            </O>
           </C>
-        </k.View>
+        </T.View>
       </C>
-    </P>:null};const S={fontFamily:D.interRegular},e=U.create({overlay:{flex:1,backgroundColor:"rgba(15, 23, 42, 0.62)",justifyContent:"center",alignItems:"center",paddingHorizontal:20,zIndex:999999},card:{width:"100%",maxWidth:360,backgroundColor:"#FFFFFF",borderRadius:24,borderWidth:1,borderColor:"#E2E8F0",paddingHorizontal:20,paddingTop:22,paddingBottom:20,alignItems:"center",shadowColor:"#0F172A",shadowOffset:{width:0,height:18},shadowOpacity:.24,shadowRadius:36,elevation:24},topCloseButton:{position:"absolute",top:14,right:14,width:28,height:28,borderRadius:14,backgroundColor:"#F8FAFC",justifyContent:"center",alignItems:"center",borderWidth:1,borderColor:"#E2E8F0",zIndex:10},headerSection:{alignItems:"center",width:"100%",marginBottom:12},iconHaloRing:{width:66,height:66,borderRadius:20,backgroundColor:"#FAF5FF",justifyContent:"center",alignItems:"center",borderWidth:1.5,borderColor:"#F3E8FF",marginBottom:8,shadowColor:"#7C3AED",shadowOffset:{width:0,height:4},shadowOpacity:.16,shadowRadius:10,elevation:4},sparkleBadge:{position:"absolute",top:-4,right:-4,width:22,height:22,borderRadius:11,backgroundColor:"#FEF3C7",justifyContent:"center",alignItems:"center",borderWidth:1.5,borderColor:"#FFFFFF"},title:{fontSize:17.5,fontWeight:"800",color:"#0F172A",letterSpacing:-.4,textAlign:"center",lineHeight:22,marginBottom:2,...S},subtitle:{fontSize:12,fontWeight:"500",color:"#64748B",textAlign:"center",lineHeight:16,paddingHorizontal:8,...S},versionComparisonCard:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:"#F8FAFC",borderRadius:14,borderWidth:1,borderColor:"#E2E8F0",paddingVertical:10,paddingHorizontal:14,marginBottom:12,width:"100%"},versionColumn:{alignItems:"center",gap:4},versionLabel:{fontSize:9.5,fontWeight:"700",color:"#94A3B8",letterSpacing:.6,...S},installedChip:{backgroundColor:"#E2E8F0",paddingHorizontal:8,paddingVertical:3,borderRadius:6},installedText:{fontSize:12,fontWeight:"700",color:"#475569",...S},arrowContainer:{paddingHorizontal:6},arrowText:{fontSize:14,color:"#94A3B8",fontWeight:"700"},latestChip:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:"#EDE9FE",paddingHorizontal:8,paddingVertical:3,borderRadius:6,borderWidth:1,borderColor:"#DDD6FE"},latestText:{fontSize:12,fontWeight:"800",color:"#6D28D9",...S},codeSnippetBox:{backgroundColor:"#0F172A",borderRadius:12,padding:10,width:"100%",marginBottom:14,borderWidth:1,borderColor:"#1E293B"},codeSnippetHeader:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginBottom:6},codeSnippetLabel:{fontSize:9.5,fontWeight:"700",color:"#64748B",letterSpacing:.6,...S},copiedIndicator:{flexDirection:"row",alignItems:"center",gap:3},copiedText:{fontSize:9.5,fontWeight:"600",color:"#10B981",...S},commandRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:"#1E293B",borderRadius:8,paddingVertical:7,paddingHorizontal:9,gap:8},commandText:{flex:1,fontSize:11,fontFamily:D.interRegular,color:"#38BDF8"},copyIconWrapper:{width:22,height:22,borderRadius:6,backgroundColor:"#334155",justifyContent:"center",alignItems:"center"},buttonRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",gap:10,width:"100%"},secondaryButton:{flex:1,alignItems:"center",justifyContent:"center",paddingVertical:11,borderRadius:12,backgroundColor:"#F1F5F9",borderWidth:1,borderColor:"#E2E8F0"},secondaryButtonText:{fontSize:13,fontWeight:"600",color:"#475569",...S},primaryButton:{flex:1.3,flexDirection:"row",alignItems:"center",justifyContent:"center",gap:6,paddingVertical:11,borderRadius:12,backgroundColor:"#7C3AED",shadowColor:"#7C3AED",shadowOffset:{width:0,height:3},shadowOpacity:.28,shadowRadius:6,elevation:4},primaryButtonText:{fontSize:13,fontWeight:"700",color:"#FFFFFF",...S}});export default UpdateAvailableModal;
+    </G>:null};const V={fontFamily:P.interRegular},t=Y.create({overlay:{flex:1,backgroundColor:e.overlayDark,justifyContent:"center",alignItems:"center",paddingHorizontal:20,zIndex:999999},card:{width:"100%",maxWidth:360,backgroundColor:e.primaryLight,borderRadius:24,borderWidth:1,borderColor:e.dividerColor,paddingHorizontal:20,paddingTop:22,paddingBottom:20,alignItems:"center",shadowColor:e.shadowColorString,shadowOffset:{width:0,height:18},shadowOpacity:.24,shadowRadius:36,elevation:24},topCloseButton:{position:"absolute",top:14,right:14,width:28,height:28,borderRadius:14,backgroundColor:e.grayBackground,justifyContent:"center",alignItems:"center",borderWidth:1,borderColor:e.dividerColor,zIndex:10},headerSection:{alignItems:"center",width:"100%",marginBottom:12},iconHaloRing:{width:66,height:66,borderRadius:20,backgroundColor:e.purple50,justifyContent:"center",alignItems:"center",borderWidth:1.5,borderColor:e.purple100,marginBottom:8,shadowColor:e.offerPurple,shadowOffset:{width:0,height:4},shadowOpacity:.16,shadowRadius:10,elevation:4},sparkleBadge:{position:"absolute",top:-4,right:-4,width:22,height:22,borderRadius:11,backgroundColor:e.paleYellow,justifyContent:"center",alignItems:"center",borderWidth:1.5,borderColor:e.white},title:{fontSize:17.5,fontWeight:"800",color:e.primaryBlack,letterSpacing:-.4,textAlign:"center",lineHeight:22,marginBottom:2,...V},subtitle:{fontSize:12,fontWeight:"500",color:e.grayTextWeak,textAlign:"center",lineHeight:16,paddingHorizontal:8,...V},versionComparisonCard:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:e.grayBackground,borderRadius:14,borderWidth:1,borderColor:e.dividerColor,paddingVertical:10,paddingHorizontal:14,marginBottom:12,width:"100%"},versionColumn:{alignItems:"center",gap:4},versionLabel:{fontSize:9.5,fontWeight:"700",color:e.slate400,letterSpacing:.6,...V},installedChip:{backgroundColor:e.grayBorderSecondary,paddingHorizontal:8,paddingVertical:3,borderRadius:6},installedText:{fontSize:12,fontWeight:"700",color:e.grayText,...V},arrowContainer:{paddingHorizontal:6},arrowText:{fontSize:14,color:e.slate400,fontWeight:"700"},latestChip:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:e.violetSoftBg,paddingHorizontal:8,paddingVertical:3,borderRadius:6,borderWidth:1,borderColor:e.violetSoftBorder},latestText:{fontSize:12,fontWeight:"800",color:e.offerPurple,...V},codeSnippetBox:{backgroundColor:e.slate900,borderRadius:12,padding:10,width:"100%",marginBottom:14,borderWidth:1,borderColor:e.slate800},codeSnippetHeader:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginBottom:6},codeSnippetLabel:{fontSize:9.5,fontWeight:"700",color:e.grayTextWeak,letterSpacing:.6,...V},copiedIndicator:{flexDirection:"row",alignItems:"center",gap:3},copiedText:{fontSize:9.5,fontWeight:"600",color:e.emerald500,...V},commandRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:e.slate800,borderRadius:8,paddingVertical:7,paddingHorizontal:9,gap:8},commandText:{flex:1,fontSize:11,fontFamily:P.interRegular,color:e.sky400},copyIconWrapper:{width:22,height:22,borderRadius:6,backgroundColor:e.slate700,justifyContent:"center",alignItems:"center"},buttonRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",gap:10,width:"100%"},secondaryButton:{flex:1,alignItems:"center",justifyContent:"center",paddingVertical:11,borderRadius:12,backgroundColor:e.graySurface,borderWidth:1,borderColor:e.dividerColor},secondaryButtonText:{fontSize:13,fontWeight:"600",color:e.grayText,...V},primaryButton:{flex:1.3,flexDirection:"row",alignItems:"center",justifyContent:"center",gap:6,paddingVertical:11,borderRadius:12,backgroundColor:e.offerPurple,shadowColor:e.offerPurple,shadowOffset:{width:0,height:3},shadowOpacity:.28,shadowRadius:6,elevation:4},primaryButtonText:{fontSize:13,fontWeight:"700",color:e.white,...V}});export default UpdateAvailableModal;

package/dist/esm/components/LogCard.js

@@ -1,112 +1,112 @@
-import oe,{useEffect as te,useRef as le,useMemo as M}from"react";import{Alert as ae,Animated as I,Linking as D,View as C,Pressable as U,Text as T,StyleSheet as v}from"react-native";import Ce,{Path as Te}from"react-native-svg";import{AppColors as r}from"../styles/AppColors";import{METHOD_COLORS as q}from"../constants";import{getStatusColor as Be,getDurationColor as Fe,formatDateTime as Se,getSize as Re,getPath as ze,getBaseUrl as Ve}from"../helpers";import{CalendarIcon as He,ClockIcon as N,SizeIcon as Le,CircleCheckIcon as $e,CircleAlertIcon as Ie,CircleXIcon as De,RepeatIcon as Oe,PinIcon as Pe}from"./NetworkIcons";import{AppFonts as B}from"../styles/AppFonts";import We from"./HighlightText";import Ae from"./TouchableScale";import{useTranslation as Ee}from"../i18n";const Me=oe.memo(function({item:e,onPress:_,timelineMinStart:Ue,timelineTotalRange:ve,isNew:L,isSelected:O,onToggleSelect:G,searchStr:J}){const{t:V}=Ee(),P=q[e.method]??q.ALL,F=M(()=>{try{const t=new URL(e.url),z=t.host,E=t.pathname+(t.search?t.search:""),re=t.protocol==="https:";return{host:z,path:E||"/",isHttps:re}}catch{const t=e.url.toLowerCase().startsWith("https:"),z=ze(e.url);return{host:Ve(e.url).replace(/^https?:\/\//,""),path:z||e.url,isHttps:t}}},[e.url]),W=M(()=>{if(!e.caller||e.caller==="Unknown")return null;const t=e.caller.split(/[\/\\]/);return(t[t.length-1]||e.caller).replace(/\?.*$/,"").replace(/^[a-zA-Z0-9_$]+@/,"")},[e.caller]),K=t=>{t?.stopPropagation?.(),ae.alert(V("common.openInBrowser")||"Open in Browser",`${V("common.openInBrowserPrompt")||"Are you sure you want to open this URL in your external browser?"}
+import oe,{useEffect as te,useRef as le,useMemo as j}from"react";import{Alert as ae,Animated as W,Linking as D,View as C,Pressable as A,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 E}from"../constants";import{getStatusColor as Be,getDurationColor as Se,formatDateTime as Re,getSize as ze,getPath as Ve,getBaseUrl as He}from"../helpers";import{CalendarIcon as Le,ClockIcon as N,SizeIcon as $e,CircleCheckIcon as Ie,CircleAlertIcon as We,CircleXIcon as De,RepeatIcon as Fe,PinIcon as Oe}from"./NetworkIcons";import{AppFonts as B}from"../styles/AppFonts";import Pe from"./HighlightText";import Me from"./TouchableScale";import{useTranslation as je}from"../i18n";const Ae=oe.memo(function({item:r,onPress:_,timelineMinStart:Ee,timelineTotalRange:qe,isNew:$,isSelected:F,onToggleSelect:G,searchStr:J}){const{t:H}=je(),O=E[r.method]??E.ALL,S=j(()=>{try{const t=new URL(r.url),V=t.host,M=t.pathname+(t.search?t.search:""),re=t.protocol==="https:";return{host:V,path:M||"/",isHttps:re}}catch{const t=r.url.toLowerCase().startsWith("https:"),V=Ve(r.url);return{host:He(r.url).replace(/^https?:\/\//,""),path:V||r.url,isHttps:t}}},[r.url]),P=j(()=>{if(!r.caller||r.caller==="Unknown")return null;const t=r.caller.split(/[\/\\]/);return(t[t.length-1]||r.caller).replace(/\?.*$/,"").replace(/^[a-zA-Z0-9_$]+@/,"")},[r.caller]),K=t=>{t?.stopPropagation?.(),ae.alert(H("common.openInBrowser")||"Open in Browser",`${H("common.openInBrowserPrompt")||"Are you sure you want to open this URL in your external browser?"}
 
-${e.url}`,[{text:V("common.cancel")||"Cancel",style:"cancel"},{text:V("common.open")||"Open",onPress:()=>{D.canOpenURL(e.url).then(z=>{z?D.openURL(e.url):D.openURL(e.url).catch(()=>{})}).catch(()=>{})}}])},S=e.status===0||e.status!=null&&e.status>=400,R=e.status==null,$=Be(e.status),H=Fe(e.duration),Q=R?r.darkOrange:S?r.errorColor:r.greenColor,A=le(new I.Value(L?.35:0)).current;te(()=>{L&&I.timing(A,{toValue:0,duration:1200,useNativeDriver:!1}).start()},[L]);const X=()=>{if(R)return"...";if(e.status===0||e.status==null)return V("network.statusFailed")||"FAILED";const t=typeof e.status=="number"?e.status:parseInt(String(e.status||0),10);return t===200?"200 OK":t===201?"201 Created":t===204?"204 No Content":t===304?"304 Not Modified":t===400?"400 Bad Req":t===401?"401 Unauth":t===403?"403 Forbidden":t===404?"404 Not Found":t===500?"500 Error":String(e.status)},Z=()=>{if(R)return<N color={r.darkOrange}size={10}/>;const t=typeof e.status=="number"?e.status:parseInt(String(e.status||0),10);return t>=200&&t<300?<$e color={r.greenColor}size={10}/>:t>=300&&t<400?<Oe color={r.amber700}size={10}/>:t>=400&&t<500?<Ie color={r.darkOrange}size={10}/>:<De color={r.errorColor}size={10}/>},Y=Se(e.startTime),ee=e.url.split("?")[0].toLowerCase().endsWith(".json");return<C style={o.container}>
-      <Ae onPress={_}style={[o.card,{borderLeftWidth:3.5,borderLeftColor:Q,backgroundColor:S?"#FFF8F8":r.white}]}>
+${r.url}`,[{text:H("common.cancel")||"Cancel",style:"cancel"},{text:H("common.open")||"Open",onPress:()=>{D.canOpenURL(r.url).then(V=>{V?D.openURL(r.url):D.openURL(r.url).catch(()=>{})}).catch(()=>{})}}])},R=r.status===0||r.status!=null&&r.status>=400,z=r.status==null,I=Be(r.status),L=Se(r.duration),Q=z?e.darkOrange:R?e.errorColor:e.greenColor,v=le(new W.Value($?.35:0)).current;te(()=>{$&&W.timing(v,{toValue:0,duration:1200,useNativeDriver:!1}).start()},[$]);const X=()=>{if(z)return"...";if(r.status===0||r.status==null)return H("network.statusFailed")||"FAILED";const t=typeof r.status=="number"?r.status:parseInt(String(r.status||0),10);return t===200?"200 OK":t===201?"201 Created":t===204?"204 No Content":t===304?"304 Not Modified":t===400?"400 Bad Req":t===401?"401 Unauth":t===403?"403 Forbidden":t===404?"404 Not Found":t===500?"500 Error":String(r.status)},Z=()=>{if(z)return<N color={e.darkOrange}size={10}/>;const t=typeof r.status=="number"?r.status:parseInt(String(r.status||0),10);return t>=200&&t<300?<Ie color={e.greenColor}size={10}/>:t>=300&&t<400?<Fe color={e.amber700}size={10}/>:t>=400&&t<500?<We color={e.darkOrange}size={10}/>:<De color={e.errorColor}size={10}/>},Y=Re(r.startTime),ee=r.url.split("?")[0].toLowerCase().endsWith(".json");return<C style={o.container}>
+      <Me onPress={_}style={[o.card,{borderLeftWidth:3.5,borderLeftColor:Q,backgroundColor:R?e.errorCardBg:e.white}]}>
         <C style={o.cardBody}>
           
           <C style={o.cardHeaderRow}>
             <C style={o.cardHeaderLeft}>
-              <U onPress={()=>G(e.id)}hitSlop={12}style={[o.smallCheckbox,O&&o.smallCheckboxChecked]}>
-                {O&&<Ce width={9}height={9}viewBox="0 0 24 24"fill="none">
-                    <Te d="M20 6L9 17l-5-5"stroke={r.white}strokeWidth="4"strokeLinecap="round"strokeLinejoin="round"/>
+              <A onPress={()=>G(r.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>}
-              </U>
+              </A>
 
-              <T style={o.serialNumber}>#{e.id+1}</T>
+              <T style={o.serialNumber}>#{r.id+1}</T>
 
-              <C style={[o.methodBadge,{backgroundColor:P}]}>
+              <C style={[o.methodBadge,{backgroundColor:O}]}>
                 <T style={o.methodBadgeText}>
-                  {e.method}
+                  {r.method}
                 </T>
               </C>
 
-              {e.client&&<C style={[o.chip,{backgroundColor:e.client==="axios"?`${r.purple}14`:e.client==="apollo"||e.client==="graphql"?`${r.pink500}14`:e.client==="xhr"?`${r.amber500}14`:`${r.sky500}14`,borderColor:e.client==="axios"?`${r.purple}30`:e.client==="apollo"||e.client==="graphql"?`${r.pink500}30`:e.client==="xhr"?`${r.amber500}30`:`${r.sky500}30`}]}>
-                  <T style={[o.chipText,{color:e.client==="axios"?r.purple:e.client==="apollo"||e.client==="graphql"?r.pink500:e.client==="xhr"?r.amber700:r.sky600}]}>
-                    {e.client.toUpperCase()}
+              {r.client&&<C style={[o.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={[o.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>
                 </C>}
 
               
-              {(e.url.toLowerCase().includes("graphql")||e.client==="apollo"||e.client==="graphql")&&<C style={[o.chip,{backgroundColor:r.roseBg,borderColor:r.roseBorder}]}>
-                  <T style={[o.chipText,{color:r.pink600}]}>
+              {(r.url.toLowerCase().includes("graphql")||r.client==="apollo"||r.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={[o.statusPill,{backgroundColor:S?`${r.errorColor}14`:R?`${r.darkOrange}14`:`${$}14`,borderColor:S?`${r.errorColor}33`:R?`${r.darkOrange}33`:`${$}33`}]}>
+            <C style={[o.statusPill,{backgroundColor:R?`${e.errorColor}14`:z?`${e.darkOrange}14`:`${I}14`,borderColor:R?`${e.errorColor}33`:z?`${e.darkOrange}33`:`${I}33`}]}>
               {Z()}
-              <T style={[o.statusPillText,{color:S?r.errorColor:R?r.darkOrange:$}]}>
+              <T style={[o.statusPillText,{color:R?e.errorColor:z?e.darkOrange:I}]}>
                 {X()}
               </T>
             </C>
           </C>
 
           
-          <U onPress={K}hitSlop={6}style={o.urlBox}>
+          <A onPress={K}hitSlop={6}style={o.urlBox}>
             <C style={o.urlMainRow}>
-              <We text={F.path}search={J}style={o.pathText}highlightStyle={o.highlight}numberOfLines={2}ellipsizeMode="middle"/>
+              <Pe text={S.path}search={J}style={o.pathText}highlightStyle={o.highlight}numberOfLines={2}ellipsizeMode="middle"/>
               <C style={o.urlBadgeRow}>
                 {ee&&<C style={o.jsonBadge}>
                     <T style={o.jsonBadgeText}>.json</T>
                   </C>}
-                {e.duplicateCount!=null&&e.duplicateCount>1&&<C style={o.dupBadge}>
-                    <T style={o.dupBadgeText}>×{e.duplicateCount}</T>
+                {r.duplicateCount!=null&&r.duplicateCount>1&&<C style={o.dupBadge}>
+                    <T style={o.dupBadgeText}>×{r.duplicateCount}</T>
                   </C>}
               </C>
             </C>
 
-            {F.host?<C style={o.hostRow}>
-                <C style={[o.protoBadge,{backgroundColor:F.isHttps?`${r.emerald600}12`:`${r.amber600}12`,borderColor:F.isHttps?`${r.emerald600}2B`:`${r.amber600}2B`}]}>
-                  <T style={[o.protoBadgeText,{color:F.isHttps?r.emerald600:r.amber700}]}>
-                    {F.isHttps?"HTTPS":"HTTP"}
+            {S.host?<C style={o.hostRow}>
+                <C style={[o.protoBadge,{backgroundColor:S.isHttps?`${e.emerald600}12`:`${e.amber600}12`,borderColor:S.isHttps?`${e.emerald600}2B`:`${e.amber600}2B`}]}>
+                  <T style={[o.protoBadgeText,{color:S.isHttps?e.emerald600:e.amber700}]}>
+                    {S.isHttps?"HTTPS":"HTTP"}
                   </T>
                 </C>
                 <T style={o.hostText}numberOfLines={1}ellipsizeMode="tail">
-                  {F.host}
+                  {S.host}
                 </T>
               </C>:null}
-          </U>
+          </A>
 
           
           <C style={o.cardFooterRow}>
             <C style={o.footerLeft}>
               <C style={o.cardDateRow}>
-                <He color={r.grayTextWeak}size={10}/>
+                <Le color={e.grayTextWeak}size={10}/>
                 <T style={o.cardDateText}>{Y}</T>
               </C>
 
-              {W&&<C style={o.callerChip}>
-                  <Pe color={r.sky600}size={8.5}/>
+              {P&&<C style={o.callerChip}>
+                  <Oe color={e.sky600}size={8.5}/>
                   <T style={o.callerChipText}numberOfLines={1}ellipsizeMode="middle">
-                    {W}
+                    {P}
                   </T>
                 </C>}
             </C>
 
             <C style={o.footerRight}>
-              {e.response!=null&&<C style={o.metaStatChip}>
-                  <Le color={r.purple}size={9}/>
+              {r.response!=null&&<C style={o.metaStatChip}>
+                  <$e color={e.purple}size={9}/>
                   <T style={o.metaStatText}>
-                    {Re(e.response)}
+                    {ze(r.response)}
                   </T>
                 </C>}
 
-              {e.duration!=null&&!S&&<C style={[o.metaStatChip,{backgroundColor:`${H}12`,borderColor:`${H}2E`}]}>
-                  <N color={H}size={9}/>
-                  <T style={[o.metaStatText,{color:H}]}>
-                    {e.duration}ms
+              {r.duration!=null&&!R&&<C style={[o.metaStatChip,{backgroundColor:`${L}12`,borderColor:`${L}2E`}]}>
+                  <N color={L}size={9}/>
+                  <T style={[o.metaStatText,{color:L}]}>
+                    {r.duration}ms
                   </T>
                 </C>}
             </C>
           </C>
 
           
-          {typeof e.duration=="number"&&e.duration>0&&!S&&<C style={o.waterfallContainer}>
-              <C style={[o.waterfallBar,{width:`${Math.min(100,Math.max(6,e.duration/1200*100))}%`,backgroundColor:H}]}/>
+          {typeof r.duration=="number"&&r.duration>0&&!R&&<C style={o.waterfallContainer}>
+              <C style={[o.waterfallBar,{width:`${Math.min(100,Math.max(6,r.duration/1200*100))}%`,backgroundColor:L}]}/>
             </C>}
         </C>
 
-        {L&&<I.View pointerEvents="none"style={[v.absoluteFill,{backgroundColor:P,opacity:A}]}/>}
-      </Ae>
-    </C>}),o=v.create({container:{paddingHorizontal:8,paddingVertical:3},card:{alignSelf:"stretch",borderRadius:10,overflow:"hidden",shadowColor:r.black,shadowOffset:{width:0,height:1},shadowOpacity:.04,shadowRadius:3,elevation:1,borderWidth:1,borderColor:"#E2E8F0",backgroundColor:r.white},cardBody:{paddingHorizontal:11,paddingTop:8,paddingBottom:7},cardHeaderRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:5,minHeight:20},cardHeaderLeft:{flexDirection:"row",alignItems:"center",flex:1,marginRight:6,gap:5,minWidth:0,flexWrap:"wrap"},smallCheckbox:{width:14,height:14,borderRadius:3.5,borderWidth:1.5,borderColor:r.grayTextWeak,alignItems:"center",justifyContent:"center",backgroundColor:r.white},smallCheckboxChecked:{backgroundColor:r.purple,borderColor:r.purple},serialNumber:{fontFamily:B.interBold,color:r.grayTextWeak,fontSize:9.5},methodBadge:{paddingHorizontal:6,paddingVertical:2,borderRadius:5,alignItems:"center",justifyContent:"center"},methodBadgeText:{fontFamily:B.interBold,fontSize:9,lineHeight:11,letterSpacing:.5,color:r.white},chip:{paddingHorizontal:5,paddingVertical:1.5,borderRadius:4,borderWidth:1},chipText:{fontFamily:B.interBold,fontSize:8.5,lineHeight:11},statusPill:{flexDirection:"row",alignItems:"center",gap:3.5,paddingHorizontal:6.5,paddingVertical:2,borderRadius:6,borderWidth:1,flexShrink:0},statusPillText:{fontFamily:B.interBold,fontSize:9.5,lineHeight:12},urlBox:{backgroundColor:"#F8FAFC",borderRadius:7,borderWidth:1,borderColor:"#E2E8F0",paddingHorizontal:8,paddingVertical:5,marginVertical:3,gap:3},urlMainRow:{flexDirection:"row",alignItems:"flex-start",justifyContent:"space-between",gap:6},pathText:{fontFamily:B.interBold,fontSize:12,lineHeight:16,color:"#0F172A",flex:1},urlBadgeRow:{flexDirection:"row",alignItems:"center",gap:4,flexShrink:0},jsonBadge:{backgroundColor:`${r.darkOrange}14`,borderColor:`${r.darkOrange}2E`,borderWidth:1,paddingHorizontal:4,paddingVertical:1,borderRadius:3},jsonBadgeText:{fontFamily:B.interBold,fontSize:8.5,color:r.darkOrange},dupBadge:{backgroundColor:`${r.purple}14`,borderColor:`${r.purple}2E`,borderWidth:1,paddingHorizontal:4,paddingVertical:1,borderRadius:3},dupBadgeText:{fontFamily:B.interBold,fontSize:8.5,color:r.purple},hostRow:{flexDirection:"row",alignItems:"center",gap:4.5},protoBadge:{paddingHorizontal:4,paddingVertical:1,borderRadius:3,borderWidth:1},protoBadgeText:{fontFamily:B.interBold,fontSize:7.5,lineHeight:9},hostText:{fontFamily:B.interMedium,fontSize:10,lineHeight:13,color:"#64748B",flex:1},highlight:{backgroundColor:r.yellowHighlight,color:r.primaryBlack,borderRadius:2},cardFooterRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginTop:3,gap:6},footerLeft:{flexDirection:"row",alignItems:"center",gap:5,flex:1,minWidth:0},footerRight:{flexDirection:"row",alignItems:"center",gap:4,flexShrink:0},cardDateRow:{flexDirection:"row",alignItems:"center",gap:3},cardDateText:{fontFamily:B.interRegular,fontSize:9.5,lineHeight:12,color:"#94A3B8"},callerChip:{flexDirection:"row",alignItems:"center",gap:2.5,backgroundColor:"#F0F9FF",borderColor:"#BAE6FD",borderWidth:1,paddingHorizontal:4.5,paddingVertical:1,borderRadius:4,flexShrink:1,minWidth:0},callerChipText:{color:"#0284C7",fontSize:8.5,lineHeight:11,fontFamily:B.interBold},metaStatChip:{flexDirection:"row",alignItems:"center",gap:2.5,backgroundColor:"#F5F3FF",borderColor:"#DDD6FE",borderWidth:1,paddingHorizontal:5,paddingVertical:1.5,borderRadius:4},metaStatText:{fontFamily:B.interBold,color:"#7C3AED",fontSize:9,lineHeight:11},waterfallContainer:{height:2,width:"100%",backgroundColor:"#F1F5F9",borderRadius:1,overflow:"hidden",marginTop:5},waterfallBar:{height:"100%",borderRadius:1}});export default Me;
+        {$&&<W.View pointerEvents="none"style={[U.absoluteFill,{backgroundColor:O,opacity:v}]}/>}
+      </Me>
+    </C>}),o=U.create({container:{paddingHorizontal:8,paddingVertical:3},card:{alignSelf:"stretch",borderRadius:10,overflow:"hidden",borderWidth:1,borderColor:e.dividerColor,shadowColor:e.shadowColorString},cardBody:{paddingHorizontal:11,paddingTop:8,paddingBottom:7},cardHeaderRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:5,minHeight:20},cardHeaderLeft:{flexDirection:"row",alignItems:"center",flex:1,marginRight:6,gap:5,minWidth:0,flexWrap:"wrap"},smallCheckbox:{width:14,height:14,borderRadius:3.5,borderWidth:1.5,borderColor:e.grayTextWeak,alignItems:"center",justifyContent:"center",backgroundColor:e.white},smallCheckboxChecked:{backgroundColor:e.purple,borderColor:e.purple},serialNumber:{fontFamily:B.interBold,color:e.grayTextWeak,fontSize:9.5},methodBadge:{paddingHorizontal:6,paddingVertical:2,borderRadius:5,alignItems:"center",justifyContent:"center"},methodBadgeText:{fontFamily:B.interBold,fontSize:9,lineHeight:11,letterSpacing:.5,color:e.white},chip:{paddingHorizontal:5,paddingVertical:1.5,borderRadius:4,borderWidth:1},chipText:{fontFamily:B.interBold,fontSize:8.5,lineHeight:11},statusPill:{flexDirection:"row",alignItems:"center",gap:3.5,paddingHorizontal:6.5,paddingVertical:2,borderRadius:6,borderWidth:1,flexShrink:0},statusPillText:{fontFamily:B.interBold,fontSize:9.5,lineHeight:12},urlBox:{backgroundColor:e.grayBackground,borderRadius:7,borderWidth:1,borderColor:e.dividerColor,paddingHorizontal:8,paddingVertical:5,marginVertical:3,gap:3},urlMainRow:{flexDirection:"row",alignItems:"flex-start",justifyContent:"space-between",gap:6},pathText:{fontFamily:B.interBold,fontSize:12,lineHeight:16,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,paddingVertical:1,borderRadius:3},jsonBadgeText:{fontFamily:B.interBold,fontSize:8.5,color:e.darkOrange},dupBadge:{backgroundColor:`${e.purple}14`,borderColor:`${e.purple}2E`,borderWidth:1,paddingHorizontal:4,paddingVertical:1,borderRadius:3},dupBadgeText:{fontFamily:B.interBold,fontSize:8.5,color:e.purple},hostRow:{flexDirection:"row",alignItems:"center",gap:4.5},protoBadge:{paddingHorizontal:4,paddingVertical:1,borderRadius:3,borderWidth:1},protoBadgeText:{fontFamily:B.interBold,fontSize:7.5,lineHeight:9},hostText:{fontFamily:B.interMedium,fontSize:10,lineHeight:13,color:e.grayTextWeak,flex:1},highlight:{backgroundColor:e.yellowHighlight,color:e.primaryBlack,borderRadius:2},cardFooterRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginTop:3,gap:6},footerLeft:{flexDirection:"row",alignItems:"center",gap:5,flex:1,minWidth:0},footerRight:{flexDirection:"row",alignItems:"center",gap:4,flexShrink:0},cardDateRow:{flexDirection:"row",alignItems:"center",gap:3},cardDateText:{fontFamily:B.interRegular,fontSize:9.5,lineHeight:12,color:e.slate400},callerChip:{flexDirection:"row",alignItems:"center",gap:2.5,backgroundColor:e.skySoftBg,borderColor:e.skySoftBorder,borderWidth:1,paddingHorizontal:4.5,paddingVertical:1,borderRadius:4,flexShrink:1,minWidth:0},callerChipText:{color:e.skySoftText,fontSize:8.5,lineHeight:11,fontFamily:B.interBold},metaStatChip:{flexDirection:"row",alignItems:"center",gap:2.5,backgroundColor:e.violetSoftBg,borderColor:e.violetSoftBorder,borderWidth:1,paddingHorizontal:5,paddingVertical:1.5,borderRadius:4},metaStatText:{fontFamily:B.interBold,color:e.violetSoftText,fontSize:9,lineHeight:11},waterfallContainer:{height:2,width:"100%",backgroundColor:e.graySurface,borderRadius:1,overflow:"hidden",marginTop:5},waterfallBar:{height:"100%",borderRadius:1}});export default Ae;

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

@@ -158,3 +158,13 @@ export declare const ScreencastIcon: ({ color, size, }: IconProps) => React.JSX.
 export declare const ListIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const GridIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const MinimizeWindowIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const BookOpenIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const WrenchIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const ChevronUpIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const MessageSquareIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const SparklesIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const AngryFaceIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const NeutralFaceIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const SmileFaceIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const StarFaceIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const HeartFaceIcon: ({ color, size, }: IconProps) => React.JSX.Element;