react-native-inapp-inspector 2.5.2 → 2.5.3

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

@@ -1,4 +1,4 @@
-import{useEffect as te,useMemo as N,useState as le}from"react";import{Modal as Ce,Pressable as Y,ScrollView as Te,StyleSheet as we,Text as S,TouchableOpacity as L,View as T}from"react-native";import{useInspector as ke}from"./InspectorContext";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as B}from"../../styles/AppFonts";import{METHOD_COLORS as me}from"../../constants";import{FilterIcon as Se,CloseWhite as Be,ClockIcon as K,CircleCheckIcon as Pe,CircleAlertIcon as X,CircleXIcon as Ie,LayersIcon as A,RepeatIcon as Oe,ShieldAlertIcon as ze,BoltIcon as Ve,GlobeIcon as Re,LockIcon as Fe,UnlockIcon as Le,RocketIcon as We,TurtleIcon as Ee,HourglassIcon as Me,PackageIcon as Ne}from"../NetworkIcons";import J from"../TouchableScale";export const DEFAULT_NETWORK_FILTERS={statusCodes:new Set(["all"]),methods:new Set(["all"]),latency:"all",protocol:"all",sortBy:"time_desc"},isNetworkFiltersDefault=I=>(I.statusCodes.has("all")||I.statusCodes.size===0)&&(I.methods.has("all")||I.methods.size===0)&&I.latency==="all"&&I.protocol==="all"&&I.sortBy==="time_desc",NetworkFilterModal=({visible:I,onClose:E,filters:R,onApply:Z,searchQuery:M=""})=>{const{logs:W}=ke(),[r,F]=le(()=>({...R,statusCodes:new Set(R.statusCodes),methods:new Set(R.methods)}));te(()=>{I&&F({...R,statusCodes:new Set(R.statusCodes),methods:new Set(R.methods)})},[I,R]);const P=N(()=>{const e={all:W.length,"2xx":0,"3xx":0,"4xx":0,"5xx":0,failed:0},l={all:W.length};let C=0,g=0,O=0,v=0,_=0;for(const z of W){const V=typeof z.status=="number"?z.status:parseInt(String(z.status),10);z.status===0||z.status==null?e.failed=(e.failed||0)+1:isNaN(V)||(V>=200&&V<300?e["2xx"]=(e["2xx"]||0)+1:V>=300&&V<400?e["3xx"]=(e["3xx"]||0)+1:V>=400&&V<500?e["4xx"]=(e["4xx"]||0)+1:V>=500&&(e["5xx"]=(e["5xx"]||0)+1));const U=(z.method||"GET").toUpperCase();l[U]=(l[U]||0)+1;const G=z.duration||0;G<200?C++:G<=500?g++:O++,(z.url||"").toLowerCase().startsWith("https")?v++:_++}return{statusMap:e,methodMap:l,fastCount:C,normalCount:g,slowCount:O,httpsCount:v,httpCount:_}},[W]),D=N(()=>W.filter(e=>{if(!r.statusCodes.has("all")&&r.statusCodes.size>0){const g=typeof e.status=="number"?e.status:parseInt(String(e.status),10);let O=!1;if(r.statusCodes.has("failed")&&(e.status===0||e.status==null)&&(O=!0),r.statusCodes.has("2xx")&&!isNaN(g)&&g>=200&&g<300&&(O=!0),r.statusCodes.has("3xx")&&!isNaN(g)&&g>=300&&g<400&&(O=!0),r.statusCodes.has("4xx")&&!isNaN(g)&&g>=400&&g<500&&(O=!0),r.statusCodes.has("5xx")&&!isNaN(g)&&g>=500&&(O=!0),!O)return!1}if(!r.methods.has("all")&&r.methods.size>0){const g=(e.method||"GET").toUpperCase();if(!r.methods.has(g))return!1}const l=e.duration||0;if(r.latency==="fast"&&l>=200||r.latency==="normal"&&(l<200||l>500)||r.latency==="slow"&&l<=500)return!1;const C=(e.url||"").toLowerCase().startsWith("https");if(r.protocol==="https"&&!C||r.protocol==="http"&&C)return!1;if(M.trim().length>0){const g=M.toLowerCase();if(!(e.url||"").toLowerCase().includes(g))return!1}return!0}).length,[W,r,M]),Q=e=>{F(l=>{const C=new Set(l.statusCodes);return e==="all"?{...l,statusCodes:new Set(["all"])}:(C.delete("all"),C.has(e)?(C.delete(e),C.size===0&&C.add("all")):C.add(e),{...l,statusCodes:C})})},H=e=>{F(l=>{const C=new Set(l.methods);return e==="all"?{...l,methods:new Set(["all"])}:(C.delete("all"),C.has(e)?(C.delete(e),C.size===0&&C.add("all")):C.add(e),{...l,methods:C})})},ee=()=>{F({statusCodes:new Set(["all"]),methods:new Set(["all"]),latency:"all",protocol:"all",sortBy:"time_desc"})},oe=()=>{Z(r),E()},$=N(()=>{let e=0;return!r.statusCodes.has("all")&&r.statusCodes.size>0&&(e+=r.statusCodes.size),!r.methods.has("all")&&r.methods.size>0&&(e+=r.methods.size),r.latency!=="all"&&e++,r.protocol!=="all"&&e++,r.sortBy!=="time_desc"&&e++,e},[r]);return<Ce visible={I}transparent animationType="fade"onRequestClose={E}>
+import{useEffect as le,useMemo as N,useState as re}from"react";import{Modal as Ce,Pressable as Y,ScrollView as Te,StyleSheet as me,Text as S,TouchableOpacity as W,View as T}from"react-native";import{useInspector as we}from"./InspectorContext";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as P}from"../../styles/AppFonts";import{METHOD_COLORS as ke}from"../../constants";import{FilterIcon as Se,CloseWhite as Be,ClockIcon as K,CircleCheckIcon as Pe,CircleAlertIcon as X,CircleXIcon as Ie,LayersIcon as D,RepeatIcon as Oe,ShieldAlertIcon as ze,BoltIcon as Ve,GlobeIcon as Fe,LockIcon as Re,UnlockIcon as Le,RocketIcon as We,TurtleIcon as Me,HourglassIcon as Ee,PackageIcon as Ae}from"../NetworkIcons";import J from"../TouchableScale";import{useTranslation as Ne}from"../../i18n";export const DEFAULT_NETWORK_FILTERS={statusCodes:new Set(["all"]),methods:new Set(["all"]),latency:"all",protocol:"all",sortBy:"time_desc"},isNetworkFiltersDefault=O=>(O.statusCodes.has("all")||O.statusCodes.size===0)&&(O.methods.has("all")||O.methods.size===0)&&O.latency==="all"&&O.protocol==="all"&&O.sortBy==="time_desc",NetworkFilterModal=({visible:O,onClose:E,filters:R,onApply:Z,searchQuery:A=""})=>{const{logs:M}=we(),{t:B}=Ne(),[r,L]=re(()=>({...R,statusCodes:new Set(R.statusCodes),methods:new Set(R.methods)}));le(()=>{O&&L({...R,statusCodes:new Set(R.statusCodes),methods:new Set(R.methods)})},[O,R]);const I=N(()=>{const e={all:M.length,"2xx":0,"3xx":0,"4xx":0,"5xx":0,failed:0},l={all:M.length};let C=0,g=0,z=0,v=0,_=0;for(const V of M){const F=typeof V.status=="number"?V.status:parseInt(String(V.status),10);V.status===0||V.status==null?e.failed=(e.failed||0)+1:isNaN(F)||(F>=200&&F<300?e["2xx"]=(e["2xx"]||0)+1:F>=300&&F<400?e["3xx"]=(e["3xx"]||0)+1:F>=400&&F<500?e["4xx"]=(e["4xx"]||0)+1:F>=500&&(e["5xx"]=(e["5xx"]||0)+1));const U=(V.method||"GET").toUpperCase();l[U]=(l[U]||0)+1;const G=V.duration||0;G<200?C++:G<=500?g++:z++,(V.url||"").toLowerCase().startsWith("https")?v++:_++}return{statusMap:e,methodMap:l,fastCount:C,normalCount:g,slowCount:z,httpsCount:v,httpCount:_}},[M]),Q=N(()=>M.filter(e=>{if(!r.statusCodes.has("all")&&r.statusCodes.size>0){const g=typeof e.status=="number"?e.status:parseInt(String(e.status),10);let z=!1;if(r.statusCodes.has("failed")&&(e.status===0||e.status==null)&&(z=!0),r.statusCodes.has("2xx")&&!isNaN(g)&&g>=200&&g<300&&(z=!0),r.statusCodes.has("3xx")&&!isNaN(g)&&g>=300&&g<400&&(z=!0),r.statusCodes.has("4xx")&&!isNaN(g)&&g>=400&&g<500&&(z=!0),r.statusCodes.has("5xx")&&!isNaN(g)&&g>=500&&(z=!0),!z)return!1}if(!r.methods.has("all")&&r.methods.size>0){const g=(e.method||"GET").toUpperCase();if(!r.methods.has(g))return!1}const l=e.duration||0;if(r.latency==="fast"&&l>=200||r.latency==="normal"&&(l<200||l>500)||r.latency==="slow"&&l<=500)return!1;const C=(e.url||"").toLowerCase().startsWith("https");if(r.protocol==="https"&&!C||r.protocol==="http"&&C)return!1;if(A.trim().length>0){const g=A.toLowerCase();if(!(e.url||"").toLowerCase().includes(g))return!1}return!0}).length,[M,r,A]),ee=e=>{L(l=>{const C=new Set(l.statusCodes);return e==="all"?{...l,statusCodes:new Set(["all"])}:(C.delete("all"),C.has(e)?(C.delete(e),C.size===0&&C.add("all")):C.add(e),{...l,statusCodes:C})})},H=e=>{L(l=>{const C=new Set(l.methods);return e==="all"?{...l,methods:new Set(["all"])}:(C.delete("all"),C.has(e)?(C.delete(e),C.size===0&&C.add("all")):C.add(e),{...l,methods:C})})},oe=()=>{L({statusCodes:new Set(["all"]),methods:new Set(["all"]),latency:"all",protocol:"all",sortBy:"time_desc"})},te=()=>{Z(r),E()},$=N(()=>{let e=0;return!r.statusCodes.has("all")&&r.statusCodes.size>0&&(e+=r.statusCodes.size),!r.methods.has("all")&&r.methods.size>0&&(e+=r.methods.size),r.latency!=="all"&&e++,r.protocol!=="all"&&e++,r.sortBy!=="time_desc"&&e++,e},[r]);return<Ce visible={O}transparent animationType="fade"onRequestClose={E}>
       <Y style={o.overlay}onPress={E}>
         <Y style={o.modalCard}onPress={e=>e.stopPropagation()}>
           
@@ -9,27 +9,27 @@ import{useEffect as te,useMemo as N,useState as le}from"react";import{Modal as C
               </T>
               <T>
                 <T style={{flexDirection:"row",alignItems:"center",gap:6}}>
-                  <S style={o.title}>Network Filters</S>
+                  <S style={o.title}>{B("filters.networkFiltersTitle","Network Filters")}</S>
                   {$>0&&<T style={o.activeBadge}>
-                      <S style={o.activeBadgeText}>{$} active</S>
+                      <S style={o.activeBadgeText}>{$} {B("common.active","active")}</S>
                     </T>}
                 </T>
-                <S style={o.subtitle}>Filter requests by status, method & speed</S>
+                <S style={o.subtitle}>{B("filters.networkFiltersSubtitle","Filter requests by status, method & speed")}</S>
               </T>
             </T>
-            <L onPress={E}hitSlop={10}style={o.closeBtn}>
+            <W onPress={E}hitSlop={10}style={o.closeBtn}>
               <Be size={14}color={t.grayText}/>
-            </L>
+            </W>
           </T>
 
           <Te style={o.scrollArea}contentContainerStyle={o.scrollContent}showsVerticalScrollIndicator={!1}>
             
             <T style={o.section}>
-              <S style={o.sectionTitle}>HTTP STATUS CODE</S>
+              <S style={o.sectionTitle}>{B("filters.httpStatusCode","HTTP STATUS CODE")}</S>
               <T style={o.chipsWrap}>
-                {[{key:"all",label:"All Statuses",color:t.purple,icon:A,count:P.statusMap.all},{key:"2xx",label:"2xx Success",color:t.greenColor,icon:Pe,count:P.statusMap["2xx"]||0},{key:"3xx",label:"3xx Redirect",color:t.warningIconGold,icon:Oe,count:P.statusMap["3xx"]||0},{key:"4xx",label:"4xx Client Error",color:t.darkOrange,icon:X,count:P.statusMap["4xx"]||0},{key:"5xx",label:"5xx Server Error",color:t.errorColor,icon:Ie,count:P.statusMap["5xx"]||0},{key:"failed",label:"Network Failed / 0",color:t.errorColor,icon:ze,count:P.statusMap.failed||0}].map(e=>{const l=r.statusCodes.has(e.key),C=e.icon;return<L key={e.key}activeOpacity={.7}onPress={()=>Q(e.key)}style={[o.chip,l&&{backgroundColor:`${e.color}15`,borderColor:e.color}]}>
+                {[{key:"all",label:B("common.all","All Statuses"),color:t.purple,icon:D,count:I.statusMap.all},{key:"2xx",label:"2xx Success",color:t.greenColor,icon:Pe,count:I.statusMap["2xx"]||0},{key:"3xx",label:"3xx Redirect",color:t.warningIconGold,icon:Oe,count:I.statusMap["3xx"]||0},{key:"4xx",label:"4xx Client Error",color:t.darkOrange,icon:X,count:I.statusMap["4xx"]||0},{key:"5xx",label:"5xx Server Error",color:t.errorColor,icon:Ie,count:I.statusMap["5xx"]||0},{key:"failed",label:"Network Failed / 0",color:t.errorColor,icon:ze,count:I.statusMap.failed||0}].map(e=>{const l=r.statusCodes.has(e.key),C=e.icon;return<W key={e.key}activeOpacity={.7}onPress={()=>ee(e.key)}style={[o.chip,l&&{backgroundColor:`${e.color}15`,borderColor:e.color}]}>
                       <C size={13}color={l?e.color:t.grayTextWeak}/>
-                      <S style={[o.chipLabel,l&&{color:e.color,fontFamily:B.interBold}]}>
+                      <S style={[o.chipLabel,l&&{color:e.color,fontFamily:P.interBold}]}>
                         {e.label}
                       </S>
                       <T style={[o.countPill,l&&{backgroundColor:`${e.color}25`}]}>
@@ -37,29 +37,29 @@ import{useEffect as te,useMemo as N,useState as le}from"react";import{Modal as C
                           {e.count}
                         </S>
                       </T>
-                    </L>})}
+                    </W>})}
               </T>
             </T>
 
             
             <T style={o.section}>
-              <S style={o.sectionTitle}>HTTP METHOD</S>
+              <S style={o.sectionTitle}>{B("filters.httpMethod","HTTP METHOD")}</S>
               <T style={o.chipsWrap}>
-                <L activeOpacity={.7}onPress={()=>H("all")}style={[o.chip,r.methods.has("all")&&{backgroundColor:`${t.purple}15`,borderColor:t.purple}]}>
-                  <A size={12}color={r.methods.has("all")?t.purple:t.grayTextWeak}/>
-                  <S style={[o.chipLabel,r.methods.has("all")&&{color:t.purple,fontFamily:B.interBold}]}>
-                    All Methods
+                <W activeOpacity={.7}onPress={()=>H("all")}style={[o.chip,r.methods.has("all")&&{backgroundColor:`${t.purple}15`,borderColor:t.purple}]}>
+                  <D size={12}color={r.methods.has("all")?t.purple:t.grayTextWeak}/>
+                  <S style={[o.chipLabel,r.methods.has("all")&&{color:t.purple,fontFamily:P.interBold}]}>
+                    {B("common.all","All Methods")}
                   </S>
                   <T style={[o.countPill,r.methods.has("all")&&{backgroundColor:`${t.purple}25`}]}>
                     <S style={[o.countPillText,r.methods.has("all")&&{color:t.purple}]}>
-                      {P.methodMap.all}
+                      {I.methodMap.all}
                     </S>
                   </T>
-                </L>
+                </W>
 
-                {["GET","POST","PUT","DELETE","PATCH","QUERY","OPTIONS","HEAD"].map(e=>{const l=r.methods.has(e),C=me[e]||t.grayText,g=P.methodMap[e]||0;return<L key={e}activeOpacity={.7}onPress={()=>H(e)}style={[o.chip,l&&{backgroundColor:`${C}18`,borderColor:C}]}>
+                {["GET","POST","PUT","DELETE","PATCH","QUERY","OPTIONS","HEAD"].map(e=>{const l=r.methods.has(e),C=ke[e]||t.grayText,g=I.methodMap[e]||0;return<W key={e}activeOpacity={.7}onPress={()=>H(e)}style={[o.chip,l&&{backgroundColor:`${C}18`,borderColor:C}]}>
                       <T style={[o.methodDot,{backgroundColor:C}]}/>
-                      <S style={[o.chipLabel,l&&{color:C,fontFamily:B.interBold}]}>
+                      <S style={[o.chipLabel,l&&{color:C,fontFamily:P.interBold}]}>
                         {e}
                       </S>
                       <T style={[o.countPill,l&&{backgroundColor:`${C}25`}]}>
@@ -67,17 +67,17 @@ import{useEffect as te,useMemo as N,useState as le}from"react";import{Modal as C
                           {g}
                         </S>
                       </T>
-                    </L>})}
+                    </W>})}
               </T>
             </T>
 
             
             <T style={o.section}>
-              <S style={o.sectionTitle}>LATENCY & SPEED</S>
+              <S style={o.sectionTitle}>{B("filters.latencySpeed","LATENCY & SPEED")}</S>
               <T style={o.chipsWrap}>
-                {[{key:"all",label:"All Speeds",color:t.purple,icon:A},{key:"fast",label:"Fast (<200ms)",color:t.greenColor,icon:Ve,count:P.fastCount},{key:"normal",label:"Normal (200-500ms)",color:t.skyBlue,icon:K,count:P.normalCount},{key:"slow",label:"Slow (>500ms)",color:t.errorColor,icon:X,count:P.slowCount}].map(e=>{const l=r.latency===e.key,C=e.icon;return<L key={e.key}activeOpacity={.7}onPress={()=>F(g=>({...g,latency:e.key}))}style={[o.chip,l&&{backgroundColor:`${e.color}15`,borderColor:e.color}]}>
+                {[{key:"all",label:B("common.all","All Speeds"),color:t.purple,icon:D},{key:"fast",label:"Fast (<200ms)",color:t.greenColor,icon:Ve,count:I.fastCount},{key:"normal",label:"Normal (200-500ms)",color:t.skyBlue,icon:K,count:I.normalCount},{key:"slow",label:"Slow (>500ms)",color:t.errorColor,icon:X,count:I.slowCount}].map(e=>{const l=r.latency===e.key,C=e.icon;return<W key={e.key}activeOpacity={.7}onPress={()=>L(g=>({...g,latency:e.key}))}style={[o.chip,l&&{backgroundColor:`${e.color}15`,borderColor:e.color}]}>
                       <C size={13}color={l?e.color:t.grayTextWeak}/>
-                      <S style={[o.chipLabel,l&&{color:e.color,fontFamily:B.interBold}]}>
+                      <S style={[o.chipLabel,l&&{color:e.color,fontFamily:P.interBold}]}>
                         {e.label}
                       </S>
                       {e.count!=null&&<T style={[o.countPill,l&&{backgroundColor:`${e.color}25`}]}>
@@ -85,17 +85,17 @@ import{useEffect as te,useMemo as N,useState as le}from"react";import{Modal as C
                             {e.count}
                           </S>
                         </T>}
-                    </L>})}
+                    </W>})}
               </T>
             </T>
 
             
             <T style={o.section}>
-              <S style={o.sectionTitle}>PROTOCOL</S>
+              <S style={o.sectionTitle}>{B("filters.protocol","PROTOCOL")}</S>
               <T style={o.chipsWrap}>
-                {[{key:"all",label:"All Protocols",color:t.purple,icon:Re},{key:"https",label:"HTTPS Secure",color:t.mintGreenText,icon:Fe,count:P.httpsCount},{key:"http",label:"HTTP Insecure",color:t.amber700,icon:Le,count:P.httpCount}].map(e=>{const l=r.protocol===e.key,C=e.icon;return<L key={e.key}activeOpacity={.7}onPress={()=>F(g=>({...g,protocol:e.key}))}style={[o.chip,l&&{backgroundColor:`${e.color}15`,borderColor:e.color}]}>
+                {[{key:"all",label:B("common.all","All Protocols"),color:t.purple,icon:Fe},{key:"https",label:"HTTPS Secure",color:t.mintGreenText,icon:Re,count:I.httpsCount},{key:"http",label:"HTTP Insecure",color:t.amber700,icon:Le,count:I.httpCount}].map(e=>{const l=r.protocol===e.key,C=e.icon;return<W key={e.key}activeOpacity={.7}onPress={()=>L(g=>({...g,protocol:e.key}))}style={[o.chip,l&&{backgroundColor:`${e.color}15`,borderColor:e.color}]}>
                       <C size={13}color={l?e.color:t.grayTextWeak}/>
-                      <S style={[o.chipLabel,l&&{color:e.color,fontFamily:B.interBold}]}>
+                      <S style={[o.chipLabel,l&&{color:e.color,fontFamily:P.interBold}]}>
                         {e.label}
                       </S>
                       {e.count!=null&&<T style={[o.countPill,l&&{backgroundColor:`${e.color}25`}]}>
@@ -103,36 +103,36 @@ import{useEffect as te,useMemo as N,useState as le}from"react";import{Modal as C
                             {e.count}
                           </S>
                         </T>}
-                    </L>})}
+                    </W>})}
               </T>
             </T>
 
             
             <T style={o.section}>
-              <S style={o.sectionTitle}>SORT BY</S>
+              <S style={o.sectionTitle}>{B("filters.sortBy","SORT BY")}</S>
               <T style={o.chipsWrap}>
-                {[{key:"time_desc",label:"Newest First (Default)",icon:K},{key:"time_asc",label:"Oldest First",icon:Me},{key:"duration_desc",label:"Slowest Response",icon:Ee},{key:"duration_asc",label:"Fastest Response",icon:We},{key:"size_desc",label:"Largest Response Size",icon:Ne}].map(e=>{const l=r.sortBy===e.key,C=e.icon;return<L key={e.key}activeOpacity={.7}onPress={()=>F(g=>({...g,sortBy:e.key}))}style={[o.chip,l&&{backgroundColor:`${t.purple}15`,borderColor:t.purple}]}>
+                {[{key:"time_desc",label:"Newest First",icon:K},{key:"time_asc",label:"Oldest First",icon:Ee},{key:"duration_desc",label:"Slowest Response",icon:Me},{key:"duration_asc",label:"Fastest Response",icon:We},{key:"size_desc",label:"Largest Response Size",icon:Ae}].map(e=>{const l=r.sortBy===e.key,C=e.icon;return<W key={e.key}activeOpacity={.7}onPress={()=>L(g=>({...g,sortBy:e.key}))}style={[o.chip,l&&{backgroundColor:`${t.purple}15`,borderColor:t.purple}]}>
                       <C size={13}color={l?t.purple:t.grayTextWeak}/>
-                      <S style={[o.chipLabel,l&&{color:t.purple,fontFamily:B.interBold}]}>
+                      <S style={[o.chipLabel,l&&{color:t.purple,fontFamily:P.interBold}]}>
                         {e.label}
                       </S>
-                    </L>})}
+                    </W>})}
               </T>
             </T>
           </Te>
 
           
           <T style={o.footer}>
-            <J onPress={ee}style={o.resetBtn}>
-              <S style={o.resetBtnText}>Reset All</S>
+            <J onPress={oe}style={o.resetBtn}>
+              <S style={o.resetBtnText}>{B("filters.resetAll","Reset All")}</S>
             </J>
 
-            <J onPress={oe}style={o.applyBtn}>
+            <J onPress={te}style={o.applyBtn}>
               <S style={o.applyBtnText}>
-                Apply ({D} Request{D===1?"":"s"})
+                {B("filters.applyFilters","Apply")} ({Q})
               </S>
             </J>
           </T>
         </Y>
       </Y>
-    </Ce>};const o=we.create({overlay:{flex:1,backgroundColor:"rgba(0, 0, 0, 0.55)",justifyContent:"flex-end"},modalCard:{backgroundColor:t.primaryLight,borderTopLeftRadius:20,borderTopRightRadius:20,maxHeight:"85%",shadowColor:t.black,shadowOffset:{width:0,height:-4},shadowOpacity:.15,shadowRadius:10,elevation:8},header:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:16,paddingTop:16,paddingBottom:12,borderBottomWidth:1,borderBottomColor:t.grayBorderSecondary},headerLeft:{flexDirection:"row",alignItems:"center",gap:10,flex:1},iconCircle:{width:34,height:34,borderRadius:10,backgroundColor:`${t.purple}15`,alignItems:"center",justifyContent:"center"},title:{fontFamily:B.interBold,fontSize:16,color:t.primaryBlack},subtitle:{fontFamily:B.interRegular,fontSize:11,color:t.grayText,marginTop:1},activeBadge:{backgroundColor:`${t.purple}20`,paddingHorizontal:6,paddingVertical:1.5,borderRadius:8,borderWidth:1,borderColor:`${t.purple}40`},activeBadgeText:{fontFamily:B.interBold,fontSize:9.5,color:t.purple},closeBtn:{padding:6},scrollArea:{maxHeight:460},scrollContent:{padding:16,gap:16},section:{gap:8},sectionTitle:{fontFamily:B.interBold,fontSize:11,color:t.grayTextWeak,letterSpacing:.8},chipsWrap:{flexDirection:"row",flexWrap:"wrap",gap:8},chip:{flexDirection:"row",alignItems:"center",gap:6,paddingHorizontal:10,paddingVertical:6,borderRadius:8,backgroundColor:t.grayBackground,borderWidth:1,borderColor:t.grayBorderSecondary},chipLabel:{fontFamily:B.interMedium,fontSize:12,color:t.primaryBlack},methodDot:{width:6.5,height:6.5,borderRadius:3.5},countPill:{backgroundColor:`${t.grayBorderSecondary}50`,paddingHorizontal:5,paddingVertical:1,borderRadius:6},countPillText:{fontFamily:B.interBold,fontSize:9.5,color:t.grayText},footer:{flexDirection:"row",alignItems:"center",gap:10,paddingHorizontal:16,paddingVertical:14,borderTopWidth:1,borderTopColor:t.grayBorderSecondary,backgroundColor:t.primaryLight},resetBtn:{flex:1,paddingVertical:11,borderRadius:10,borderWidth:1,borderColor:t.grayBorderSecondary,alignItems:"center",justifyContent:"center",backgroundColor:t.grayBackground},resetBtnText:{fontFamily:B.interBold,fontSize:13,color:t.grayTextStrong},applyBtn:{flex:2,paddingVertical:11,borderRadius:10,alignItems:"center",justifyContent:"center",backgroundColor:t.purple,shadowColor:t.purple,shadowOffset:{width:0,height:2},shadowOpacity:.25,shadowRadius:4,elevation:3},applyBtnText:{fontFamily:B.interBold,fontSize:13,color:t.white}});export default NetworkFilterModal;
+    </Ce>};const o=me.create({overlay:{flex:1,backgroundColor:"rgba(0, 0, 0, 0.55)",justifyContent:"flex-end"},modalCard:{backgroundColor:t.primaryLight,borderTopLeftRadius:20,borderTopRightRadius:20,maxHeight:"85%",shadowColor:t.black,shadowOffset:{width:0,height:-4},shadowOpacity:.15,shadowRadius:10,elevation:8},header:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:16,paddingTop:16,paddingBottom:12,borderBottomWidth:1,borderBottomColor:t.grayBorderSecondary},headerLeft:{flexDirection:"row",alignItems:"center",gap:10,flex:1},iconCircle:{width:34,height:34,borderRadius:10,backgroundColor:`${t.purple}15`,alignItems:"center",justifyContent:"center"},title:{fontFamily:P.interBold,fontSize:16,color:t.primaryBlack},subtitle:{fontFamily:P.interRegular,fontSize:11,color:t.grayText,marginTop:1},activeBadge:{backgroundColor:`${t.purple}20`,paddingHorizontal:6,paddingVertical:1.5,borderRadius:8,borderWidth:1,borderColor:`${t.purple}40`},activeBadgeText:{fontFamily:P.interBold,fontSize:9.5,color:t.purple},closeBtn:{padding:6},scrollArea:{maxHeight:460},scrollContent:{padding:16,gap:16},section:{gap:8},sectionTitle:{fontFamily:P.interBold,fontSize:11,color:t.grayTextWeak,letterSpacing:.8},chipsWrap:{flexDirection:"row",flexWrap:"wrap",gap:8},chip:{flexDirection:"row",alignItems:"center",gap:6,paddingHorizontal:10,paddingVertical:6,borderRadius:8,backgroundColor:t.grayBackground,borderWidth:1,borderColor:t.grayBorderSecondary},chipLabel:{fontFamily:P.interMedium,fontSize:12,color:t.primaryBlack},methodDot:{width:6.5,height:6.5,borderRadius:3.5},countPill:{backgroundColor:`${t.grayBorderSecondary}50`,paddingHorizontal:5,paddingVertical:1,borderRadius:6},countPillText:{fontFamily:P.interBold,fontSize:9.5,color:t.grayText},footer:{flexDirection:"row",alignItems:"center",gap:10,paddingHorizontal:16,paddingVertical:14,borderTopWidth:1,borderTopColor:t.grayBorderSecondary,backgroundColor:t.primaryLight},resetBtn:{flex:1,paddingVertical:11,borderRadius:10,borderWidth:1,borderColor:t.grayBorderSecondary,alignItems:"center",justifyContent:"center",backgroundColor:t.grayBackground},resetBtnText:{fontFamily:P.interBold,fontSize:13,color:t.grayTextStrong},applyBtn:{flex:2,paddingVertical:11,borderRadius:10,alignItems:"center",justifyContent:"center",backgroundColor:t.purple,shadowColor:t.purple,shadowOffset:{width:0,height:2},shadowOpacity:.25,shadowRadius:4,elevation:3},applyBtnText:{fontFamily:P.interBold,fontSize:13,color:t.white}});export default NetworkFilterModal;

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

@@ -1,31 +1,31 @@
-import{useEffect as H,useMemo as Y,useRef as v,useState as V}from"react";import{StyleSheet as $,Text as I,TouchableOpacity as Z,View as M}from"react-native";import _ from"react-native-linear-gradient";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as K}from"../../styles/AppFonts";import{ActivityIcon as Me,BatteryChargingIcon as Be,BatteryFullIcon as Se,BoltIcon as Fe,SpeedIcon as Ae}from"../NetworkIcons";import{getNativeDeviceMetrics as ve}from"../../native/NativeInspector";import{subscribeNetworkLogs as xe}from"../../customHooks/networkLogger";import{useInspector as Ie}from"./InspectorContext";import{useTranslation as Re}from"../../i18n";export const SecondaryTelemetryStrip=()=>{const{t:L}=Re(),{switchActiveTab:j,peekMode:Ce}=Ie(),[R,U]=V(60),[n,Q]=V(null),[S,F]=V(0),C=v(0),N=v(Date.now());H(()=>{let r;const i=()=>{C.current++;const s=Date.now(),a=s-N.current;if(a>=1e3){const D=Math.min(60,Math.round(C.current*1e3/a));U(D),C.current=0,N.current=s}r=requestAnimationFrame(i)};return r=requestAnimationFrame(i),()=>cancelAnimationFrame(r)},[]);const w=v(0),G=v(Date.now());H(()=>{const r=xe(s=>{if(!s||s.length===0){F(0);return}const a=Date.now(),D=s.slice(0,10);let k=0,z=0,A=0;for(const o of D){let W=0,E=0;o.request&&(W=typeof o.request=="string"?o.request.length:JSON.stringify(o.request).length),o.response&&(E=typeof o.response=="string"?o.response.length:JSON.stringify(o.response).length);const q=W+E;if(q>0&&o.duration&&o.duration>0){const J=q*8/(o.duration/1e3)/1e3;J>0&&A===0&&(A=J),k+=q,z+=o.duration}}let B=0;z>0&&k>0?B=k*8/(z/1e3)/1e3:A>0&&(B=A),B>0?(w.current=B,G.current=a,F(Math.round(B*10)/10)):w.current>0&&a-G.current<12e3&&F(Math.round(w.current*10)/10)}),i=setInterval(()=>{Date.now()-G.current>15e3&&w.current>0&&(w.current=0,F(0))},3e3);return()=>{r(),clearInterval(i)}},[]),H(()=>{let r=!0;const i=async()=>{try{const a=await ve();r&&a&&Q(a)}catch{}};i();const s=setInterval(i,4e3);return()=>{r=!1,clearInterval(s)}},[]);const O=R>=55?e.emerald400:R>=30?e.amber400:e.rose400,P=Y(()=>{if(n?.usedRAM&&n?.totalRAM){const r=(n.usedRAM/1073741824).toFixed(2),i=(n.totalRAM/(1024*1024*1024)).toFixed(1);return`${r} / ${i} GB RAM`}return n?.residentMemory?`${(n.residentMemory/1073741824).toFixed(2)} GB RAM`:n?.usedRAM?`${(n.usedRAM/1073741824).toFixed(2)} GB RAM`:null},[n]),T=n?.batteryPercent,X=n?.isCharging;return<_ colors={[e.telemetrySubHeaderGradStart||"#0B0F1C",e.telemetrySubHeaderGradMid||"#111524",e.telemetrySubHeaderGradEnd||"#0B0F1C"]}start={{x:0,y:0}}end={{x:1,y:0}}style={t.container}>
-      <Z activeOpacity={.8}onPress={()=>j?.("device")}style={t.inner}>
+import{useEffect as H,useMemo as X,useRef as A,useState as q}from"react";import{StyleSheet as V,Text as F,TouchableOpacity as Y,View as M}from"react-native";import Z from"react-native-linear-gradient";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as J}from"../../styles/AppFonts";import{ActivityIcon as _,BatteryChargingIcon as Me,BatteryFullIcon as Se,BoltIcon as Be,SpeedIcon as Ae}from"../NetworkIcons";import{getNativeDeviceMetrics as Fe}from"../../native/NativeInspector";import{subscribeNetworkLogs as Ie}from"../../customHooks/networkLogger";import{useInspector as Re}from"./InspectorContext";import{useTranslation as Ge}from"../../i18n";export const SecondaryTelemetryStrip=()=>{const{t:K}=Ge(),{switchActiveTab:L,peekMode:Te}=Re(),[I,j]=q(60),[n,U]=q(null),[B,v]=q(0),R=A(0),$=A(Date.now());H(()=>{let r;const i=()=>{R.current++;const s=Date.now(),a=s-$.current;if(a>=1e3){const C=Math.min(60,Math.round(R.current*1e3/a));j(C),R.current=0,$.current=s}r=requestAnimationFrame(i)};return r=requestAnimationFrame(i),()=>cancelAnimationFrame(r)},[]);const S=A(0),G=A(Date.now());H(()=>{const r=Ie(s=>{if(!s||s.length===0){v(0);return}const a=Date.now(),C=s.slice(0,10);let k=0,D=0,x=0;for(const o of C){let P=0,W=0;o.request&&(P=typeof o.request=="string"?o.request.length:JSON.stringify(o.request).length),o.response&&(W=typeof o.response=="string"?o.response.length:JSON.stringify(o.response).length);const z=P+W;if(z>0&&o.duration&&o.duration>0){const E=z*8/(o.duration/1e3)/1e3;E>0&&x===0&&(x=E),k+=z,D+=o.duration}}let w=0;D>0&&k>0?w=k*8/(D/1e3)/1e3:x>0&&(w=x),w>0?(S.current=w,G.current=a,v(Math.round(w*10)/10)):S.current>0&&a-G.current<12e3&&v(Math.round(S.current*10)/10)}),i=setInterval(()=>{Date.now()-G.current>15e3&&S.current>0&&(S.current=0,v(0))},3e3);return()=>{r(),clearInterval(i)}},[]),H(()=>{let r=!0;const i=async()=>{try{const a=await Fe();r&&a&&U(a)}catch{}};i();const s=setInterval(i,4e3);return()=>{r=!1,clearInterval(s)}},[]);const N=I>=55?e.emerald400:I>=30?e.amber400:e.rose400,O=X(()=>{if(n?.usedRAM&&n?.totalRAM){const r=(n.usedRAM/1073741824).toFixed(2),i=(n.totalRAM/(1024*1024*1024)).toFixed(1);return`${r} / ${i} GB RAM`}return n?.residentMemory?`${(n.residentMemory/1073741824).toFixed(2)} GB RAM`:n?.usedRAM?`${(n.usedRAM/1073741824).toFixed(2)} GB RAM`:null},[n]),T=n?.batteryPercent,Q=n?.isCharging;return<Z colors={[e.telemetrySubHeaderGradStart,e.telemetrySubHeaderGradMid,e.telemetrySubHeaderGradEnd]}start={{x:0,y:0}}end={{x:1,y:0}}style={t.container}>
+      <Y activeOpacity={.8}onPress={()=>L?.("device")}style={t.inner}>
         
         <M style={t.item}>
-          <Me size={11.5}color={O}/>
-          <I style={[t.label,{color:O,fontFamily:K.interBold}]}>
-            {R} {L("telemetry.fps","FPS")}
-          </I>
+          <_ size={11.5}color={N}/>
+          <F style={[t.label,{color:N,fontFamily:J.interBold}]}>
+            {I} {K("telemetry.fps","FPS")}
+          </F>
         </M>
 
         <M style={t.divider}/>
 
         
         <M style={t.item}>
-          <Ae size={11.5}color={e.sky300||"#7DD3FC"}/>
-          <I style={[t.label,{color:e.sky300||"#7DD3FC"}]}>
-            {S>=1e3?`${(S/1e3).toFixed(2)} Mbps`:S>0?`${S.toFixed(1)} kbps`:"0.0 kbps"}
-          </I>
+          <Ae size={11.5}color={e.sky300}/>
+          <F style={[t.label,{color:e.sky300}]}>
+            {B>=1e3?`${(B/1e3).toFixed(2)} Mbps`:B>0?`${B.toFixed(1)} kbps`:"0.0 kbps"}
+          </F>
         </M>
 
         
-        {P&&<>
+        {O&&<>
             <M style={t.divider}/>
             <M style={t.item}>
-              <Fe size={11}color={e.purple400||"#A78BFA"}/>
-              <I style={[t.label,{color:e.purple400||"#A78BFA"}]}>
-                {P}
-              </I>
+              <Be size={11}color={e.purple400}/>
+              <F style={[t.label,{color:e.purple400}]}>
+                {O}
+              </F>
             </M>
           </>}
 
@@ -33,11 +33,11 @@ import{useEffect as H,useMemo as Y,useRef as v,useState as V}from"react";import{
         {T!==void 0&&T>=0&&<>
             <M style={t.divider}/>
             <M style={t.item}>
-              {X?<Be size={11.5}color={e.emerald400}/>:<Se size={11.5}color={e.slate400}/>}
-              <I style={t.label}>
+              {Q?<Me size={11.5}color={e.emerald400}/>:<Se size={11.5}color={e.slate400}/>}
+              <F style={t.label}>
                 {Math.round(T)}%
-              </I>
+              </F>
             </M>
           </>}
-      </Z>
-    </_>};const t=$.create({container:{width:"100%",borderBottomWidth:$.hairlineWidth,borderBottomColor:e.telemetrySubHeaderBorder||"rgba(255, 255, 255, 0.07)",borderTopWidth:$.hairlineWidth,borderTopColor:"rgba(0, 0, 0, 0.25)",zIndex:9},inner:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:3.5,minHeight:23},item:{flexDirection:"row",alignItems:"center",gap:4},divider:{width:1,height:10,backgroundColor:"rgba(255, 255, 255, 0.08)"},label:{fontFamily:K.interMedium,fontSize:9,lineHeight:11.5,color:"rgba(255, 255, 255, 0.85)",letterSpacing:.1}});
+      </Y>
+    </Z>};const t=V.create({container:{width:"100%",borderBottomWidth:V.hairlineWidth,borderBottomColor:e.telemetrySubHeaderBorder,borderTopWidth:V.hairlineWidth,borderTopColor:e.telemetrySubHeaderBorder,zIndex:9},inner:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:3.5,minHeight:23},item:{flexDirection:"row",alignItems:"center",gap:4},divider:{width:1,height:10,backgroundColor:e.borderSubtle},label:{fontFamily:J.interMedium,fontSize:9,lineHeight:11.5,color:e.textPrimary,letterSpacing:.1}});

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

