react-native-inapp-inspector 2.5.12 → 2.5.14

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

@@ -1,11 +1,11 @@
-import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert as ze,Platform as tt,Pressable as U,ScrollView as Z,StyleSheet as rt,Text as C,TextInput as Tt,ToastAndroid as Oe,TouchableOpacity as Ne,View as T}from"react-native";import{useTranslation as ht}from"../../i18n";import{useInspector as wt}from"./InspectorContext";import He from"../SegmentedTabs";import K from"../JsonViewer";import Me from"../DiffViewer";import Ee from"../CopyButton";import Ct from"../ShareButton";import St from"../TouchableScale";import Bt from"../HighlightText";import Vt from"../AnimatedEntrance";import{getActionHistory as zt}from"../../customHooks/reduxLogger";import{getSize as q,openInVSCode as _,parseStackLine as je}from"../../helpers";import{shareReduxReport as It}from"../../helpers/shareFormatter";import{getCustomStorage as $e}from"../../helpers/settingsStore";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as k}from"../../styles/AppFonts";import{TerminalIcon as Je,SearchIcon as Pt,ClearIcon as Wt,ClockIcon as Ie,LayersIcon as Ge,TrashIcon as Ue,ForwardChevronIcon as Rt,LiveStateIcon as Ke,TimelineIcon as Te,StorageIcon as Ce,MetadataIcon as Ft,BoltIcon as Pe,AtomIcon as Dt,ScreenIcon as At,ListenerIcon as Lt,DocIcon as We,ExternalLinkIcon as Se,CodeBracketsIcon as Ot}from"../NetworkIcons";const qe=V=>{switch(V){case"saga":return{label:"SAGA",renderIcon:(D,F=9)=><Dt color={D}size={F}/>,bg:e.purple100,text:e.brandPurple,border:e.purple200};case"thunk":return{label:"THUNK",renderIcon:(D,F=9)=><Pe color={D}size={F}/>,bg:e.amber100,text:e.amber800Warm,border:e.amber200};case"epic":return{label:"EPIC",renderIcon:(D,F=9)=><Je color={D}size={F}/>,bg:e.sky100,text:e.sky600,border:e.sky400};case"listener":return{label:"LISTENER",renderIcon:(D,F=9)=><Lt color={D}size={F}/>,bg:e.teal100,text:e.teal700,border:e.teal400};case"component":return{label:"UI DISPATCH",renderIcon:(D,F=9)=><At color={D}size={F}/>,bg:e.sky100,text:e.sky600,border:e.sky400};default:return{label:"DISPATCH",renderIcon:(D,F=9)=><Pe color={D}size={F}/>,bg:e.slate100,text:e.slate700,border:e.slate200}}},Nt=_e.memo(()=>{const{t:V}=ht(),{reduxState:D,reduxLastActionMap:F,selectedReduxSlice:W,selectedReduxAction:z}=wt(),[A,Re]=E(""),[O,Fe]=E("live"),[Q,Qe]=E("payload"),[ve,De]=E("raw"),[Xe,Ye]=E(null),[J,G]=E(!1),[X,N]=E(null),ke=Ve(()=>zt(),[F]),j=Ve(()=>W?ke.filter(B=>!B.affectedSlices||B.affectedSlices.length===0?!0:B.affectedSlices.includes(W)):ke,[ke,W]),Ae=Ve(()=>{if(!A.trim())return j;const B=A.toLowerCase();return j.filter(R=>R.type.toLowerCase().includes(B)||R.callerFile&&R.callerFile.toLowerCase().includes(B)||R.payload&&JSON.stringify(R.payload).toLowerCase().includes(B))},[j,A]);et(()=>{if(!W)return;async function B(){try{const R=$e();if(!R){G(!1),N(null);return}let v=await R.getItem(`persist:${W}`);if(v){try{N(JSON.parse(v))}catch{N(v)}G(!0);return}let I=await R.getItem("persist:root");if(I){const S=JSON.parse(I);if(S&&S[W]!==void 0){const P=S[W];try{N(typeof P=="string"?JSON.parse(P):P)}catch{N(P)}G(!0);return}}}catch{}G(!1),N(null)}B()},[W]);const Le=()=>{W&&ze.alert(V("redux.clearPersistedTitle","Clear Persisted State"),V("redux.clearPersistedMessage",'Are you sure you want to delete persisted storage for slice "{{slice}}"?').replace("{{slice}}",W||""),[{text:V("common.cancel","Cancel"),style:"cancel"},{text:"Delete",style:"destructive",onPress:async()=>{try{const B=$e();if(!B)return;typeof B.removeItem=="function"?await B.removeItem(`persist:${W}`):await B.setItem(`persist:${W}`,""),G(!1),N(null),Fe("live"),tt.OS==="android"?Oe.show("Persisted state cleared",Oe.SHORT):ze.alert(V("redux.clearedPersisted","Persisted state has been cleared."))}catch{ze.alert(V("common.failed","Failed"),V("redux.clearPersistedError","Failed to clear persisted state."))}}}])};if(W!=null){const B=D?.[W],R=B&&typeof B=="object"?Object.keys(B).length:typeof B<"u"?1:0,v=F[W],I=[{key:"live",label:V("redux.liveState","Live State"),icon:S=><Ke color={S?e.white:e.grayText}size={12}/>},{key:"timeline",label:`${V("redux.timeline","Timeline")} (${j.length})`,icon:S=><Te color={S?e.white:e.grayText}size={12}/>},{key:"persisted",label:J?V("redux.persisted","Persisted"):V("redux.storage","Storage"),icon:S=><Ce color={S?e.white:e.grayText}size={12}/>},{key:"metadata",label:V("redux.metadata","Metadata"),icon:S=><Ft color={S?e.white:e.grayText}size={12}/>}];return<T style={{flex:1,backgroundColor:e.grayBackground}}>
+import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert as ze,Platform as tt,Pressable as U,ScrollView as Z,StyleSheet as rt,Text as C,TextInput as Tt,ToastAndroid as Ne,TouchableOpacity as Oe,View as T}from"react-native";import{useTranslation as ht}from"../../i18n";import{useInspector as wt}from"./InspectorContext";import He from"../SegmentedTabs";import K from"../JsonViewer";import Me from"../DiffViewer";import Ee from"../CopyButton";import Ct from"../ShareButton";import St from"../TouchableScale";import Bt from"../HighlightText";import Vt from"../AnimatedEntrance";import{getActionHistory as zt}from"../../customHooks/reduxLogger";import{getSize as q,openInVSCode as _,parseStackLine as je}from"../../helpers";import{shareReduxReport as It}from"../../helpers/shareFormatter";import{getCustomStorage as $e}from"../../helpers/settingsStore";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as B}from"../../styles/AppFonts";import{TerminalIcon as Je,SearchIcon as Pt,ClearIcon as Wt,ClockIcon as Ie,LayersIcon as Ge,TrashIcon as Ue,ForwardChevronIcon as Rt,LiveStateIcon as Ke,TimelineIcon as Te,StorageIcon as Ce,MetadataIcon as Ft,BoltIcon as Pe,AtomIcon as Dt,ScreenIcon as At,ListenerIcon as Lt,DocIcon as We,ExternalLinkIcon as Se,CodeBracketsIcon as Nt}from"../NetworkIcons";const qe=k=>{switch(k){case"saga":return{label:"SAGA",renderIcon:(D,F=9)=><Dt color={D}size={F}/>,bg:e.purple100,text:e.brandPurple,border:e.purple200};case"thunk":return{label:"THUNK",renderIcon:(D,F=9)=><Pe color={D}size={F}/>,bg:e.amber100,text:e.amber800Warm,border:e.amber200};case"epic":return{label:"EPIC",renderIcon:(D,F=9)=><Je color={D}size={F}/>,bg:e.sky100,text:e.sky600,border:e.sky400};case"listener":return{label:"LISTENER",renderIcon:(D,F=9)=><Lt color={D}size={F}/>,bg:e.teal100,text:e.teal700,border:e.teal400};case"component":return{label:"UI DISPATCH",renderIcon:(D,F=9)=><At color={D}size={F}/>,bg:e.sky100,text:e.sky600,border:e.sky400};default:return{label:"DISPATCH",renderIcon:(D,F=9)=><Pe color={D}size={F}/>,bg:e.slate100,text:e.slate700,border:e.slate200}}},Ot=_e.memo(()=>{const{t:k}=ht(),{reduxState:D,reduxLastActionMap:F,selectedReduxSlice:W,selectedReduxAction:z}=wt(),[A,Re]=E(""),[N,Fe]=E("live"),[Q,Qe]=E("payload"),[ve,De]=E("raw"),[Xe,Ye]=E(null),[J,G]=E(!1),[X,O]=E(null),ke=Ve(()=>zt(),[F]),j=Ve(()=>W?ke.filter(V=>!V.affectedSlices||V.affectedSlices.length===0?!0:V.affectedSlices.includes(W)):ke,[ke,W]),Ae=Ve(()=>{if(!A.trim())return j;const V=A.toLowerCase();return j.filter(R=>R.type.toLowerCase().includes(V)||R.callerFile&&R.callerFile.toLowerCase().includes(V)||R.payload&&JSON.stringify(R.payload).toLowerCase().includes(V))},[j,A]);et(()=>{if(!W)return;async function V(){try{const R=$e();if(!R){G(!1),O(null);return}let v=await R.getItem(`persist:${W}`);if(v){try{O(JSON.parse(v))}catch{O(v)}G(!0);return}let I=await R.getItem("persist:root");if(I){const S=JSON.parse(I);if(S&&S[W]!==void 0){const P=S[W];try{O(typeof P=="string"?JSON.parse(P):P)}catch{O(P)}G(!0);return}}}catch{}G(!1),O(null)}V()},[W]);const Le=()=>{W&&ze.alert(k("redux.clearPersistedTitle","Clear Persisted State"),k("redux.clearPersistedMessage",'Are you sure you want to delete persisted storage for slice "{{slice}}"?').replace("{{slice}}",W||""),[{text:k("common.cancel","Cancel"),style:"cancel"},{text:"Delete",style:"destructive",onPress:async()=>{try{const V=$e();if(!V)return;typeof V.removeItem=="function"?await V.removeItem(`persist:${W}`):await V.setItem(`persist:${W}`,""),G(!1),O(null),Fe("live"),tt.OS==="android"?Ne.show("Persisted state cleared",Ne.SHORT):ze.alert(k("redux.clearedPersisted","Persisted state has been cleared."))}catch{ze.alert(k("common.failed","Failed"),k("redux.clearPersistedError","Failed to clear persisted state."))}}}])};if(W!=null){const V=D?.[W],R=V&&typeof V=="object"?Object.keys(V).length:typeof V<"u"?1:0,v=F[W],I=[{key:"live",label:k("redux.liveState","Live State"),icon:S=><Ke color={S?e.white:e.grayText}size={12}/>},{key:"timeline",label:`${k("redux.timeline","Timeline")} (${j.length})`,icon:S=><Te color={S?e.white:e.grayText}size={12}/>},{key:"persisted",label:J?k("redux.persisted","Persisted"):k("redux.storage","Storage"),icon:S=><Ce color={S?e.white:e.grayText}size={12}/>},{key:"metadata",label:k("redux.metadata","Metadata"),icon:S=><Ft color={S?e.white:e.grayText}size={12}/>}];return<T style={{flex:1,backgroundColor:e.grayBackground}}>
         
         <T style={t.infoBar}>
           <T style={t.infoTopRow}>
             <T style={{flexDirection:"row",alignItems:"center",gap:6,flexWrap:"wrap",flex:1,minWidth:0}}>
               <T style={[t.methodBadge,{backgroundColor:e.indigo600Alt}]}>
                 <C style={t.methodBadgeText}>
-                  {V("redux.slice","SLICE")}
+                  {k("redux.slice","SLICE")}
                 </C>
               </T>
               <C style={t.sliceNameText}numberOfLines={1}>
@@ -14,11 +14,11 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
               {J?<T style={t.persistedChip}>
                   <Ce color={e.emerald700}size={10}/>
                   <C style={t.persistedChipText}>
-                    {V("redux.persisted","Persisted").toUpperCase()}
+                    {k("redux.persisted","Persisted").toUpperCase()}
                   </C>
                 </T>:<T style={t.inMemoryChip}>
                   <C style={t.inMemoryChipText}>
-                    {V("redux.inMemory","In-Memory").toUpperCase()}
+                    {k("redux.inMemory","In-Memory").toUpperCase()}
                   </C>
                 </T>}
               {v?.timestamp&&<T style={t.timePill}>
@@ -30,7 +30,7 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
             </T>
 
             
-            <Ee value={()=>O==="live"?B:X}label={V("redux.sliceJson","Slice JSON")}/>
+            <Ee value={()=>N==="live"?V:X}label={k("redux.sliceJson","Slice JSON")}/>
           </T>
 
           
@@ -38,7 +38,7 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
             <T style={[t.statPill,{backgroundColor:e.indigo50,borderColor:e.indigo400}]}>
               <Ge color={e.indigo600Alt}size={11}/>
               <C style={[t.statLabel,{color:e.indigo600Alt}]}>
-                {V("redux.keys","Keys")}:
+                {k("redux.keys","Keys")}:
               </C>
               <C style={[t.statValue,{color:e.indigo600Alt}]}>
                 {R}
@@ -46,16 +46,16 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
             </T>
             <T style={[t.statPill,{backgroundColor:e.sky100,borderColor:e.sky400}]}>
               <C style={[t.statLabel,{color:e.sky600}]}>
-                {V("redux.size","Size")}:
+                {k("redux.size","Size")}:
               </C>
               <C style={[t.statValue,{color:e.sky600}]}>
-                {q(B)}
+                {q(V)}
               </C>
             </T>
             <T style={[t.statPill,{backgroundColor:e.purple100,borderColor:e.purple200}]}>
               <Te color={e.violet600}size={11}/>
               <C style={[t.statLabel,{color:e.brandPurple}]}>
-                {V("redux.timeline","Timeline")}:
+                {k("redux.timeline","Timeline")}:
               </C>
               <C style={[t.statValue,{color:e.brandPurple}]}>
                 {j.length}
@@ -64,7 +64,7 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
             {v&&<T style={[t.statPill,{backgroundColor:e.amber100,borderColor:e.amber200,flexShrink:1,maxWidth:160}]}>
                 <Pe color={e.amber800Warm}size={11}/>
                 <C style={[t.statLabel,{color:e.amber800Warm}]}>
-                  {V("redux.last","Last")}:
+                  {k("redux.last","Last")}:
                 </C>
                 <C style={[t.statValue,{color:e.amber800Warm,flexShrink:1}]}numberOfLines={1}>
                   {v.type}
@@ -73,20 +73,20 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
           </T>
 
           
-          <He tabs={I}activeKey={O}onChange={S=>Fe(S)}style={{marginTop:10}}/>
+          <He tabs={I}activeKey={N}onChange={S=>Fe(S)}style={{marginTop:10}}/>
         </T>
 
         
-        {O!=="metadata"&&<T style={t.searchContainer}>
+        {N!=="metadata"&&<T style={t.searchContainer}>
             <Pt color={e.grayTextWeak}size={14}/>
-            <Tt placeholder={O==="timeline"?"Search action type, file, or payload...":"Search keys or values..."}placeholderTextColor={e.grayTextWeak}value={A}onChangeText={Re}style={t.searchInput}autoCorrect={!1}autoCapitalize="none"/>
+            <Tt placeholder={N==="timeline"?"Search action type, file, or payload...":"Search keys or values..."}placeholderTextColor={e.grayTextWeak}value={A}onChangeText={Re}style={t.searchInput}autoCorrect={!1}autoCapitalize="none"/>
             {A.length>0&&<U onPress={()=>Re("")}hitSlop={10}>
                 <Wt color={e.grayTextWeak}size={14}/>
               </U>}
           </T>}
 
         
-        {O==="timeline"?<Z style={{flex:1}}contentContainerStyle={{padding:12,paddingBottom:40}}keyboardShouldPersistTaps="handled">
+        {N==="timeline"?<Z style={{flex:1}}contentContainerStyle={{padding:12,paddingBottom:40}}keyboardShouldPersistTaps="handled">
             {Ae.length===0?<T style={t.emptyBox}>
                 <Te color={e.grayTextWeak}size={28}/>
                 <C style={t.emptyBoxText}>
@@ -104,7 +104,7 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
                           
                           <T style={{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:$.bg,paddingHorizontal:5,paddingVertical:2,borderRadius:4,borderWidth:1,borderColor:$.border}}>
                             {$.renderIcon($.text,8.5)}
-                            <C style={{fontFamily:k.interBold,fontSize:8.5,color:$.text,letterSpacing:.3}}>
+                            <C style={{fontFamily:B.interBold,fontSize:8.5,color:$.text,letterSpacing:.3}}>
                               {$.label}
                             </C>
                           </T>
@@ -124,18 +124,18 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
                       {S.callerFile&&<T style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginTop:6,marginBottom:2,paddingHorizontal:8,paddingVertical:4,backgroundColor:e.grayBackground,borderRadius:6,borderWidth:1,borderColor:e.dividerColor}}>
                           <T style={{flexDirection:"row",alignItems:"center",gap:5,flex:1,minWidth:0}}>
                             <We color={e.sky600}size={10}/>
-                            <C style={{fontFamily:k.interMedium,fontSize:9.5,color:e.grayTextWeak}}>
-                              {V("redux.triggeredFrom","Triggered From:")}
+                            <C style={{fontFamily:B.interMedium,fontSize:9.5,color:e.grayTextWeak}}>
+                              {k("redux.triggeredFrom","Triggered From:")}
                             </C>
-                            <C style={{fontFamily:k.interBold,fontSize:9.5,color:e.sky600}}numberOfLines={1}>
+                            <C style={{fontFamily:B.interBold,fontSize:9.5,color:e.sky600}}numberOfLines={1}>
                               {Ze}:{S.callerLine||1}
                             </C>
                           </T>
 
                           <U onPress={()=>_(S.callerFile,S.callerLine,S.callerCol)}hitSlop={8}style={{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:e.sky100,paddingHorizontal:5,paddingVertical:2,borderRadius:4}}>
                             <Se color={e.sky600}size={9}/>
-                            <C style={{fontFamily:k.interBold,fontSize:8.5,color:e.sky600}}>
-                              {V("redux.openInEditor","Open in Editor")}
+                            <C style={{fontFamily:B.interBold,fontSize:8.5,color:e.sky600}}>
+                              {k("redux.openInEditor","Open in Editor")}
                             </C>
                           </U>
                         </T>}
@@ -145,16 +145,16 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
                           
                           {S.stack?<T style={{marginBottom:12}}>
                               <C style={t.expandedSectionTitle}>
-                                {V("redux.callStack","Call Stack Trace")}:
+                                {k("redux.callStack","Call Stack Trace")}:
                               </C>
                               <T style={{backgroundColor:e.grayBackground,borderRadius:8,padding:8,borderWidth:1,borderColor:e.dividerColor,gap:4}}>
                                 {S.stack.split(`
 `).map(M=>M.trim()).filter(M=>M.length>0&&!M.includes("reduxLogger")&&!M.includes("inspectorReduxMiddleware")).slice(0,8).map((M,Be)=>{const L=je(M,Be===0),Y=L.frameType==="app";return<U key={Be}onPress={()=>{L.fileName!=="Unknown"&&_(L.fullPath||L.fileName,L.lineNumber,L.columnNumber)}}style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:3,borderBottomWidth:Be<7?.5:0,borderBottomColor:e.dividerColor}}>
                                         <T style={{flex:1,minWidth:0}}>
-                                          <C style={{fontFamily:Y?k.interBold:k.interRegular,fontSize:9.5,color:Y?e.primaryBlack:e.grayTextWeak}}numberOfLines={1}>
+                                          <C style={{fontFamily:Y?B.interBold:B.interRegular,fontSize:9.5,color:Y?e.primaryBlack:e.grayTextWeak}}numberOfLines={1}>
                                             {L.functionName||"anonymous"}
                                           </C>
-                                          <C style={{fontFamily:k.interRegular,fontSize:8.5,color:Y?e.sky600:e.grayTextWeak}}numberOfLines={1}>
+                                          <C style={{fontFamily:B.interRegular,fontSize:8.5,color:Y?e.sky600:e.grayTextWeak}}numberOfLines={1}>
                                             {L.fileName}:
                                             {L.lineNumber||1}:
                                             {L.columnNumber||1}
@@ -167,40 +167,40 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
 
                           {S.payload!==void 0&&<T style={{marginBottom:12}}>
                               <C style={t.expandedSectionTitle}>
-                                {V("redux.actionPayload","Action Payload:")}
+                                {k("redux.actionPayload","Action Payload:")}
                               </C>
                               <K data={S.payload}search={A}forceOpen={!0}wrap={!0}/>
                             </T>}
 
                           <C style={t.expandedSectionTitle}>
-                            {V("redux.stateChangesDiff","State Changes (Diff):")}
+                            {k("redux.stateChangesDiff","State Changes (Diff):")}
                           </C>
                           <Me oldData={S.prevState?.[W]||{}}newData={S.nextState?.[W]||{}}forceOpen={!0}/>
                         </T>:<T style={t.collapsedPrompt}>
                           <C style={t.collapsedPromptText}>
-                            {V("redux.tapToInspectAction","Tap to inspect action payload & diff changes")}
+                            {k("redux.tapToInspectAction","Tap to inspect action payload & diff changes")}
                           </C>
                           <Rt color={e.grayTextWeak}size={12}/>
                         </T>}
                     </St>
                   </Vt>})}
-          </Z>:O==="metadata"?<Z style={{flex:1}}contentContainerStyle={{padding:12,paddingBottom:40}}keyboardShouldPersistTaps="handled">
+          </Z>:N==="metadata"?<Z style={{flex:1}}contentContainerStyle={{padding:12,paddingBottom:40}}keyboardShouldPersistTaps="handled">
             <T style={t.metadataCard}>
-              {[{label:"Slice Name",value:W},{label:"Root Keys Count",value:`${R} keys`},{label:"In-Memory State Size",value:q(B)},{label:"Persistence Status",value:J?`Persisted (${q(X)})`:"Not Persisted (In-Memory)"},{label:"Dispatched Actions History",value:`${j.length} recorded actions`},{label:"Last Dispatched Action",value:v?v.type:"None"},{label:"Last Action Timestamp",value:v?v.timestamp:"Initial"}].map((S,P)=><T key={P}style={[t.metaRow,P===6&&{borderBottomWidth:0}]}>
+              {[{label:"Slice Name",value:W},{label:"Root Keys Count",value:`${R} keys`},{label:"In-Memory State Size",value:q(V)},{label:"Persistence Status",value:J?`Persisted (${q(X)})`:"Not Persisted (In-Memory)"},{label:"Dispatched Actions History",value:`${j.length} recorded actions`},{label:"Last Dispatched Action",value:v?v.type:"None"},{label:"Last Action Timestamp",value:v?v.timestamp:"Initial"}].map((S,P)=><T key={P}style={[t.metaRow,P===6&&{borderBottomWidth:0}]}>
                   <C style={t.metaLabel}>{S.label}</C>
                   <C style={t.metaValue}selectable numberOfLines={2}>
                     {S.value}
                   </C>
                 </T>)}
 
-              {J&&<Ne style={t.clearPersistBtn}onPress={Le}>
+              {J&&<Oe style={t.clearPersistBtn}onPress={Le}>
                   <Ue color={e.errorColor}size={14}/>
                   <C style={t.clearPersistText}>
-                    Clear Persisted Storage For This Slice
+                    {k("redux.clearPersistedStorageSlice","Clear Persisted Storage For This Slice")}
                   </C>
-                </Ne>}
+                </Oe>}
             </T>
-          </Z>:O==="persisted"?<T style={{flex:1,padding:10}}>
+          </Z>:N==="persisted"?<T style={{flex:1,padding:10}}>
             {J?<T style={{flex:1}}>
                 <T style={t.persistedInfoCard}>
                   <T style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between"}}>
@@ -210,12 +210,12 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
                         Stored in persistent storage ({q(X)})
                       </C>
                     </T>
-                    <Ne style={t.clearPersistMiniBtn}onPress={Le}>
+                    <Oe style={t.clearPersistMiniBtn}onPress={Le}>
                       <Ue color={e.errorColor}size={12}/>
                       <C style={t.clearPersistMiniText}>
                         Clear
                       </C>
-                    </Ne>
+                    </Oe>
                   </T>
                 </T>
                 <T style={{flex:1,marginTop:8}}>
@@ -224,17 +224,16 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
               </T>:<T style={t.emptyBox}>
                 <Ce color={e.grayTextWeak}size={32}/>
                 <C style={t.emptyBoxTitle}>
-                  Not Persisted in Storage
+                  {k("redux.notPersistedInStorage","Not Persisted in Storage")}
                 </C>
                 <C style={t.emptyBoxText}>
-                  This slice is not stored in AsyncStorage or redux-persist.
-                  State exists purely in active JavaScript memory.
+                  {k("redux.notPersistedDesc","This slice is not stored in AsyncStorage or redux-persist. State exists purely in active JavaScript memory.")}
                 </C>
               </T>}
           </T>:<T style={{flex:1,padding:10}}>
-            <K data={B}search={A}forceOpen={A.length>0?!0:void 0}mode={ve}onModeChange={De}fullHeight={!0}wrap={!0}/>
+            <K data={V}search={A}forceOpen={A.length>0?!0:void 0}mode={ve}onModeChange={De}fullHeight={!0}wrap={!0}/>
           </T>}
-      </T>}if(z!=null){const B=qe(z.originType),R=z.callerFile?z.callerFile.split("/").pop():null,v=[{key:"payload",label:V("redux.payload","Payload"),icon:I=><Ot color={I?e.white:e.grayText}size={12}/>},{key:"diff",label:V("redux.diff","State Diff"),icon:I=><Te color={I?e.white:e.grayText}size={12}/>},{key:"stack",label:V("redux.callStack","Call Stack"),icon:I=><We color={I?e.white:e.grayText}size={12}/>},{key:"raw",label:"Raw Action",icon:I=><Ke color={I?e.white:e.grayText}size={12}/>}];return<T style={{flex:1,backgroundColor:e.grayBackground}}>
+      </T>}if(z!=null){const V=qe(z.originType),R=z.callerFile?z.callerFile.split("/").pop():null,v=[{key:"payload",label:k("redux.payload","Payload"),icon:I=><Nt color={I?e.white:e.grayText}size={12}/>},{key:"diff",label:k("redux.diff","State Diff"),icon:I=><Te color={I?e.white:e.grayText}size={12}/>},{key:"stack",label:k("redux.callStack","Call Stack"),icon:I=><We color={I?e.white:e.grayText}size={12}/>},{key:"raw",label:"Raw Action",icon:I=><Ke color={I?e.white:e.grayText}size={12}/>}];return<T style={{flex:1,backgroundColor:e.grayBackground}}>
         
         <T style={t.infoBar}>
           <T style={t.infoTopRow}>
@@ -245,10 +244,10 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
                 </C>
               </T>
               
-              <T style={{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:B.bg,paddingHorizontal:5,paddingVertical:2,borderRadius:4,borderWidth:1,borderColor:B.border}}>
-                {B.renderIcon(B.text,8.5)}
-                <C style={{fontFamily:k.interBold,fontSize:8.5,color:B.text,letterSpacing:.3}}>
-                  {B.label}
+              <T style={{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:V.bg,paddingHorizontal:5,paddingVertical:2,borderRadius:4,borderWidth:1,borderColor:V.border}}>
+                {V.renderIcon(V.text,8.5)}
+                <C style={{fontFamily:B.interBold,fontSize:8.5,color:V.text,letterSpacing:.3}}>
+                  {V.label}
                 </C>
               </T>
               <C style={t.sliceNameText}numberOfLines={1}>
@@ -294,18 +293,18 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
           {z.callerFile&&<T style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginTop:8,paddingHorizontal:8,paddingVertical:4,backgroundColor:e.grayBackground,borderRadius:6,borderWidth:1,borderColor:e.dividerColor}}>
               <T style={{flexDirection:"row",alignItems:"center",gap:5,flex:1,minWidth:0}}>
                 <We color={e.sky600}size={10}/>
-                <C style={{fontFamily:k.interMedium,fontSize:9.5,color:e.grayTextWeak}}>
+                <C style={{fontFamily:B.interMedium,fontSize:9.5,color:e.grayTextWeak}}>
                   Triggered from:
                 </C>
-                <C style={{fontFamily:k.interBold,fontSize:9.5,color:e.sky600}}numberOfLines={1}>
+                <C style={{fontFamily:B.interBold,fontSize:9.5,color:e.sky600}}numberOfLines={1}>
                   {R}:{z.callerLine||1}
                 </C>
               </T>
 
               <U onPress={()=>_(z.callerFile,z.callerLine,z.callerCol)}hitSlop={8}style={{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:e.sky100,paddingHorizontal:5,paddingVertical:2,borderRadius:4}}>
                 <Se color={e.sky600}size={9}/>
-                <C style={{fontFamily:k.interBold,fontSize:8.5,color:e.sky600}}>
-                  Open in Editor
+                <C style={{fontFamily:B.interBold,fontSize:8.5,color:e.sky600}}>
+                  {k("redux.openInEditor","Open in Editor")}
                 </C>
               </U>
             </T>}
@@ -318,7 +317,7 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
         {Q==="payload"?<T style={{flex:1,padding:10}}>
             {z.payload!==void 0?<K data={z.payload}search={A}forceOpen={!0}fullHeight={!0}wrap={!0}/>:<T style={t.emptyBox}>
                 <C style={t.emptyBoxText}>
-                  This action has no payload dispatched.
+                  {k("redux.actionNoPayload","This action has no payload dispatched.")}
                 </C>
               </T>}
           </T>:Q==="diff"?<Z style={{flex:1}}contentContainerStyle={{padding:12,paddingBottom:40}}keyboardShouldPersistTaps="handled">
@@ -326,15 +325,15 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
           </Z>:Q==="stack"?<Z style={{flex:1}}contentContainerStyle={{padding:12,paddingBottom:40}}keyboardShouldPersistTaps="handled">
             {z.stack?<T style={{backgroundColor:e.white,borderRadius:10,padding:10,borderWidth:1,borderColor:e.dividerColor}}>
                 <C style={t.expandedSectionTitle}>
-                  Dispatched from call stack:
+                  {k("redux.dispatchedFromCallStack","Dispatched from call stack:")}
                 </C>
                 {z.stack.split(`
 `).map(I=>I.trim()).filter(I=>I.length>0&&!I.includes("reduxLogger")&&!I.includes("inspectorReduxMiddleware")).map((I,S)=>{const P=je(I,S===0),H=P.frameType==="app";return<U key={S}onPress={()=>{P.fileName!=="Unknown"&&_(P.fullPath||P.fileName,P.lineNumber,P.columnNumber)}}style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:5,borderBottomWidth:.5,borderBottomColor:e.dividerColor}}>
                         <T style={{flex:1,minWidth:0}}>
-                          <C style={{fontFamily:H?k.interBold:k.interRegular,fontSize:10.5,color:H?e.primaryBlack:e.grayTextWeak}}numberOfLines={1}>
+                          <C style={{fontFamily:H?B.interBold:B.interRegular,fontSize:10.5,color:H?e.primaryBlack:e.grayTextWeak}}numberOfLines={1}>
                             {P.functionName||"anonymous"}
                           </C>
-                          <C style={{fontFamily:k.interRegular,fontSize:9,color:H?e.sky600:e.grayTextWeak}}numberOfLines={1}>
+                          <C style={{fontFamily:B.interRegular,fontSize:9,color:H?e.sky600:e.grayTextWeak}}numberOfLines={1}>
                             {P.fileName}:{P.lineNumber||1}:
                             {P.columnNumber||1}
                           </C>
@@ -343,7 +342,7 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
                       </U>})}
               </T>:<T style={t.emptyBox}>
                 <C style={t.emptyBoxText}>
-                  No call stack trace captured for this action.
+                  {k("redux.noCallStackCaptured","No call stack trace captured for this action.")}
                 </C>
               </T>}
           </Z>:<T style={{flex:1,padding:10}}>
@@ -352,10 +351,9 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
       </T>}return<T style={t.emptyBox}>
       <Je color={e.purple}size={32}/>
       <C style={t.emptyBoxTitle}>
-        No Redux Slice Selected
+        {k("redux.noSliceSelected","No Redux Slice Selected")}
       </C>
       <C style={t.emptyBoxText}>
-        Select a slice from the Redux tab to inspect its state and dispatched
-        actions.
+        {k("redux.selectSlicePrompt","Select a slice from the Redux tab to inspect its state and dispatched actions.")}
       </C>
-    </T>}),t=rt.create({infoBar:{backgroundColor:e.white,padding:12,borderBottomWidth:1,borderBottomColor:e.dividerColor},infoTopRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:8},methodBadge:{paddingHorizontal:7,paddingVertical:2.5,borderRadius:5},methodBadgeText:{fontFamily:k.interBold,fontSize:9.5,color:e.white,letterSpacing:.4},sliceNameText:{fontFamily:k.interBold,fontSize:14,color:e.primaryBlack,flexShrink:1},persistedChip:{flexDirection:"row",alignItems:"center",gap:3.5,backgroundColor:e.mintGreenBg,paddingHorizontal:6,paddingVertical:2,borderRadius:4,borderWidth:1,borderColor:e.mintGreenBorder},persistedChipText:{fontFamily:k.interBold,fontSize:9,color:e.mintGreenText},inMemoryChip:{backgroundColor:e.indigo50,paddingHorizontal:6,paddingVertical:2,borderRadius:4,borderWidth:1,borderColor:e.blueBorder},inMemoryChipText:{fontFamily:k.interBold,fontSize:9,color:e.indigo600Alt},subStatsRow:{flexDirection:"row",alignItems:"center",gap:6,flexWrap:"wrap"},statPill:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:e.grayBackground,paddingHorizontal:6,paddingVertical:2.5,borderRadius:5,borderWidth:1,borderColor:e.dividerColor},statPillText:{fontFamily:k.interMedium,fontSize:10,color:e.grayText},statLabel:{fontFamily:k.interBold,fontSize:10,color:e.grayTextWeak},statValue:{fontFamily:k.interBold,fontSize:10.5,color:e.primaryBlack},searchContainer:{flexDirection:"row",alignItems:"center",backgroundColor:e.white,borderRadius:8,marginHorizontal:12,marginTop:10,paddingHorizontal:10,borderWidth:1,borderColor:e.dividerColor,height:36,gap:8},searchInput:{flex:1,fontFamily:k.interRegular,fontSize:12,color:e.primaryBlack,padding:0},timelineCard:{backgroundColor:e.white,borderRadius:10,padding:12,marginBottom:8,borderWidth:1,borderColor:e.dividerColor,shadowColor:e.primaryBlack,shadowOffset:{width:0,height:1},shadowOpacity:.03,shadowRadius:3,elevation:1},timelineHeader:{flexDirection:"row",alignItems:"center",gap:8},actionBadge:{backgroundColor:e.indigo50,paddingHorizontal:6,paddingVertical:2,borderRadius:4,borderWidth:1,borderColor:e.blueBorder},actionBadgeText:{fontFamily:k.interBold,fontSize:9.5,color:e.indigo600Alt},actionTitle:{flex:1,fontFamily:k.interBold,fontSize:12.5,color:e.primaryBlack},timePill:{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:`${e.purple}14`,paddingHorizontal:6,paddingVertical:2,borderRadius:4},timeText:{fontFamily:k.interMedium,fontSize:10,color:e.purple},collapsedPrompt:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginTop:8,paddingTop:6,borderTopWidth:1,borderTopColor:e.dividerColor},collapsedPromptText:{fontFamily:k.interRegular,fontSize:10.5,color:e.grayTextWeak},expandedContent:{marginTop:10,paddingTop:10,borderTopWidth:1,borderTopColor:e.dividerColor},expandedSectionTitle:{fontFamily:k.interBold,fontSize:11,color:e.grayTextStrong,marginBottom:6},metadataCard:{backgroundColor:e.white,borderRadius:12,padding:12,borderWidth:1,borderColor:e.dividerColor,shadowColor:e.primaryBlack,shadowOffset:{width:0,height:1},shadowOpacity:.03,shadowRadius:3,elevation:1},metaRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",paddingVertical:10,borderBottomWidth:1,borderBottomColor:e.dividerColor},metaLabel:{fontFamily:k.interMedium,fontSize:12,color:e.grayTextWeak},metaValue:{fontFamily:k.interBold,fontSize:12,color:e.primaryBlack,maxWidth:"60%",textAlign:"right"},persistedInfoCard:{backgroundColor:e.mintGreenBg,borderRadius:8,borderWidth:1,borderColor:e.mintGreenBorder,padding:10},persistedInfoTitle:{fontFamily:k.interBold,fontSize:11,color:e.mintGreenText},clearPersistMiniBtn:{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:e.errorCardBg,paddingHorizontal:6,paddingVertical:2.5,borderRadius:4},clearPersistMiniText:{fontFamily:k.interBold,fontSize:9.5,color:e.errorColor},clearPersistBtn:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:6,backgroundColor:e.errorCardBg,borderWidth:1,borderColor:e.errorBorder,borderRadius:8,paddingVertical:10,marginTop:14},clearPersistText:{fontFamily:k.interBold,fontSize:12,color:e.errorColor},emptyBox:{backgroundColor:e.white,borderRadius:12,padding:24,alignItems:"center",justifyContent:"center",borderWidth:1,borderColor:e.dividerColor,margin:12,gap:8},emptyBoxTitle:{fontFamily:k.interBold,fontSize:14,color:e.primaryBlack},emptyBoxText:{fontFamily:k.interMedium,fontSize:12,color:e.grayTextWeak,textAlign:"center",lineHeight:18},highlight:{backgroundColor:e.yellowHighlight,color:e.amber800Warm,fontFamily:k.interBold}});export default Nt;
+    </T>}),t=rt.create({infoBar:{backgroundColor:e.white,padding:12,borderBottomWidth:1,borderBottomColor:e.dividerColor},infoTopRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:8},methodBadge:{paddingHorizontal:7,paddingVertical:2.5,borderRadius:5},methodBadgeText:{fontFamily:B.interBold,fontSize:9.5,color:e.white,letterSpacing:.4},sliceNameText:{fontFamily:B.interBold,fontSize:14,color:e.primaryBlack,flexShrink:1},persistedChip:{flexDirection:"row",alignItems:"center",gap:3.5,backgroundColor:e.mintGreenBg,paddingHorizontal:6,paddingVertical:2,borderRadius:4,borderWidth:1,borderColor:e.mintGreenBorder},persistedChipText:{fontFamily:B.interBold,fontSize:9,color:e.mintGreenText},inMemoryChip:{backgroundColor:e.indigo50,paddingHorizontal:6,paddingVertical:2,borderRadius:4,borderWidth:1,borderColor:e.blueBorder},inMemoryChipText:{fontFamily:B.interBold,fontSize:9,color:e.indigo600Alt},subStatsRow:{flexDirection:"row",alignItems:"center",gap:6,flexWrap:"wrap"},statPill:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:e.grayBackground,paddingHorizontal:6,paddingVertical:2.5,borderRadius:5,borderWidth:1,borderColor:e.dividerColor},statPillText:{fontFamily:B.interMedium,fontSize:10,color:e.grayText},statLabel:{fontFamily:B.interBold,fontSize:10,color:e.grayTextWeak},statValue:{fontFamily:B.interBold,fontSize:10.5,color:e.primaryBlack},searchContainer:{flexDirection:"row",alignItems:"center",backgroundColor:e.white,borderRadius:8,marginHorizontal:12,marginTop:10,paddingHorizontal:10,borderWidth:1,borderColor:e.dividerColor,height:36,gap:8},searchInput:{flex:1,fontFamily:B.interRegular,fontSize:12,color:e.primaryBlack,padding:0},timelineCard:{backgroundColor:e.white,borderRadius:10,padding:12,marginBottom:8,borderWidth:1,borderColor:e.dividerColor,shadowColor:e.primaryBlack,shadowOffset:{width:0,height:1},shadowOpacity:.03,shadowRadius:3,elevation:1},timelineHeader:{flexDirection:"row",alignItems:"center",gap:8},actionBadge:{backgroundColor:e.indigo50,paddingHorizontal:6,paddingVertical:2,borderRadius:4,borderWidth:1,borderColor:e.blueBorder},actionBadgeText:{fontFamily:B.interBold,fontSize:9.5,color:e.indigo600Alt},actionTitle:{flex:1,fontFamily:B.interBold,fontSize:12.5,color:e.primaryBlack},timePill:{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:`${e.purple}14`,paddingHorizontal:6,paddingVertical:2,borderRadius:4},timeText:{fontFamily:B.interMedium,fontSize:10,color:e.purple},collapsedPrompt:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginTop:8,paddingTop:6,borderTopWidth:1,borderTopColor:e.dividerColor},collapsedPromptText:{fontFamily:B.interRegular,fontSize:10.5,color:e.grayTextWeak},expandedContent:{marginTop:10,paddingTop:10,borderTopWidth:1,borderTopColor:e.dividerColor},expandedSectionTitle:{fontFamily:B.interBold,fontSize:11,color:e.grayTextStrong,marginBottom:6},metadataCard:{backgroundColor:e.white,borderRadius:12,padding:12,borderWidth:1,borderColor:e.dividerColor,shadowColor:e.primaryBlack,shadowOffset:{width:0,height:1},shadowOpacity:.03,shadowRadius:3,elevation:1},metaRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",paddingVertical:10,borderBottomWidth:1,borderBottomColor:e.dividerColor},metaLabel:{fontFamily:B.interMedium,fontSize:12,color:e.grayTextWeak},metaValue:{fontFamily:B.interBold,fontSize:12,color:e.primaryBlack,maxWidth:"60%",textAlign:"right"},persistedInfoCard:{backgroundColor:e.mintGreenBg,borderRadius:8,borderWidth:1,borderColor:e.mintGreenBorder,padding:10},persistedInfoTitle:{fontFamily:B.interBold,fontSize:11,color:e.mintGreenText},clearPersistMiniBtn:{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:e.errorCardBg,paddingHorizontal:6,paddingVertical:2.5,borderRadius:4},clearPersistMiniText:{fontFamily:B.interBold,fontSize:9.5,color:e.errorColor},clearPersistBtn:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:6,backgroundColor:e.errorCardBg,borderWidth:1,borderColor:e.errorBorder,borderRadius:8,paddingVertical:10,marginTop:14},clearPersistText:{fontFamily:B.interBold,fontSize:12,color:e.errorColor},emptyBox:{backgroundColor:e.white,borderRadius:12,padding:24,alignItems:"center",justifyContent:"center",borderWidth:1,borderColor:e.dividerColor,margin:12,gap:8},emptyBoxTitle:{fontFamily:B.interBold,fontSize:14,color:e.primaryBlack},emptyBoxText:{fontFamily:B.interMedium,fontSize:12,color:e.grayTextWeak,textAlign:"center",lineHeight:18},highlight:{backgroundColor:e.yellowHighlight,color:e.amber800Warm,fontFamily:B.interBold}});export default Ot;

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

