react-native-inapp-inspector 2.4.1 → 2.5.0

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

@@ -1,13 +1,15 @@
-import ee,{useCallback as Be,useMemo as N,useRef as Pe,useState as te}from"react";import{FlatList as De,Platform as oe,Pressable as Ce,StyleSheet as Fe,Text as S,TextInput as Ee,TouchableOpacity as We,View as C}from"react-native";import{useTranslation as Oe}from"../../i18n";import{useInspector as Me}from"./InspectorContext";import Ne from"../TouchableScale";import $e from"../AnimatedEntrance";import Ue from"../EmptyState";import Ge from"../EndOfListFooter";import Te from"../HighlightText";import{getSize as Se,openInVSCode as _e,getCleanCallerDisplay as Ze}from"../../helpers";import O from"../../styles";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as R}from"../../styles/AppFonts";import{getActionHistory as Ke}from"../../customHooks/reduxLogger";import{TerminalIcon as Ae,SearchIcon as Je,ClearIcon as Qe,LayersIcon as Xe,ClockIcon as Ye,SizeIcon as Ct,ForwardChevronIcon as Tt,SortArrowIcon as St,BoltIcon as U,AtomIcon as At,ScreenIcon as It,ListenerIcon as Rt,DocIcon as Vt,LoadingSpinnerIcon as Ht,CircleAlertIcon as Lt,TextAaIcon as Bt}from"../NetworkIcons";const Ie=B=>{switch(B){case"saga":return{label:"SAGA",renderIcon:(I,z=9)=><U color={I}size={z}/>,bg:e.purple100,text:e.brandPurple,border:e.purple200};case"thunk":return{label:"THUNK",renderIcon:(I,z=9)=><At color={I}size={z}/>,bg:e.amber100,text:e.amber800Warm,border:e.amber200};case"ui":return{label:"UI",renderIcon:(I,z=9)=><It color={I}size={z}/>,bg:e.sky100,text:e.sky600,border:e.sky400};case"listener":return{label:"LISTENER",renderIcon:(I,z=9)=><Rt color={I}size={z}/>,bg:e.teal100,text:e.teal700,border:e.teal400};default:return{label:"DIRECT",renderIcon:(I,z=9)=><U color={I}size={z}/>,bg:e.slate100,text:e.slate700,border:e.slate200}}},Re=50,ze=10,Pt=ee.memo(()=>{const{t:B}=Oe(),{reduxState:I,reduxLastActionMap:z,reduxSearch:k,setReduxSearch:G,setSelectedReduxSlice:Z}=Me(),K=Pe(null),[q,J]=te(Re),[P,ke]=te("latest");ee.useEffect(()=>{J(Re),K.current?.scrollToOffset({offset:0,animated:!1})},[k,P]);const Ve=N(()=>Se(I),[I]),Q=N(()=>Ke(),[z]),$=N(()=>!I||typeof I!="object"?[]:Object.keys(I).map(A=>{const T=I[A],H=Array.isArray(T),j=T&&typeof T=="object";let F="Primitive",L=0;H?(L=T.length,F=`Array [${L}]`):j?(L=Object.keys(T).length,F=`Object {${L}}`):typeof T<"u"&&(L=1,F=typeof T);let E="live",v;j&&(T.loading===!0||T.isLoading===!0||T.status==="loading"||T.status==="pending"?(E="loading",v="Loading"):T.error||T.hasError||T.status==="error"||T.status==="failed"?(E="error",v=typeof T.error=="string"?T.error:"Error"):L===0&&(E="empty",v="Empty"));const V=z[A],He=V?.updatedAt||0,Le=Q.filter(W=>!W.affectedSlices||W.affectedSlices.length===0?!0:W.affectedSlices.includes(A)).length;let X;if(V){let W;if(V.payload!==void 0&&V.payload!==null)try{if(typeof V.payload=="object"){const Y=Object.keys(V.payload);W=`{ ${Y.slice(0,3).join(", ")}${Y.length>3?"...":""} }`}else W=String(V.payload)}catch{}X={type:V.type,timestamp:V.timestamp,updatedAt:V.updatedAt,payloadPreview:W,originType:V.originType,callerFile:V.callerFile,callerLine:V.callerLine,callerCol:V.callerCol}}return{id:`slice-${A}`,name:A,keysCount:L,sizeStr:Se(T),typeLabel:F,status:E,statusMessage:v,timelineCount:Le,lastAction:X,updatedAt:He}}),[I,z,Q]),D=N(()=>{let t=$;if(k&&k.trim().length>0){const A=k.trim().toLowerCase().split(/\s+/).filter(Boolean);t=t.filter(T=>{const H=I?I[T.name]:null,j=[T.name||"",T.lastAction?.type||"",T.lastAction?.payloadPreview||"",T.lastAction?.originType||"",T.status||"",T.statusMessage||"",H?typeof H=="string"?H:JSON.stringify(H):""].join(" ").toLowerCase();return A.every(F=>j.includes(F))})}return[...t].sort((A,T)=>P==="latest"&&T.updatedAt!==A.updatedAt?T.updatedAt-A.updatedAt:A.name.localeCompare(T.name))},[$,k,P,I]),_=N(()=>D.slice(0,q),[D,q]),M=N(()=>{const t=Object.values(z);return t.length===0?null:t.reduce((A,T)=>A?(T.updatedAt||0)>(A.updatedAt||0)?T:A:T,null)},[z]),ve=Be(({item:t,index:A})=>{const T=t.updatedAt>0&&Date.now()-t.updatedAt<5e3,H=t.status==="error"?e.errorColor:t.status==="loading"?e.warningIconGold:t.status==="empty"?e.grayTextWeak:e.greenColor,j=t.status==="error"?e.red100:t.status==="loading"?e.amber100:t.status==="empty"?e.grayBackground:e.emeraldBg,F=t.status==="error"?e.errorBorder:t.status==="loading"?e.amber200:t.status==="empty"?e.dividerColor:e.emeraldBorder,L=t.status==="error"?e.red600:t.status==="loading"?e.amber800Warm:t.status==="empty"?e.grayTextWeak:e.emerald700,E=t.lastAction?.callerFile?Ze(t.lastAction.callerFile):null;return<$e index={A}distance={8}>
+import ee,{useCallback as Le,useMemo as N,useRef as Pe,useState as te}from"react";import{FlatList as De,Platform as Fe,Pressable as Ce,StyleSheet as Ee,Text as S,TextInput as We,TouchableOpacity as Oe,View as C}from"react-native";import{useTranslation as Me}from"../../i18n";import{useInspector as je}from"./InspectorContext";import Ne from"../TouchableScale";import $e from"../AnimatedEntrance";import Ue from"../EmptyState";import Ge from"../EndOfListFooter";import Te from"../HighlightText";import{getSize as Se,openInVSCode as _e,getCleanCallerDisplay as Ze}from"../../helpers";import O from"../../styles";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as R}from"../../styles/AppFonts";import{getActionHistory as Ke}from"../../customHooks/reduxLogger";import{TerminalIcon as Ie,SearchIcon as Je,ClearIcon as Qe,LayersIcon as Xe,ClockIcon as Ye,SizeIcon as Ct,ForwardChevronIcon as Tt,SortArrowIcon as St,BoltIcon as U,AtomIcon as It,ScreenIcon as At,ListenerIcon as Rt,DocIcon as Vt,LoadingSpinnerIcon as Bt,CircleAlertIcon as Ht,TextAaIcon as Lt}from"../NetworkIcons";const Ae=B=>{switch(B){case"saga":return{label:"SAGA",renderIcon:(A,z=9)=><U color={A}size={z}/>,bg:e.purple100,text:e.brandPurple,border:e.purple200};case"thunk":return{label:"THUNK",renderIcon:(A,z=9)=><It color={A}size={z}/>,bg:e.amber100,text:e.amber800Warm,border:e.amber200};case"ui":return{label:"UI",renderIcon:(A,z=9)=><At color={A}size={z}/>,bg:e.sky100,text:e.sky600,border:e.sky400};case"listener":return{label:"LISTENER",renderIcon:(A,z=9)=><Rt color={A}size={z}/>,bg:e.teal100,text:e.teal700,border:e.teal400};default:return{label:"DIRECT",renderIcon:(A,z=9)=><U color={A}size={z}/>,bg:e.slate100,text:e.slate700,border:e.slate200}}},Re=50,ze=10,Pt=ee.memo(()=>{const{t:B}=Me(),{reduxState:A,reduxLastActionMap:z,reduxSearch:k,setReduxSearch:G,setSelectedReduxSlice:Z}=je(),K=Pe(null),[q,J]=te(Re),[P,ke]=te("latest");ee.useEffect(()=>{J(Re),K.current?.scrollToOffset({offset:0,animated:!1})},[k,P]);const Ve=N(()=>Se(A),[A]),Q=N(()=>Ke(),[z]),$=N(()=>!A||typeof A!="object"?[]:Object.keys(A).map(I=>{const T=A[I],H=Array.isArray(T),j=T&&typeof T=="object";let D="Primitive",L=0;H?(L=T.length,D=`Array [${L}]`):j?(L=Object.keys(T).length,D=`Object {${L}}`):typeof T<"u"&&(L=1,D=typeof T);let E="live",v;j&&(T.loading===!0||T.isLoading===!0||T.status==="loading"||T.status==="pending"?(E="loading",v="Loading"):T.error||T.hasError||T.status==="error"||T.status==="failed"?(E="error",v=typeof T.error=="string"?T.error:"Error"):L===0&&(E="empty",v="Empty"));const V=z[I],Be=V?.updatedAt||0,He=Q.filter(W=>!W.affectedSlices||W.affectedSlices.length===0?!0:W.affectedSlices.includes(I)).length;let X;if(V){let W;if(V.payload!==void 0&&V.payload!==null)try{if(typeof V.payload=="object"){const Y=Object.keys(V.payload);W=`{ ${Y.slice(0,3).join(", ")}${Y.length>3?"...":""} }`}else W=String(V.payload)}catch{}X={type:V.type,timestamp:V.timestamp,updatedAt:V.updatedAt,payloadPreview:W,originType:V.originType,callerFile:V.callerFile,callerLine:V.callerLine,callerCol:V.callerCol}}return{id:`slice-${I}`,name:I,keysCount:L,sizeStr:Se(T),typeLabel:D,status:E,statusMessage:v,timelineCount:He,lastAction:X,updatedAt:Be}}),[A,z,Q]),F=N(()=>{let t=$;if(k&&k.trim().length>0){const I=k.trim().toLowerCase().split(/\s+/).filter(Boolean);t=t.filter(T=>{const H=A?A[T.name]:null,j=[T.name||"",T.lastAction?.type||"",T.lastAction?.payloadPreview||"",T.lastAction?.originType||"",T.status||"",T.statusMessage||"",H?typeof H=="string"?H:JSON.stringify(H):""].join(" ").toLowerCase();return I.every(D=>j.includes(D))})}return[...t].sort((I,T)=>P==="latest"&&T.updatedAt!==I.updatedAt?T.updatedAt-I.updatedAt:I.name.localeCompare(T.name))},[$,k,P,A]),_=N(()=>F.slice(0,q),[F,q]),M=N(()=>{const t=Object.values(z);return t.length===0?null:t.reduce((I,T)=>I?(T.updatedAt||0)>(I.updatedAt||0)?T:I:T,null)},[z]),ve=Le(({item:t,index:I})=>{const T=t.updatedAt>0&&Date.now()-t.updatedAt<5e3,H=t.status==="error"?e.errorColor:t.status==="loading"?e.warningIconGold:t.status==="empty"?e.grayTextWeak:e.greenColor,j=t.status==="error"?e.red100:t.status==="loading"?e.amber100:t.status==="empty"?e.grayBackground:e.emeraldBg,D=t.status==="error"?e.errorBorder:t.status==="loading"?e.amber200:t.status==="empty"?e.dividerColor:e.emeraldBorder,L=t.status==="error"?e.red600:t.status==="loading"?e.amber800Warm:t.status==="empty"?e.grayTextWeak:e.emerald700,E=t.lastAction?.callerFile?Ze(t.lastAction.callerFile):null;return<$e index={I}distance={8}>
           <C style={o.cardContainer}>
             <Ne onPress={()=>{Z(t.name)}}style={[o.card,{borderLeftWidth:3.5,borderLeftColor:H,backgroundColor:t.status==="error"?e.errorCardBg:e.white},T&&o.cardRecentlyUpdated]}>
               <C style={o.cardBody}>
                 
                 <C style={o.cardHeaderRow}>
                   <C style={o.cardHeaderLeft}>
-                    <S style={o.serialNumber}>#{A+1}</S>
+                    <S style={o.serialNumber}>#{I+1}</S>
                     <C style={[o.methodBadge,{backgroundColor:e.violet600}]}>
-                      <S style={o.methodBadgeText}>REDUX</S>
+                      <S style={o.methodBadgeText}>
+                        {B("redux.title","REDUX").toUpperCase()}
+                      </S>
                     </C>
                     <C style={[o.chip,{backgroundColor:`${e.violet600}14`,borderColor:`${e.violet600}2E`}]}>
                       <S style={[o.chipText,{color:e.violet600}]}>
@@ -15,7 +17,7 @@ import ee,{useCallback as Be,useMemo as N,useRef as Pe,useState as te}from"react
                       </S>
                     </C>
 
-                    {t.lastAction?.originType&&(()=>{const v=Ie(t.lastAction.originType);return<C style={[o.chip,{backgroundColor:v.bg,borderColor:v.border}]}>
+                    {t.lastAction?.originType&&(()=>{const v=Ae(t.lastAction.originType);return<C style={[o.chip,{backgroundColor:v.bg,borderColor:v.border}]}>
                           {v.renderIcon(v.text,8.5)}
                           <S style={[o.chipText,{color:v.text}]}>
                             {v.label}
@@ -24,8 +26,8 @@ import ee,{useCallback as Be,useMemo as N,useRef as Pe,useState as te}from"react
                   </C>
 
                   <C style={o.cardHeaderRight}>
-                    <C style={[o.statusPill,{backgroundColor:j,borderColor:F}]}>
-                      {t.status==="loading"?<Ht color={e.amber800Warm}size={10}/>:t.status==="error"?<Lt color={e.red600}size={10}/>:t.status==="empty"?null:<C style={o.liveDot}/>}
+                    <C style={[o.statusPill,{backgroundColor:j,borderColor:D}]}>
+                      {t.status==="loading"?<Bt color={e.amber800Warm}size={10}/>:t.status==="error"?<Ht color={e.red600}size={10}/>:t.status==="empty"?null:<C style={o.liveDot}/>}
                       <S style={[o.statusPillText,{color:L}]}>
                         {t.status==="loading"?"Loading":t.status==="error"?t.statusMessage||"Error":t.status==="empty"?"Empty":"Live"}
                       </S>
@@ -46,7 +48,7 @@ import ee,{useCallback as Be,useMemo as N,useRef as Pe,useState as te}from"react
                       </C>}
                   </C>
                   <C style={o.actionPreviewRow}>
-                    <Ae color={e.grayTextWeak}size={10}/>
+                    <Ie color={e.grayTextWeak}size={10}/>
                     {t.lastAction?<Te text={t.lastAction.type+(t.lastAction.payloadPreview?` \xB7 ${t.lastAction.payloadPreview}`:"")}search={k}style={o.actionPreviewText}highlightStyle={o.highlight}numberOfLines={1}/>:<S style={o.actionPreviewEmptyText}numberOfLines={1}>
                         Initial state (no actions dispatched yet)
                       </S>}
@@ -91,7 +93,7 @@ import ee,{useCallback as Be,useMemo as N,useRef as Pe,useState as te}from"react
               </C>
             </Ne>
           </C>
-        </$e>},[k,Z]);return I?<C style={{flex:1,backgroundColor:e.grayBackground}}>
+        </$e>},[k,Z]);return A?<C style={{flex:1,backgroundColor:e.grayBackground}}>
       
       <C style={o.overviewCard}>
         <C style={o.statCol}>
@@ -107,7 +109,7 @@ import ee,{useCallback as Be,useMemo as N,useRef as Pe,useState as te}from"react
         <C style={[o.statCol,{flex:1.6}]}>
           <C style={{flexDirection:"row",alignItems:"center",gap:4}}>
             <S style={o.statHeading}>{B("redux.lastActionHeader","LAST ACTION")}</S>
-            {M?.originType&&(()=>{const t=Ie(M.originType);return<C style={{flexDirection:"row",alignItems:"center",gap:2,backgroundColor:t.bg,paddingHorizontal:4,paddingVertical:1,borderRadius:3}}>
+            {M?.originType&&(()=>{const t=Ae(M.originType);return<C style={{flexDirection:"row",alignItems:"center",gap:2,backgroundColor:t.bg,paddingHorizontal:4,paddingVertical:1,borderRadius:3}}>
                   {t.renderIcon(t.text,8)}
                   <S style={{fontFamily:R.interBold,fontSize:7.5,color:t.text}}>
                     {t.label}
@@ -128,11 +130,11 @@ import ee,{useCallback as Be,useMemo as N,useRef as Pe,useState as te}from"react
         <C style={o.searchRow}>
           <C style={O.searchContainer}>
             <Je color={e.grayTextWeak}size={15}/>
-            <Ee accessible={!0}accessibilityRole="search"accessibilityLabel="Search Redux slices or actions"accessibilityHint="Type to filter state slices in real time"placeholder={B("redux.searchPlaceholder","Search state or actions...")}placeholderTextColor={e.grayTextWeak}value={k}onChangeText={G}style={O.searchInput}autoCorrect={!1}autoCapitalize="none"/>
+            <We accessible={!0}accessibilityRole="search"accessibilityLabel="Search Redux slices or actions"accessibilityHint="Type to filter state slices in real time"placeholder={B("redux.searchPlaceholder","Search state or actions...")}placeholderTextColor={e.grayTextWeak}value={k}onChangeText={G}style={O.searchInput}autoCorrect={!1}autoCapitalize="none"/>
             {k.length>0&&<C style={{flexDirection:"row",alignItems:"center",gap:4}}>
                 <C style={{backgroundColor:`${e.purple}20`,borderRadius:10,paddingHorizontal:6,paddingVertical:1.5}}>
                   <S style={{color:e.purple,fontSize:9.5,fontFamily:R.interBold}}>
-                    {D.length}
+                    {F.length}
                   </S>
                 </C>
                 <Ce accessible={!0}accessibilityRole="button"accessibilityLabel="Clear search input"onPress={()=>G("")}hitSlop={10}>
@@ -142,17 +144,17 @@ import ee,{useCallback as Be,useMemo as N,useRef as Pe,useState as te}from"react
           </C>
 
           
-          <We accessible={!0}accessibilityRole="button"accessibilityLabel={`Sort order: ${P==="latest"?"Recently updated first":"Alphabetical A to Z"}`}accessibilityHint="Switches sorting between recently updated and alphabetical"style={[O.toolbarBtn,P==="latest"&&{backgroundColor:`${e.brandPurple}1F`,borderColor:e.brandPurple}]}onPress={()=>ke(t=>t==="latest"?"alpha":"latest")}hitSlop={6}>
+          <Oe accessible={!0}accessibilityRole="button"accessibilityLabel={`Sort order: ${P==="latest"?"Recently updated first":"Alphabetical A to Z"}`}accessibilityHint="Switches sorting between recently updated and alphabetical"style={[O.toolbarBtn,P==="latest"&&{backgroundColor:`${e.brandPurple}1F`,borderColor:e.brandPurple}]}onPress={()=>ke(t=>t==="latest"?"alpha":"latest")}hitSlop={6}>
             <St color={P==="latest"?e.brandPurple:e.grayTextStrong}size={16}/>
-          </We>
+          </Oe>
         </C>
 
         <C style={o.headerSubRow}>
           <S style={o.resultCount}>
-            Showing {D.length} of {$.length} state slices
+            Showing {F.length} of {$.length} state slices
           </S>
           <C style={{flexDirection:"row",alignItems:"center",gap:4}}>
-            {P==="latest"?<U color={e.brandPurple}size={11}/>:<Bt color={e.brandPurple}size={11}/>}
+            {P==="latest"?<U color={e.brandPurple}size={11}/>:<Lt color={e.brandPurple}size={11}/>}
             <S style={o.sortLabel}>
               {P==="latest"?"Newest Updates First":"Alphabetical (A-Z)"}
             </S>
@@ -161,13 +163,13 @@ import ee,{useCallback as Be,useMemo as N,useRef as Pe,useState as te}from"react
       </C>
 
       
-      <De ref={K}data={_}keyExtractor={t=>t.id}renderItem={ve}getItemLayout={(t,A)=>({length:126,offset:126*A,index:A})}initialNumToRender={12}maxToRenderPerBatch={8}windowSize={5}removeClippedSubviews={oe.OS==="android"}renderToHardwareTextureAndroid={!0}ListEmptyComponent={<Ue isSearch={k.trim().length>0}searchQuery={k}onClearSearch={()=>G("")}customTitle={k.trim().length>0?"No Matching Slices":"No Redux State Detected"}customSub={k.trim().length>0?`No Redux slices match "${k}"`:"Attach the Redux store or dispatch actions to see state slices."}/>}ListFooterComponent={D.length>0?<Ge count={_.length}totalCount={D.length}label="slices"loadMoreStep={ze}hasMore={_.length<D.length}onLoadMore={()=>J(t=>t+ze)}/>:null}contentContainerStyle={[o.listContent,D.length===0&&{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
+      <De ref={K}data={_}keyExtractor={t=>t.id}renderItem={ve}getItemLayout={(t,I)=>({length:126,offset:126*I,index:I})}initialNumToRender={10}maxToRenderPerBatch={8}windowSize={5}updateCellsBatchingPeriod={40}removeClippedSubviews={!0}renderToHardwareTextureAndroid={!0}showsVerticalScrollIndicator={!1}nestedScrollEnabled={!0}ListEmptyComponent={<Ue isSearch={k.trim().length>0}searchQuery={k}onClearSearch={()=>G("")}customTitle={k.trim().length>0?"No Matching Slices":"No Redux State Detected"}customSub={k.trim().length>0?`No Redux slices match "${k}"`:"Attach the Redux store or dispatch actions to see state slices."}/>}ListFooterComponent={F.length>0?<Ge count={_.length}totalCount={F.length}label="slices"loadMoreStep={ze}hasMore={_.length<F.length}onLoadMore={()=>J(t=>t+ze)}/>:null}style={{flex:1}}contentContainerStyle={[o.listContent,{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
     </C>:<C style={O.emptyContainer}>
         <C style={O.emptyIconWrap}>
-          <Ae color={e.purple}size={32}/>
+          <Ie color={e.purple}size={32}/>
         </C>
         <S style={O.emptyTitle}>{B("redux.noStoreConnected","No Redux Store Connected")}</S>
         <S style={O.emptySub}>
           {B("redux.connectStoreTip","Call connectReduxStore(store) or use inspectorReduxMiddleware at app initialization.")}
         </S>
-      </C>}),o=Fe.create({overviewCard:{flexDirection:"row",alignItems:"center",backgroundColor:e.white,marginHorizontal:12,marginTop:10,borderRadius:12,padding:12,borderWidth:1,borderColor:e.dividerColor,shadowColor:e.primaryBlack,shadowOffset:{width:0,height:1},shadowOpacity:.03,shadowRadius:3,elevation:1},statCol:{flex:1},statDivider:{width:1,height:28,backgroundColor:e.dividerColor,marginHorizontal:8},statHeading:{fontFamily:R.interBold,fontSize:9,color:e.grayTextWeak,letterSpacing:.5},statBigVal:{fontFamily:R.interBold,fontSize:14,color:e.primaryBlack,marginTop:2},statLastAction:{fontFamily:R.interBold,fontSize:11,color:e.purple,marginTop:2},statLastTime:{fontFamily:R.interRegular,fontSize:9.5,color:e.grayTextWeak},toolbarContainer:{backgroundColor:e.white,borderBottomWidth:1,borderBottomColor:e.dividerColor,paddingHorizontal:12,paddingTop:8,paddingBottom:6,marginTop:8},searchRow:{flexDirection:"row",alignItems:"center",gap:8},headerSubRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginTop:6,paddingHorizontal:2},resultCount:{fontFamily:R.interMedium,fontSize:11,color:e.grayTextWeak},sortLabel:{fontFamily:R.interMedium,fontSize:10.5,color:e.brandPurple},listContent:{paddingVertical:8,paddingBottom:36},cardContainer:{paddingHorizontal:10,paddingVertical:4,height:126},card:{backgroundColor:e.white,borderRadius:10,borderWidth:1,borderColor:e.grayBorderSecondary,shadowColor:e.shadowColorString,shadowOffset:{width:0,height:1},shadowOpacity:.05,shadowRadius:2.5,elevation:1.5,height:118,overflow:"hidden"},cardRecentlyUpdated:{borderColor:`${e.brandPurple}66`,backgroundColor:e.purpleTintBg},cardBody:{paddingHorizontal:12,paddingTop:9,paddingBottom:7,flex:1,justifyContent:"space-between"},cardHeaderRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",height:22,minHeight:22,maxHeight:22,gap:6},cardHeaderLeft:{flexDirection:"row",alignItems:"center",gap:6,flex:1,minWidth:0},cardHeaderRight:{flexDirection:"row",alignItems:"center",gap:6,flexShrink:0},serialNumber:{fontFamily:R.interBold,fontSize:10.5,lineHeight:13,color:e.grayTextWeak},methodBadge:{paddingHorizontal:5.5,paddingVertical:2,borderRadius:4,alignItems:"center",justifyContent:"center"},methodBadgeText:{fontFamily:R.interBold,color:e.white,fontSize:9,lineHeight:12,letterSpacing:.4},chip:{flexDirection:"row",alignItems:"center",gap:3,paddingHorizontal:5,paddingVertical:1.5,borderRadius:4,borderWidth:1},chipText:{fontFamily:R.interBold,fontSize:8.5,lineHeight:11,letterSpacing:.3},statusPill:{flexDirection:"row",alignItems:"center",gap:3.5,paddingHorizontal:6,paddingVertical:2,borderRadius:4,borderWidth:1},liveDot:{width:6,height:6,borderRadius:3,backgroundColor:e.emerald500},statusPillText:{fontFamily:R.interBold,fontSize:9.5,lineHeight:12},cardMainRow:{height:48,minHeight:48,maxHeight:48,justifyContent:"space-between",gap:3},sliceNameRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:6},sliceNameText:{fontFamily:R.interBold,fontSize:12.5,lineHeight:16,color:e.primaryBlack,flex:1},actionCountChip:{flexDirection:"row",alignItems:"center",gap:2.5,backgroundColor:`${e.violet600}14`,borderColor:`${e.violet600}2E`,borderWidth:1,paddingHorizontal:4.5,paddingVertical:1,borderRadius:3.5},actionCountChipText:{fontFamily:R.interBold,fontSize:8.5,lineHeight:11,color:e.violet600},actionPreviewRow:{flexDirection:"row",alignItems:"center",gap:4.5,minHeight:15},actionPreviewText:{fontFamily:oe.select({ios:"Menlo",default:"monospace"}),fontSize:10,lineHeight:13,color:e.grayTextWeak,flex:1},actionPreviewEmptyText:{fontFamily:R.interRegular,fontSize:10,lineHeight:13,color:e.slate400,fontStyle:"italic",flex:1},cardFooterRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",height:18,minHeight:18,maxHeight:18,gap:6},footerLeft:{flexDirection:"row",alignItems:"center",gap:5,flex:1,minWidth:0,overflow:"hidden"},footerRight:{flexDirection:"row",alignItems:"center",gap:5,flexShrink:0},footerTimestampText:{fontFamily:R.interRegular,fontSize:10,lineHeight:13,color:e.slate400},callerChip:{flexDirection:"row",alignItems:"center",gap:2.5,backgroundColor:e.sky100,paddingHorizontal:4.5,paddingVertical:1,borderRadius:3,borderWidth:.5,borderColor:e.sky400,marginLeft:4},callerChipText:{fontFamily:R.interMedium,fontSize:8.5,lineHeight:11,color:e.sky600},metaStatChip:{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:e.violetSoftBg,borderColor:e.violetSoftBorder,borderWidth:1,paddingHorizontal:5.5,paddingVertical:1.5,borderRadius:4},metaStatText:{fontFamily:R.interBold,color:e.violetSoftText,fontSize:9,lineHeight:12},waterfallContainer:{height:2.5,width:"100%",backgroundColor:e.graySurface,borderRadius:1.5,overflow:"hidden"},waterfallBar:{height:"100%",borderRadius:1.5},highlight:{backgroundColor:e.yellowHighlight,color:e.primaryBlack,borderRadius:2}});export default Pt;
+      </C>}),o=Ee.create({overviewCard:{flexDirection:"row",alignItems:"center",backgroundColor:e.white,marginHorizontal:8,marginTop:8,borderRadius:12,padding:10,borderWidth:1,borderColor:e.dividerColor,shadowColor:e.primaryBlack,shadowOffset:{width:0,height:1},shadowOpacity:.03,shadowRadius:3,elevation:1},statCol:{flex:1},statDivider:{width:1,height:28,backgroundColor:e.dividerColor,marginHorizontal:6},statHeading:{fontFamily:R.interBold,fontSize:9,color:e.grayTextWeak,letterSpacing:.5},statBigVal:{fontFamily:R.interBold,fontSize:14,color:e.primaryBlack,marginTop:2},statLastAction:{fontFamily:R.interBold,fontSize:11,color:e.purple,marginTop:2},statLastTime:{fontFamily:R.interRegular,fontSize:9.5,color:e.grayTextWeak},toolbarContainer:{backgroundColor:e.white,borderBottomWidth:1,borderBottomColor:e.dividerColor,paddingHorizontal:8,paddingTop:8,paddingBottom:6,marginTop:8},searchRow:{flexDirection:"row",alignItems:"center",gap:8},headerSubRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginTop:6,paddingHorizontal:2},resultCount:{fontFamily:R.interMedium,fontSize:11,color:e.grayTextWeak},sortLabel:{fontFamily:R.interMedium,fontSize:10.5,color:e.brandPurple},listContent:{paddingVertical:8,paddingBottom:36},cardContainer:{paddingHorizontal:5,paddingVertical:4,height:126},card:{backgroundColor:e.white,borderRadius:10,borderWidth:1,borderColor:e.grayBorderSecondary,shadowColor:e.shadowColorString,shadowOffset:{width:0,height:1},shadowOpacity:.05,shadowRadius:2.5,elevation:1.5,height:118,overflow:"hidden"},cardRecentlyUpdated:{borderColor:`${e.brandPurple}66`,backgroundColor:e.purpleTintBg},cardBody:{paddingHorizontal:8,paddingTop:8,paddingBottom:6,flex:1,justifyContent:"space-between"},cardHeaderRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",height:22,minHeight:22,maxHeight:22,gap:4.5},cardHeaderLeft:{flexDirection:"row",alignItems:"center",gap:4.5,flex:1,minWidth:0},cardHeaderRight:{flexDirection:"row",alignItems:"center",gap:6,flexShrink:0},serialNumber:{fontFamily:R.interBold,fontSize:10.5,lineHeight:13,color:e.grayTextWeak},methodBadge:{paddingHorizontal:5.5,paddingVertical:2,borderRadius:4,alignItems:"center",justifyContent:"center"},methodBadgeText:{fontFamily:R.interBold,color:e.white,fontSize:9,lineHeight:12,letterSpacing:.4},chip:{flexDirection:"row",alignItems:"center",gap:3,paddingHorizontal:5,paddingVertical:1.5,borderRadius:4,borderWidth:1},chipText:{fontFamily:R.interBold,fontSize:8.5,lineHeight:11,letterSpacing:.3},statusPill:{flexDirection:"row",alignItems:"center",gap:3.5,paddingHorizontal:6,paddingVertical:2,borderRadius:4,borderWidth:1},liveDot:{width:6,height:6,borderRadius:3,backgroundColor:e.emerald500},statusPillText:{fontFamily:R.interBold,fontSize:9.5,lineHeight:12},cardMainRow:{height:48,minHeight:48,maxHeight:48,justifyContent:"space-between",gap:3},sliceNameRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:6},sliceNameText:{fontFamily:R.interBold,fontSize:12.5,lineHeight:16,color:e.primaryBlack,flex:1},actionCountChip:{flexDirection:"row",alignItems:"center",gap:2.5,backgroundColor:`${e.violet600}14`,borderColor:`${e.violet600}2E`,borderWidth:1,paddingHorizontal:4.5,paddingVertical:1,borderRadius:3.5},actionCountChipText:{fontFamily:R.interBold,fontSize:8.5,lineHeight:11,color:e.violet600},actionPreviewRow:{flexDirection:"row",alignItems:"center",gap:4.5,minHeight:15},actionPreviewText:{fontFamily:Fe.select({ios:"Menlo",default:"monospace"}),fontSize:10,lineHeight:13,color:e.grayTextWeak,flex:1},actionPreviewEmptyText:{fontFamily:R.interRegular,fontSize:10,lineHeight:13,color:e.slate400,fontStyle:"italic",flex:1},cardFooterRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",height:18,minHeight:18,maxHeight:18,gap:6},footerLeft:{flexDirection:"row",alignItems:"center",gap:5,flex:1,minWidth:0,overflow:"hidden"},footerRight:{flexDirection:"row",alignItems:"center",gap:5,flexShrink:0},footerTimestampText:{fontFamily:R.interRegular,fontSize:10,lineHeight:13,color:e.slate400},callerChip:{flexDirection:"row",alignItems:"center",gap:2.5,backgroundColor:e.sky100,paddingHorizontal:4.5,paddingVertical:1,borderRadius:3,borderWidth:.5,borderColor:e.sky400,marginLeft:4},callerChipText:{fontFamily:R.interMedium,fontSize:8.5,lineHeight:11,color:e.sky600},metaStatChip:{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:e.violetSoftBg,borderColor:e.violetSoftBorder,borderWidth:1,paddingHorizontal:5.5,paddingVertical:1.5,borderRadius:4},metaStatText:{fontFamily:R.interBold,color:e.violetSoftText,fontSize:9,lineHeight:12},waterfallContainer:{height:2.5,width:"100%",backgroundColor:e.graySurface,borderRadius:1.5,overflow:"hidden"},waterfallBar:{height:"100%",borderRadius:1.5},highlight:{backgroundColor:e.yellowHighlight,color:e.primaryBlack,borderRadius:2}});export default Pt;

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SecondaryTelemetryStrip: React.FC;

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

@@ -0,0 +1,43 @@
+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}>
+        
+        <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>
+        </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>
+        </M>
+
+        
+        {P&&<>
+            <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>
+            </M>
+          </>}
+
+        
+        {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}>
+                {Math.round(T)}%
+              </I>
+            </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}});