@@ -1,69 +1,69 @@
-import{useEffect as j,useMemo as N,useState as U}from"react";import{Modal as K,Pressable as Y,ScrollView as G,StyleSheet as _,Text as T,TouchableOpacity as V,View as S}from"react-native";import{AppColors as l}from"../../styles/AppColors";import{AppFonts as C}from"../../styles/AppFonts";import{FilterIcon as J,CloseWhite as Q}from"../NetworkIcons";import X from"../TouchableScale";export const DEFAULT_SOCKET_FILTERS={search:"",status:new Set(["all"]),types:new Set(["all"]),sortBy:"time_desc"},isSocketFiltersDefault=k=>(k.status.has("all")||k.status.size===0)&&(k.types.has("all")||k.types.size===0)&&k.sortBy==="time_desc",SocketFilterModal=({visible:k,onClose:O,filters:B,onApply:E,records:W})=>{const[P,F]=U(()=>({...B,status:new Set(B.status),types:new Set(B.types)}));j(()=>{k&&F({...B,status:new Set(B.status),types:new Set(B.types)})},[k,B]);const x=N(()=>{let e=0,o=0,m=0,A=0,I=0,v=0,D=0;return W.forEach(z=>{const R=z.status||"open";R==="open"?e++:R==="closed"?o++:R==="connecting"?m++:R==="error"&&A++,z.client==="socket.io"||z.url.includes("/socket.io")?D++:z.url.startsWith("wss://")?I++:v++}),{all:W.length,open:e,closed:o,connecting:m,error:A,wss:I,ws:v,sio:D}},[W]),L=e=>{const o=new Set(P.status);e==="all"?(o.clear(),o.add("all")):(o.delete("all"),o.has(e)?o.delete(e):o.add(e),o.size===0&&o.add("all")),F(m=>({...m,status:o}))},H=e=>{const o=new Set(P.types);e==="all"?(o.clear(),o.add("all")):(o.delete("all"),o.has(e)?o.delete(e):o.add(e),o.size===0&&o.add("all")),F(m=>({...m,types:o}))},M=()=>{F({search:P.search,status:new Set(["all"]),types:new Set(["all"]),sortBy:"time_desc"})},$=()=>{E(P),O()};return<K visible={k}transparent animationType="fade"onRequestClose={O}>
+import{useEffect as E,useMemo as L,useState as v}from"react";import{Modal as H,Pressable as M,ScrollView as $,StyleSheet as R,Text as T,TouchableOpacity as P,View as S}from"react-native";import{AppColors as o}from"../../styles/AppColors";import{AppFonts as m}from"../../styles/AppFonts";import{FilterIcon as N,CloseWhite as U}from"../NetworkIcons";import K from"../TouchableScale";import{useTranslation as Y}from"../../i18n";export const DEFAULT_SOCKET_FILTERS={search:"",status:new Set(["all"]),types:new Set(["all"]),sortBy:"time_desc"},isSocketFiltersDefault=x=>(x.status.has("all")||x.status.size===0)&&(x.types.has("all")||x.types.size===0)&&x.sortBy==="time_desc",SocketFilterModal=({visible:x,onClose:V,filters:B,onApply:W,records:z})=>{const{t:C}=Y(),[O,F]=v(()=>({...B,status:new Set(B.status),types:new Set(B.types)}));E(()=>{x&&F({...B,status:new Set(B.status),types:new Set(B.types)})},[x,B]);const k=L(()=>{const e={all:z.length,open:0,closed:0,connecting:0,error:0,wss:0,ws:0,sio:0};return z.forEach(l=>{l.status==="open"?e.open++:l.status==="closed"?e.closed++:l.status==="connecting"?e.connecting++:l.status==="error"&&e.error++,l.client==="socket.io"?e.sio++:l.url&&l.url.startsWith("wss://")?e.wss++:e.ws++}),e},[z]),A=e=>{F(l=>{const r=new Set(l.status);return e==="all"?{...l,status:new Set(["all"])}:(r.delete("all"),r.has(e)?(r.delete(e),r.size===0&&r.add("all")):r.add(e),{...l,status:r})})},I=e=>{F(l=>{const r=new Set(l.types);return e==="all"?{...l,types:new Set(["all"])}:(r.delete("all"),r.has(e)?(r.delete(e),r.size===0&&r.add("all")):r.add(e),{...l,types:r})})},D=()=>{F({search:"",status:new Set(["all"]),types:new Set(["all"]),sortBy:"time_desc"})},_=()=>{W(O),V()};return<H visible={x}transparent animationType="fade"onRequestClose={V}>
       <S style={t.backdrop}>
-        <Y style={t.backdropPress}onPress={O}/>
+        <M style={t.backdropPress}onPress={V}/>
         <S style={t.container}>
           
           <S style={t.header}>
             <S style={t.headerLeft}>
-              <J size={18}color={l.brandPurple}/>
-              <T style={t.headerTitle}>Filter WebSockets</T>
+              <N size={18}color={o.brandPurple}/>
+              <T style={t.headerTitle}>{C("filters.filterWebSocketsTitle","Filter WebSockets")}</T>
             </S>
-            <V onPress={O}hitSlop={{top:8,bottom:8,left:8,right:8}}style={t.closeBtn}>
-              <Q size={14}color={l.grayTextWeak}/>
-            </V>
+            <P onPress={V}hitSlop={{top:8,bottom:8,left:8,right:8}}style={t.closeBtn}>
+              <U size={14}color={o.grayTextWeak}/>
+            </P>
           </S>
 
-          <G style={t.content}showsVerticalScrollIndicator={!1}>
+          <$ style={t.content}showsVerticalScrollIndicator={!1}>
             
-            <T style={t.sectionTitle}>CONNECTION STATUS</T>
+            <T style={t.sectionTitle}>{C("filters.connectionStatus","CONNECTION STATUS")}</T>
             <S style={t.chipRow}>
-              {[{key:"all",label:"All",count:x.all,color:l.brandPurple},{key:"open",label:"Open",count:x.open,color:l.greenColor},{key:"closed",label:"Closed",count:x.closed,color:l.slate500},{key:"connecting",label:"Connecting",count:x.connecting,color:l.amber600},{key:"error",label:"Error",count:x.error,color:l.errorColor}].map(e=>{const o=P.status.has(e.key);return<V key={e.key}onPress={()=>L(e.key)}style={[t.chip,o&&{backgroundColor:`${e.color}18`,borderColor:e.color}]}>
-                    <T style={[t.chipText,o&&{color:e.color,fontFamily:C.interBold}]}>
+              {[{key:"all",label:C("common.all","All"),count:k.all,color:o.brandPurple},{key:"open",label:"Open",count:k.open,color:o.greenColor},{key:"closed",label:"Closed",count:k.closed,color:o.slate500},{key:"connecting",label:"Connecting",count:k.connecting,color:o.amber600},{key:"error",label:"Error",count:k.error,color:o.errorColor}].map(e=>{const l=O.status.has(e.key);return<P key={e.key}onPress={()=>A(e.key)}style={[t.chip,l&&{backgroundColor:`${e.color}18`,borderColor:e.color}]}>
+                    <T style={[t.chipText,l&&{color:e.color,fontFamily:m.interBold}]}>
                       {e.label}
                     </T>
-                    <S style={[t.countPill,o&&{backgroundColor:`${e.color}30`}]}>
-                      <T style={[t.countText,o&&{color:e.color}]}>
+                    <S style={[t.countPill,l&&{backgroundColor:`${e.color}30`}]}>
+                      <T style={[t.countText,l&&{color:e.color}]}>
                         {e.count}
                       </T>
                     </S>
-                  </V>})}
+                  </P>})}
             </S>
 
             
-            <T style={t.sectionTitle}>PROTOCOL & CLIENT</T>
+            <T style={t.sectionTitle}>{C("filters.protocolClient","PROTOCOL & CLIENT")}</T>
             <S style={t.chipRow}>
-              {[{key:"all",label:"All Protocols",count:x.all,color:l.brandPurple},{key:"wss",label:"Secure (WSS)",count:x.wss,color:l.emerald600},{key:"ws",label:"Standard (WS)",count:x.ws,color:l.blue600},{key:"sio",label:"Socket.IO",count:x.sio,color:l.violet600}].map(e=>{const o=P.types.has(e.key);return<V key={e.key}onPress={()=>H(e.key)}style={[t.chip,o&&{backgroundColor:`${e.color}18`,borderColor:e.color}]}>
-                    <T style={[t.chipText,o&&{color:e.color,fontFamily:C.interBold}]}>
+              {[{key:"all",label:C("common.all","All Protocols"),count:k.all,color:o.brandPurple},{key:"wss",label:"Secure (WSS)",count:k.wss,color:o.emerald600},{key:"ws",label:"Standard (WS)",count:k.ws,color:o.blue600},{key:"sio",label:"Socket.IO",count:k.sio,color:o.violet600}].map(e=>{const l=O.types.has(e.key);return<P key={e.key}onPress={()=>I(e.key)}style={[t.chip,l&&{backgroundColor:`${e.color}18`,borderColor:e.color}]}>
+                    <T style={[t.chipText,l&&{color:e.color,fontFamily:m.interBold}]}>
                       {e.label}
                     </T>
-                    <S style={[t.countPill,o&&{backgroundColor:`${e.color}30`}]}>
-                      <T style={[t.countText,o&&{color:e.color}]}>
+                    <S style={[t.countPill,l&&{backgroundColor:`${e.color}30`}]}>
+                      <T style={[t.countText,l&&{color:e.color}]}>
                         {e.count}
                       </T>
                     </S>
-                  </V>})}
+                  </P>})}
             </S>
 
             
-            <T style={t.sectionTitle}>SORT BY</T>
+            <T style={t.sectionTitle}>{C("filters.sortBy","SORT BY")}</T>
             <S style={t.chipRow}>
-              {[{key:"time_desc",label:"Newest First"},{key:"time_asc",label:"Oldest First"},{key:"frames_desc",label:"Most Frames"},{key:"duration_desc",label:"Longest Duration"}].map(e=>{const o=P.sortBy===e.key;return<V key={e.key}onPress={()=>F(m=>({...m,sortBy:e.key}))}style={[t.chip,o&&t.chipActiveSort]}>
-                    <T style={[t.chipText,o&&t.chipTextActiveSort]}>
+              {[{key:"time_desc",label:"Newest First"},{key:"time_asc",label:"Oldest First"},{key:"frames_desc",label:"Most Frames"},{key:"duration_desc",label:"Longest Duration"}].map(e=>{const l=O.sortBy===e.key;return<P key={e.key}onPress={()=>F(r=>({...r,sortBy:e.key}))}style={[t.chip,l&&t.chipActiveSort]}>
+                    <T style={[t.chipText,l&&t.chipTextActiveSort]}>
                       {e.label}
                     </T>
-                  </V>})}
+                  </P>})}
             </S>
-          </G>
+          </$>
 
           
           <S style={t.footer}>
-            <V onPress={M}style={t.resetBtn}>
-              <T style={t.resetBtnText}>Reset</T>
-            </V>
-            <X onPress={$}style={t.applyBtn}>
-              <T style={t.applyBtnText}>Apply Filters</T>
-            </X>
+            <P onPress={D}style={t.resetBtn}>
+              <T style={t.resetBtnText}>{C("common.reset","Reset")}</T>
+            </P>
+            <K onPress={_}style={t.applyBtn}>
+              <T style={t.applyBtnText}>{C("filters.applyFilters","Apply Filters")}</T>
+            </K>
           </S>
         </S>
       </S>
-    </K>};export default SocketFilterModal;const t=_.create({backdrop:{flex:1,backgroundColor:"rgba(0,0,0,0.5)",justifyContent:"center",alignItems:"center",padding:16},backdropPress:{..._.absoluteFillObject},container:{width:"100%",maxHeight:"80%",backgroundColor:l.contentBg,borderRadius:16,overflow:"hidden",shadowColor:l.black,shadowOffset:{width:0,height:4},shadowOpacity:.25,shadowRadius:10,elevation:8},header:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:16,paddingVertical:14,borderBottomWidth:1,borderBottomColor:l.dividerColor},headerLeft:{flexDirection:"row",alignItems:"center",gap:8},headerTitle:{fontFamily:C.interBold,fontSize:16,color:l.grayTextStrong},closeBtn:{padding:4},content:{padding:16},sectionTitle:{fontFamily:C.interBold,fontSize:11,color:l.grayTextWeak,letterSpacing:.6,marginBottom:8,marginTop:10},chipRow:{flexDirection:"row",flexWrap:"wrap",gap:8,marginBottom:12},chip:{flexDirection:"row",alignItems:"center",paddingHorizontal:10,paddingVertical:6,borderRadius:8,borderWidth:1,borderColor:l.dividerColor,backgroundColor:l.graySurface,gap:6},chipActiveSort:{backgroundColor:`${l.brandPurple}18`,borderColor:l.brandPurple},chipText:{fontFamily:C.interMedium,fontSize:12,color:l.grayTextStrong},chipTextActiveSort:{color:l.brandPurple,fontFamily:C.interBold},countPill:{backgroundColor:`${l.slate500}18`,paddingHorizontal:5,paddingVertical:1,borderRadius:10},countText:{fontFamily:C.interBold,fontSize:10,color:l.grayTextWeak},footer:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:16,paddingVertical:12,borderTopWidth:1,borderTopColor:l.dividerColor,gap:12},resetBtn:{paddingVertical:10,paddingHorizontal:16,borderRadius:8,borderWidth:1,borderColor:l.dividerColor},resetBtnText:{fontFamily:C.interSemiBold,fontSize:13,color:l.grayTextWeak},applyBtn:{flex:1,backgroundColor:l.brandPurple,paddingVertical:11,borderRadius:8,alignItems:"center",justifyContent:"center"},applyBtnText:{fontFamily:C.interBold,fontSize:13,color:l.white}});
+    </H>};export default SocketFilterModal;const t=R.create({backdrop:{flex:1,backgroundColor:"rgba(0,0,0,0.5)",justifyContent:"center",alignItems:"center",padding:16},backdropPress:{...R.absoluteFillObject},container:{width:"100%",maxHeight:"80%",backgroundColor:o.contentBg,borderRadius:16,overflow:"hidden",shadowColor:o.black,shadowOffset:{width:0,height:4},shadowOpacity:.25,shadowRadius:10,elevation:8},header:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:16,paddingVertical:14,borderBottomWidth:1,borderBottomColor:o.dividerColor},headerLeft:{flexDirection:"row",alignItems:"center",gap:8},headerTitle:{fontFamily:m.interBold,fontSize:16,color:o.grayTextStrong},closeBtn:{padding:4},content:{padding:16},sectionTitle:{fontFamily:m.interBold,fontSize:11,color:o.grayTextWeak,letterSpacing:.6,marginBottom:8,marginTop:10},chipRow:{flexDirection:"row",flexWrap:"wrap",gap:8,marginBottom:12},chip:{flexDirection:"row",alignItems:"center",paddingHorizontal:10,paddingVertical:6,borderRadius:8,borderWidth:1,borderColor:o.dividerColor,backgroundColor:o.graySurface,gap:6},chipActiveSort:{backgroundColor:`${o.brandPurple}18`,borderColor:o.brandPurple},chipText:{fontFamily:m.interMedium,fontSize:12,color:o.grayTextStrong},chipTextActiveSort:{color:o.brandPurple,fontFamily:m.interBold},countPill:{backgroundColor:`${o.slate500}18`,paddingHorizontal:5,paddingVertical:1,borderRadius:10},countText:{fontFamily:m.interBold,fontSize:10,color:o.grayTextWeak},footer:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:16,paddingVertical:12,borderTopWidth:1,borderTopColor:o.dividerColor,gap:12},resetBtn:{paddingVertical:10,paddingHorizontal:16,borderRadius:8,borderWidth:1,borderColor:o.dividerColor},resetBtnText:{fontFamily:m.interSemiBold,fontSize:13,color:o.grayTextWeak},applyBtn:{flex:1,backgroundColor:o.brandPurple,paddingVertical:11,borderRadius:8,alignItems:"center",justifyContent:"center"},applyBtnText:{fontFamily:m.interBold,fontSize:13,color:o.white}});

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