@@ -1,11 +1,11 @@
-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}>
+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 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 Bt,CircleAlertIcon as Ht,TextAaIcon as Lt}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}=Me(),{reduxState:I,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(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 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[A],Be=V?.updatedAt||0,He=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:D,status:E,statusMessage:v,timelineCount:He,lastAction:X,updatedAt:Be}}),[I,z,Q]),F=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(D=>j.includes(D))})}return[...t].sort((A,T)=>P==="latest"&&T.updatedAt!==A.updatedAt?T.updatedAt-A.updatedAt:A.name.localeCompare(T.name))},[$,k,P,I]),_=N(()=>F.slice(0,q),[F,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=Le(({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,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={A}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}>#{I+1}</S>
+                    <S style={o.serialNumber}>#{A+1}</S>
                     <C style={[o.methodBadge,{backgroundColor:e.violet600}]}>
                       <S style={o.methodBadgeText}>
                         {B("redux.title","REDUX").toUpperCase()}
@@ -17,7 +17,7 @@ import ee,{useCallback as Le,useMemo as N,useRef as Pe,useState as te}from"react
                       </S>
                     </C>
 
-                    {t.lastAction?.originType&&(()=>{const v=Ae(t.lastAction.originType);return<C style={[o.chip,{backgroundColor:v.bg,borderColor:v.border}]}>
+                    {t.lastAction?.originType&&(()=>{const v=Ie(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}
@@ -48,9 +48,9 @@ import ee,{useCallback as Le,useMemo as N,useRef as Pe,useState as te}from"react
                       </C>}
                   </C>
                   <C style={o.actionPreviewRow}>
-                    <Ie color={e.grayTextWeak}size={10}/>
+                    <Ae 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)
+                        {B("redux.initialStateNoActions","Initial state (no actions dispatched yet)")}
                       </S>}
                   </C>
                 </C>
@@ -93,7 +93,7 @@ import ee,{useCallback as Le,useMemo as N,useRef as Pe,useState as te}from"react
               </C>
             </Ne>
           </C>
-        </$e>},[k,Z]);return A?<C style={{flex:1,backgroundColor:e.grayBackground}}>
+        </$e>},[k,Z]);return I?<C style={{flex:1,backgroundColor:e.grayBackground}}>
       
       <C style={o.overviewCard}>
         <C style={o.statCol}>
@@ -109,7 +109,7 @@ import ee,{useCallback as Le,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=Ae(M.originType);return<C style={{flexDirection:"row",alignItems:"center",gap:2,backgroundColor:t.bg,paddingHorizontal:4,paddingVertical:1,borderRadius:3}}>
+            {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}}>
                   {t.renderIcon(t.text,8)}
                   <S style={{fontFamily:R.interBold,fontSize:7.5,color:t.text}}>
                     {t.label}
@@ -163,10 +163,10 @@ import ee,{useCallback as Le,useMemo as N,useRef as Pe,useState as te}from"react
       </C>
 
       
-      <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"/>
+      <De ref={K}data={_}keyExtractor={t=>t.id}renderItem={ve}getItemLayout={(t,A)=>({length:126,offset:126*A,index:A})}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}>
-          <Ie color={e.purple}size={32}/>
+          <Ae color={e.purple}size={32}/>
         </C>
         <S style={O.emptyTitle}>{B("redux.noStoreConnected","No Redux Store Connected")}</S>
         <S style={O.emptySub}>

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

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

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

@@ -1,43 +1,44 @@
-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}>
+import _,{useEffect as T,useMemo as ee,useRef as B,useState as k}from"react";import{Animated as v,StyleSheet as P,Text as C,TouchableOpacity as Me,View as M}from"react-native";import Se from"react-native-linear-gradient";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as Fe}from"../../styles/AppFonts";import{ActivityIcon as Be,BatteryChargingIcon as Ae,BatteryFullIcon as Ie,BoltIcon as Re,SpeedIcon as De}from"../NetworkIcons";import{getNativeDeviceMetrics as Te,getNativeFpsMetrics as ke,startNativeFpsMonitoring as Ce,stopNativeFpsMonitoring as Ne}from"../../native/NativeInspector";import{subscribeNetworkLogs as Ve}from"../../customHooks/networkLogger";import{useInspector as $e}from"./InspectorContext";import{useTranslation as He}from"../../i18n";export const SecondaryTelemetryStrip=_.memo(()=>{const{t:U}=He(),{switchActiveTab:Q}=$e(),[A,O]=k(60),[N,X]=k(60),[s,Y]=k(null),[w,I]=k(0),R=B(new v.Value(.4)).current;T(()=>{const r=v.loop(v.sequence([v.timing(R,{toValue:1,duration:900,useNativeDriver:!0}),v.timing(R,{toValue:.4,duration:900,useNativeDriver:!0})]));return r.start(),()=>r.stop()},[R]);const V=B(0),W=B(Date.now());T(()=>{Ce().catch(()=>{});const r=setInterval(async()=>{try{const o=await ke();if(o&&typeof o.fps=="number"&&o.fps>0){O(Math.round(o.fps)),o.targetFps&&X(Math.round(o.targetFps));return}}catch{}const c=Date.now(),x=c-W.current;if(x>=1e3){const o=Math.min(60,Math.round(V.current*1e3/x));O(o),V.current=0,W.current=c}},1e3);let i;const a=()=>{V.current++,i=requestAnimationFrame(a)};return i=requestAnimationFrame(a),()=>{clearInterval(r),cancelAnimationFrame(i),Ne().catch(()=>{})}},[]);const S=B(0),$=B(Date.now());T(()=>{const r=Ve(a=>{if(!a||a.length===0){I(0);return}const c=Date.now(),x=a.slice(0,10);let o=0,G=0,D=0;for(const n of x){let J=0,K=0;n.request&&(J=typeof n.request=="string"?n.request.length:JSON.stringify(n.request).length),n.response&&(K=typeof n.response=="string"?n.response.length:JSON.stringify(n.response).length);const L=J+K;if(L>0&&n.duration&&n.duration>0){const j=L*8/(n.duration/1e3)/1e3;j>0&&D===0&&(D=j),o+=L,G+=n.duration}}let F=0;G>0&&o>0?F=o*8/(G/1e3)/1e3:D>0&&(F=D),F>0?(S.current=F,$.current=c,I(Math.round(F*10)/10)):S.current>0&&c-$.current<12e3&&I(Math.round(S.current*10)/10)}),i=setInterval(()=>{Date.now()-$.current>15e3&&S.current>0&&(S.current=0,I(0))},3e3);return()=>{r(),clearInterval(i)}},[]),T(()=>{let r=!0;const i=async()=>{try{const c=await Te();r&&c&&Y(c)}catch{}};i();const a=setInterval(i,4e3);return()=>{r=!1,clearInterval(a)}},[]);const H=A>=N-5?e.emerald400:A>=N/2?e.amber400:e.rose400,q=ee(()=>{if(s?.usedRAM&&s?.totalRAM){const r=(s.usedRAM/1073741824).toFixed(2),i=(s.totalRAM/(1024*1024*1024)).toFixed(1);return`${r} / ${i} GB`}return s?.residentMemory?`${Math.round(s.residentMemory/1048576)} MB RAM`:s?.usedRAM?`${Math.round(s.usedRAM/1048576)} MB RAM`:null},[s]),z=s?.batteryPercent,E=s?.isCharging,Z=`Telemetry: ${A} FPS of ${N}, Network speed ${w} kbps, ${q||""}`;return<Se colors={[e.telemetrySubHeaderGradStart,e.telemetrySubHeaderGradMid,e.telemetrySubHeaderGradEnd]}start={{x:0,y:0}}end={{x:1,y:0}}style={t.container}>
+      <Me activeOpacity={.75}onPress={()=>Q?.("device")}accessible={!0}accessibilityRole="summary"accessibilityLabel={Z}accessibilityHint="Double tap to open Device Diagnostics tab"style={t.inner}>
         
         <M style={t.item}>
-          <_ size={11.5}color={N}/>
-          <F style={[t.label,{color:N,fontFamily:J.interBold}]}>
-            {I} {K("telemetry.fps","FPS")}
-          </F>
+          <v.View style={[t.pulseDot,{backgroundColor:H,opacity:R}]}/>
+          <Be size={11}color={H}/>
+          <C style={[t.monoLabel,{color:H}]}>
+            {A} {U("telemetry.fps","FPS")}
+          </C>
         </M>
 
         <M style={t.divider}/>
 
         
         <M style={t.item}>
-          <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>
+          <De size={11}color={e.sky400}/>
+          <C style={[t.monoLabel,{color:e.sky400}]}>
+            {w>=1e3?`${(w/1e3).toFixed(2)} Mbps`:w>0?`${w.toFixed(1)} kbps`:"0.0 kbps"}
+          </C>
         </M>
 
         
-        {O&&<>
+        {q&&<>
             <M style={t.divider}/>
             <M style={t.item}>
-              <Be size={11}color={e.purple400}/>
-              <F style={[t.label,{color:e.purple400}]}>
-                {O}
-              </F>
+              <Re size={11}color={e.purple400}/>
+              <C style={[t.monoLabel,{color:e.purple400}]}>
+                {q}
+              </C>
             </M>
           </>}
 
         
-        {T!==void 0&&T>=0&&<>
+        {z!==void 0&&z>=0&&<>
             <M style={t.divider}/>
             <M style={t.item}>
-              {Q?<Me size={11.5}color={e.emerald400}/>:<Se size={11.5}color={e.slate400}/>}
-              <F style={t.label}>
-                {Math.round(T)}%
-              </F>
+              {E?<Ae size={11}color={e.emerald400}/>:<Ie size={11}color={e.slate400}/>}
+              <C style={[t.monoLabel,{color:E?e.emerald400:e.slate400}]}>
+                {Math.round(z)}%
+              </C>
             </M>
           </>}
-      </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}});
+      </Me>
+    </Se>});const t=P.create({container:{width:"100%",borderBottomWidth:P.hairlineWidth,borderBottomColor:e.telemetrySubHeaderBorder,borderTopWidth:P.hairlineWidth,borderTopColor:e.telemetrySubHeaderBorder,zIndex:9},inner:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:4.5,minHeight:25},item:{flexDirection:"row",alignItems:"center",gap:4},pulseDot:{width:5,height:5,borderRadius:2.5,marginRight:1},divider:{width:1,height:10,backgroundColor:e.borderSubtle},monoLabel:{fontFamily:Fe.monoFont,fontSize:9.5,lineHeight:12,letterSpacing:.2,fontVariant:["tabular-nums"]}});export default SecondaryTelemetryStrip;