@@ -1,14 +1,14 @@
-import ce,{useRef as F,useState as U}from"react";import{Platform as de,ScrollView as Ce,Text as P,TouchableOpacity as _,View as C}from"react-native";import{useInspector as ke}from"./InspectorContext";import{useTranslation as we}from"../../i18n";import T from"../../styles";import{AppColors as o}from"../../styles/AppColors";import{AppFonts as B}from"../../styles/AppFonts";import G from"../TouchableScale";import{SignalIcon as Se,TerminalIcon as Re,AnalyticsIcon as Ie,ReduxIcon as Te,CrashIcon as Be,BellIcon as Pe,SmartphoneIcon as Le,DatabaseIcon as Ae,QrCodeIcon as Oe,ScreencastIcon as Ve,ChevronIcon as Q,WebsocketIcon as De}from"../NetworkIcons";import{isReduxConnected as Ee}from"../../customHooks/reduxLogger";import{isAnalyticsConnected as He}from"../../customHooks/analyticsLogger";import{isLocalDebugEnvironment as je}from"../../helpers";const r={themeColor:o.brandPurple,bgInactive:`${o.brandPurple}0D`,borderInactive:`${o.brandPurple}2B`,iconInactive:o.brandPurple,idBadgeBg:`${o.brandPurple}1C`,idBadgeBorder:`${o.brandPurple}3D`,idBadgeText:o.brandPurple},q={apis:r,logs:r,analytics:r,redux:r,storage:r,device:r,crash:r,push:r,socket:r,debugging:r,media:r},$e=ce.memo(()=>{const{t:J}=we(),{activeTab:k,switchActiveTab:L,tabVisibility:v,logs:A,consoleLogs:O,analyticsEvents:K,crashRecords:V,pushRecords:D,socketRecords:E,unreadPushCount:N,unreadSocketCount:X,lastReadApisCount:Y,lastReadLogsCount:Z,lastReadCrashesCount:ee,lastReadSocketCount:oe,mediaCount:H}=ke(),te=Ee(),ie=He(),w=k==="media",x=(v?.media??!0)&&H>0,j=F(null),[z,ne]=U(!1),[$,re]=U(!0),M=F(0),le=e=>{const{contentOffset:t,layoutMeasurement:i,contentSize:n}=e.nativeEvent,S=t.x;M.current=S;const R=S>8,I=S<n.width-i.width-8;z!==R&&ne(R),$!==I&&re(I)},W=e=>{j.current?.scrollTo({x:Math.max(0,M.current+e),animated:!0})};return<C style={[T.tabBarContainer,{flexDirection:"row",alignItems:"center",paddingHorizontal:0}]}>
+import ce,{useRef as F,useState as U}from"react";import{Platform as de,ScrollView as Ce,Text as P,TouchableOpacity as _,View as C}from"react-native";import{useInspector as ke}from"./InspectorContext";import{useTranslation as we}from"../../i18n";import I from"../../styles";import{AppColors as o}from"../../styles/AppColors";import{AppFonts as T}from"../../styles/AppFonts";import G from"../TouchableScale";import{SignalIcon as Se,TerminalIcon as Re,AnalyticsIcon as Ie,ReduxIcon as Te,CrashIcon as Be,BellIcon as Pe,SmartphoneIcon as Le,DatabaseIcon as Ae,QrCodeIcon as Oe,ScreencastIcon as Ve,ChevronIcon as Q,WebsocketIcon as De}from"../NetworkIcons";import{isReduxConnected as Ee}from"../../customHooks/reduxLogger";import{isAnalyticsConnected as He}from"../../customHooks/analyticsLogger";import{isLocalDebugEnvironment as We}from"../../helpers";const r={themeColor:o.brandPurple,bgInactive:`${o.brandPurple}0D`,borderInactive:`${o.brandPurple}2B`,iconInactive:o.brandPurple,idBadgeBg:`${o.brandPurple}1C`,idBadgeBorder:`${o.brandPurple}3D`,idBadgeText:o.brandPurple},q={apis:r,logs:r,analytics:r,redux:r,storage:r,device:r,crash:r,push:r,socket:r,debugging:r,media:r},je=ce.memo(()=>{const{t:J}=we(),{activeTab:k,switchActiveTab:L,tabVisibility:B,logs:A,consoleLogs:O,analyticsEvents:K,crashRecords:V,pushRecords:D,socketRecords:E,unreadPushCount:N,unreadSocketCount:X,lastReadApisCount:Y,lastReadLogsCount:Z,lastReadCrashesCount:ee,lastReadSocketCount:oe,mediaCount:H}=ke(),te=Ee(),ie=He(),w=k==="media",x=(B?.media??!0)&&H>0,W=F(null),[z,ne]=U(!1),[j,re]=U(!0),$=F(0),le=e=>{const{contentOffset:t,layoutMeasurement:i,contentSize:n}=e.nativeEvent,S=t.x;$.current=S;const R=S>8,v=S<n.width-i.width-8;z!==R&&ne(R),j!==v&&re(v)},M=e=>{W.current?.scrollTo({x:Math.max(0,$.current+e),animated:!0})};return<C style={[I.tabBarContainer,{flexDirection:"row",alignItems:"center",paddingHorizontal:0}]}>
       
-      {z&&<_ onPress={()=>W(-160)}hitSlop={{top:6,bottom:6,left:6,right:6}}activeOpacity={.7}style={{paddingLeft:6,paddingRight:2,justifyContent:"center",alignItems:"center"}}>
+      {z&&<_ onPress={()=>M(-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.grayTextStrong}/>
           </C>
         </_>}
 
       
-      <Ce ref={j}horizontal showsHorizontalScrollIndicator={!1}onScroll={le}scrollEventThrottle={16}style={{flex:1}}contentContainerStyle={{paddingLeft:z?4:12,paddingRight:x?6:12}}>
-        {[{id:1,key:"apis",label:"APIs",count:A.length,icon:"apis"},{id:2,key:"logs",label:"Logs",count:O.length,icon:"logs"},{id:3,key:"analytics",label:"Analytics",count:K.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:V?.length||0,icon:"crash"},{id:8,key:"push",label:"Push",count:D?.length||0,icon:"push"},{id:9,key:"socket",label:"WebSocket",count:E?.length||0,icon:"socket"},{id:10,key:"debugging",label:"Debugging",count:0,icon:"debugging"}].filter(e=>e.key==="debugging"?de.OS==="android"&&je()&&!!v?.debugging:!(!v?.[e.key]||e.key==="redux"&&!te||e.key==="analytics"&&!ie)).map(e=>{const t=k===e.key,i=q[e.key]||q.apis,n=t?o.white:i.iconInactive,S=e.count>99?"99+":String(e.count),R=k!=="apis"&&A.length>Y,I=k!=="logs"&&O.length>Z,ae=k!=="crash"&&(V?.length||0)>(ee||0),se=k!=="socket"&&((E?.length||0)>(oe||0)||X>0);return<G key={e.key}onPress={()=>{L(e.key)}}style={[T.contentTabButton,{backgroundColor:t?i.themeColor:i.bgInactive,borderColor:t?i.themeColor:i.borderInactive},t&&{shadowColor:i.themeColor,shadowOffset:{width:0,height:2},shadowOpacity:.28,shadowRadius:3.5,elevation:3}]}>
+      <Ce ref={W}horizontal showsHorizontalScrollIndicator={!1}onScroll={le}scrollEventThrottle={16}style={{flex:1}}contentContainerStyle={{paddingLeft:z?4:12,paddingRight:x?6:12}}>
+        {[{id:1,key:"apis",label:"APIs",count:A.length,icon:"apis"},{id:2,key:"logs",label:"Logs",count:O.length,icon:"logs"},{id:3,key:"analytics",label:"Analytics",count:K.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:V?.length||0,icon:"crash"},{id:8,key:"push",label:"Push",count:D?.length||0,icon:"push"},{id:9,key:"socket",label:"WebSocket",count:E?.length||0,icon:"socket"},{id:10,key:"debugging",label:"Debugging",count:0,icon:"debugging"}].filter(e=>e.key==="debugging"?de.OS==="android"&&We()&&!!B?.debugging:!(!B?.[e.key]||e.key==="redux"&&!te||e.key==="analytics"&&!ie)).map(e=>{const t=k===e.key,i=q[e.key]||q.apis,n=t?o.white:i.iconInactive,S=e.count>99?"99+":String(e.count),R=k!=="apis"&&A.length>Y,v=k!=="logs"&&O.length>Z,ae=k!=="crash"&&(V?.length||0)>(ee||0),se=k!=="socket"&&((E?.length||0)>(oe||0)||X>0);return<G key={e.key}onPress={()=>{L(e.key)}}style={[I.contentTabButton,{backgroundColor:t?i.themeColor:i.bgInactive,borderColor:t?i.themeColor:i.borderInactive},t&&{shadowColor:i.themeColor,shadowOffset:{width:0,height:2},shadowOpacity:.28,shadowRadius:3.5,elevation:3}]}>
                 <C style={{flexDirection:"row",alignItems:"center",gap:6}}>
                   {e.icon==="apis"&&<Se color={n}size={14}/>}
                   {e.icon==="logs"&&<Re color={n}size={14}/>}
@@ -21,25 +21,25 @@ import ce,{useRef as F,useState as U}from"react";import{Platform as de,ScrollVie
                   {e.icon==="socket"&&<De color={n}size={14}/>}
                   {e.icon==="debugging"&&<Oe color={n}size={14}/>}
                   <C style={{minWidth:20,height:20,paddingHorizontal:4,borderRadius:10,backgroundColor:t?`${o.white}33`:i.idBadgeBg,borderWidth:1,borderColor:t?`${o.white}66`:i.idBadgeBorder,alignItems:"center",justifyContent:"center"}}>
-                    <P style={{fontFamily:B.interBold,fontSize:9.5,lineHeight:12,color:t?o.white:i.idBadgeText}}>
+                    <P style={{fontFamily:T.interBold,fontSize:9.5,lineHeight:12,color:t?o.white:i.idBadgeText}}>
                       #{e.id}
                     </P>
                   </C>
-                  <P numberOfLines={1}ellipsizeMode="tail"style={[T.contentTabButtonText,{color:t?o.white:o.grayTextStrong,fontFamily:t?B.interBold:B.interSemiBold}]}>
+                  <P numberOfLines={1}ellipsizeMode="tail"style={[I.contentTabButtonText,{color:t?o.white:o.grayTextStrong,fontFamily:t?T.interBold:T.interSemiBold}]}>
                     {J(`tabs.${e.key}`,e.label)}
                   </P>
-                  {e.count>0&&e.key!=="push"&&<C style={{paddingHorizontal:5,paddingVertical:1,borderRadius:8,backgroundColor:t?"rgba(255,255,255,0.25)":i.idBadgeBg,borderWidth:.5,borderColor:t?"rgba(255,255,255,0.45)":i.idBadgeBorder,marginLeft:1,alignItems:"center",justifyContent:"center"}}>
-                      <P style={{fontFamily:B.interBold,fontSize:9.5,lineHeight:12,color:t?o.white:i.themeColor}}>
+                  {e.count>0&&e.key!=="push"&&<C style={{paddingHorizontal:5,paddingVertical:1,borderRadius:8,backgroundColor:t?o.overlayWhite25:i.idBadgeBg,borderWidth:.5,borderColor:t?o.overlayWhite45:i.idBadgeBorder,marginLeft:1,alignItems:"center",justifyContent:"center"}}>
+                      <P style={{fontFamily:T.interBold,fontSize:9.5,lineHeight:12,color:t?o.white:i.themeColor}}>
                         {S}
                       </P>
                     </C>}
-                  {(e.key==="apis"&&R||e.key==="logs"&&I||e.key==="crash"&&ae||e.key==="push"&&((D?.length||0)>0||N>0)||e.key==="socket"&&se)&&<C style={{width:6,height:6,borderRadius:3,backgroundColor:o.errorColor,marginLeft:4,alignSelf:"center"}}/>}
+                  {(e.key==="apis"&&R||e.key==="logs"&&v||e.key==="crash"&&ae||e.key==="push"&&((D?.length||0)>0||N>0)||e.key==="socket"&&se)&&<C style={{width:6,height:6,borderRadius:3,backgroundColor:o.errorColor,marginLeft:4,alignSelf:"center"}}/>}
                 </C>
               </G>})}
       </Ce>
 
       
-      {$&&<_ onPress={()=>W(160)}hitSlop={{top:6,bottom:6,left:6,right:6}}activeOpacity={.7}style={{paddingLeft:2,paddingRight:x?4:8,justifyContent:"center",alignItems:"center"}}>
+      {j&&<_ onPress={()=>M(160)}hitSlop={{top:6,bottom:6,left:6,right:6}}activeOpacity={.7}style={{paddingLeft:2,paddingRight:x?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.grayTextStrong}/>
           </C>
@@ -47,11 +47,11 @@ import ce,{useRef as F,useState as U}from"react";import{Platform as de,ScrollVie
 
       
       {x&&<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={()=>{L("media")}}accessibilityRole="button"accessibilityLabel="Media Gallery"style={[T.contentTabButton,{marginRight:0,borderRadius:8,backgroundColor:w?o.brandPurple:`${o.brandPurple}0D`,borderColor:w?o.brandPurple:`${o.brandPurple}2B`,borderWidth:1,paddingHorizontal:10,paddingVertical:7,alignItems:"center",justifyContent:"center"},w&&{shadowColor:o.brandPurple,shadowOffset:{width:0,height:2},shadowOpacity:.28,shadowRadius:3.5,elevation:3}]}>
+          <G key="media"onPress={()=>{L("media")}}accessibilityRole="button"accessibilityLabel="Media Gallery"style={[I.contentTabButton,{marginRight:0,borderRadius:8,backgroundColor:w?o.brandPurple:`${o.brandPurple}0D`,borderColor:w?o.brandPurple:`${o.brandPurple}2B`,borderWidth:1,paddingHorizontal:10,paddingVertical:7,alignItems:"center",justifyContent:"center"},w&&{shadowColor:o.brandPurple,shadowOffset:{width:0,height:2},shadowOpacity:.28,shadowRadius:3.5,elevation:3}]}>
             <C style={{position:"relative",alignItems:"center",justifyContent:"center"}}>
               <Ve color={w?o.white:o.brandPurple}size={15}/>
               {H>0&&<C style={{position:"absolute",top:-3,right:-4,width:7,height:7,borderRadius:3.5,backgroundColor:w?o.white:o.brandPurple,borderWidth:1.2,borderColor:w?o.brandPurple:o.white}}/>}
             </C>
           </G>
         </C>}
-    </C>});export default $e;
+    </C>});export default je;