react-native-inapp-inspector 2.3.24 → 2.3.25

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

@@ -1,4 +1,4 @@
-import ae,{useState as k,useEffect as Re,useMemo as K,useCallback as X,useRef as We}from"react";import{View as T,Text as S,ScrollView as Ke,FlatList as De,TextInput as Z,Modal as Le,Alert as ne,StyleSheet as Ee,ActivityIndicator as Oe,Platform as le}from"react-native";import B from"../TouchableScale";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as x}from"../../styles/AppFonts";import{useTranslation as Ne}from"../../i18n";import{DatabaseIcon as Te,SearchIcon as He,ClearIcon as Se,PlusIcon as Je,PencilIcon as Ge,TrashIcon as Ce,CopyIcon as Ue,CheckIcon as Ye,LayersIcon as _e,ResetIcon as Qe,ChevronIcon as Xe,WarningTriangleIcon as Ze}from"../NetworkIcons";import{fetchStorageEntries as et,setStorageEntry as tt,removeStorageEntry as rt,clearStorageDriver as ot,isAsyncStorageConnected as at,isMMKVConnected as nt,getRegisteredMMKVInstanceIds as lt,subscribeToStorageChanges as it}from"../../customHooks/storageInspector";import{copyToClipboard as st}from"../../helpers";import{showToast as A}from"../../helpers/toast";const dt=J=>{switch(J){case"json":return{label:"JSON",color:e.purple,bg:`${e.purple}16`};case"number":return{label:"NUM",color:e.warningIconGold,bg:`${e.warningIconGold}16`};case"boolean":return{label:"BOOL",color:e.emerald500,bg:`${e.emerald500}16`};case"null":return{label:"NULL",color:e.grayTextWeak,bg:`${e.grayTextWeak}16`};default:return{label:"STR",color:e.blue500,bg:`${e.blue500}16`}}},Tt=ae.memo(function({entry:C,isExpanded:o,onToggleExpand:E,onCopy:z,onEdit:G,onDelete:v,badge:P}){const U=K(()=>C.byteSize<1024?`${C.byteSize} B`:`${(C.byteSize/1024).toFixed(1)} KB`,[C.byteSize]),O=K(()=>{if(!o)return C.value.length>250?C.value.slice(0,250)+"...":C.value;if(C.type==="json")try{const V=C.parsedValue??JSON.parse(C.value);return JSON.stringify(V,null,2)}catch{return C.value}return C.value},[o,C.value,C.type,C.parsedValue]);return<T style={t.entryCard}>
+import Be,{useState as k,useEffect as je,useMemo as L,useCallback as Z,useRef as Je}from"react";import{View as T,Text as S,ScrollView as Ge,FlatList as Ue,TextInput as Te,Modal as Ye,Alert as ve,StyleSheet as _e,ActivityIndicator as Qe,Platform as ke}from"react-native";import B from"../TouchableScale";import Xe from"../EndOfListFooter";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as a}from"../../styles/AppFonts";import{useTranslation as Ze}from"../../i18n";import{DatabaseIcon as Ve,SearchIcon as Tt,ClearIcon as Ie,PlusIcon as St,PencilIcon as Ct,TrashIcon as Pe,CopyIcon as Bt,CheckIcon as Vt,LayersIcon as It,ResetIcon as Pt,ChevronIcon as At,WarningTriangleIcon as Mt}from"../NetworkIcons";import{fetchStorageEntries as Ft,setStorageEntry as $t,removeStorageEntry as Rt,clearStorageDriver as Kt,isAsyncStorageConnected as Wt,isMMKVConnected as Dt,getRegisteredMMKVInstanceIds as Lt,subscribeToStorageChanges as Ot}from"../../customHooks/storageInspector";import{copyToClipboard as Et}from"../../helpers";import{showToast as A}from"../../helpers/toast";const Nt=x=>{switch(x){case"json":return{label:"JSON",color:e.purple,bg:`${e.purple}16`};case"number":return{label:"NUM",color:e.warningIconGold,bg:`${e.warningIconGold}16`};case"boolean":return{label:"BOOL",color:e.emerald500,bg:`${e.emerald500}16`};case"null":return{label:"NULL",color:e.grayTextWeak,bg:`${e.grayTextWeak}16`};default:return{label:"STR",color:e.blue500,bg:`${e.blue500}16`}}},Ht=Be.memo(function({entry:C,isExpanded:r,onToggleExpand:N,onCopy:I,onEdit:U,onDelete:v,badge:M}){const Y=L(()=>C.byteSize<1024?`${C.byteSize} B`:`${(C.byteSize/1024).toFixed(1)} KB`,[C.byteSize]),H=L(()=>{if(!r)return C.value.length>250?C.value.slice(0,250)+"...":C.value;if(C.type==="json")try{const z=C.parsedValue??JSON.parse(C.value);return JSON.stringify(z,null,2)}catch{return C.value}return C.value},[r,C.value,C.type,C.parsedValue]);return<T style={t.entryCard}>
       
       <T style={t.entryHeader}>
         <T style={{flex:1,marginRight:8}}>
@@ -6,174 +6,178 @@ import ae,{useState as k,useEffect as Re,useMemo as K,useCallback as X,useRef as
             <S style={t.entryKey}numberOfLines={1}selectable>
               {C.key}
             </S>
-            <T style={[t.typeBadge,{backgroundColor:P.bg,borderColor:`${P.color}33`}]}>
-              <S style={[t.typeBadgeText,{color:P.color}]}>
-                {P.label}
+            <T style={[t.typeBadge,{backgroundColor:M.bg,borderColor:`${M.color}33`}]}>
+              <S style={[t.typeBadgeText,{color:M.color}]}>
+                {M.label}
               </S>
             </T>
-            <S style={t.sizeText}>{U}</S>
+            <S style={t.sizeText}>{Y}</S>
           </T>
         </T>
 
         
         <T style={t.entryActions}>
-          <B hitSlop={6}onPress={()=>z(C)}style={t.entryActionBtn}>
-            <Ue size={12}color={e.grayText}/>
+          <B hitSlop={6}onPress={()=>I(C)}style={t.entryActionBtn}>
+            <Bt size={12}color={e.grayText}/>
           </B>
 
-          <B hitSlop={6}onPress={()=>G(C)}style={t.entryActionBtn}>
-            <Ge size={12}color={e.purple}/>
+          <B hitSlop={6}onPress={()=>U(C)}style={t.entryActionBtn}>
+            <Ct size={12}color={e.purple}/>
           </B>
 
           <B hitSlop={6}onPress={()=>v(C.key)}style={[t.entryActionBtn,{backgroundColor:`${e.errorColor}12`}]}>
-            <Ce size={12}color={e.errorColor}/>
+            <Pe size={12}color={e.errorColor}/>
           </B>
         </T>
       </T>
 
       
-      <B onPress={()=>E(C.key)}style={t.valuePreviewBox}>
-        <S style={t.valuePreviewText}numberOfLines={o?void 0:3}selectable={o}>
-          {O}
+      <B onPress={()=>N(C.key)}style={t.valuePreviewBox}>
+        <S style={t.valuePreviewText}numberOfLines={r?void 0:3}selectable={r}>
+          {H}
         </S>
         {C.value.length>80&&<T style={{flexDirection:"row",alignItems:"center",gap:4,marginTop:4}}>
             <S style={t.expandHint}>
-              {o?"Collapse":"Expand"}
+              {r?"Collapse":"Expand"}
             </S>
-            <Xe direction={o?"up":"down"}size={10}color={e.purple}/>
+            <At direction={r?"up":"down"}size={10}color={e.purple}/>
           </T>}
       </B>
-    </T>});export const StorageTab=ae.memo(()=>{const{t:J}=Ne(),C=We(null),[o,E]=k("asyncStorage"),[z,G]=k("default"),[v,P]=k([]),[U,O]=k(!0),[V,Y]=k(""),[ee,Be]=k({}),[ve,F]=k(!1),[N,te]=k("create"),[R,_]=k(""),[D,H]=k(""),[$,j]=k("string"),[q,I]=k(null),re=K(()=>lt(),[]),M=X(async()=>{O(!0);try{const r=await et(o,o==="mmkv"?z:void 0);P(r)}catch{P([])}finally{O(!1)}},[o,z]);Re(()=>(M(),it(M)),[M]);const we=r=>{Be(w=>({...w,[r]:!w[r]}))},ke=()=>{te("create"),_(""),H(""),j("string"),I(null),F(!0)},Ve=r=>{te("edit"),_(r.key),H(r.value),j(r.type==="json"?"json":r.type==="number"?"number":r.type==="boolean"?"boolean":"string"),I(null),F(!0)},ze=r=>{ne.alert("Delete Storage Key",`Are you sure you want to permanently delete "${r}" from ${o==="asyncStorage"?"AsyncStorage":"MMKV"}?`,[{text:"Cancel",style:"cancel"},{text:"Delete",style:"destructive",onPress:async()=>{await rt(o,r,o==="mmkv"?z:void 0)?(A(`Deleted "${r}"`),M()):A(`Failed to delete "${r}"`)}}])},Ie=()=>{ne.alert("Wipe All Storage Keys",`Are you sure you want to clear all ${v.length} keys in ${o==="asyncStorage"?"AsyncStorage":"MMKV"}? This cannot be undone.`,[{text:"Cancel",style:"cancel"},{text:"Wipe All",style:"destructive",onPress:async()=>{await ot(o,o==="mmkv"?z:void 0)&&(A("All storage keys wiped"),M())}}])},Ae=async()=>{if(!R.trim()){A("Key name cannot be empty");return}let r=D;if($==="json")try{const L=JSON.parse(D);r=JSON.stringify(L)}catch(L){I("Invalid JSON: "+L.message);return}else if($==="number"&&isNaN(Number(D))){I("Value must be a valid number");return}await tt(o,R.trim(),r,o==="mmkv"?z:void 0)?(A(N==="create"?`Added "${R.trim()}"`:`Updated "${R.trim()}"`),F(!1),M()):A("Error saving storage key")},Pe=()=>{try{const r=JSON.parse(D);H(JSON.stringify(r,null,2)),I(null),j("json"),A("Formatted JSON")}catch{I("Cannot format: invalid JSON syntax")}},Q=K(()=>{if(!V.trim())return v;const r=V.toLowerCase().trim().split(/\s+/).filter(Boolean);return v.filter(w=>{const L=`${w.key} ${w.value}`.toLowerCase();return r.every(Fe=>L.includes(Fe))})},[v,V]),W=K(()=>v.reduce((r,w)=>r+w.byteSize,0),[v]),$e=K(()=>W<1024?`${W} B`:W<1024*1024?`${(W/1024).toFixed(1)} KB`:`${(W/(1024*1024)).toFixed(2)} MB`,[W]),oe=X(r=>{st(r.value,r.key),A(`Copied value of "${r.key}"`)},[]),Me=X(({item:r})=><Tt entry={r}isExpanded={!!ee[r.key]}onToggleExpand={we}onCopy={oe}onEdit={Ve}onDelete={ze}badge={dt(r.type)}/>,[ee,oe]),xt=o==="asyncStorage"?at():nt();return<T style={t.container}>
+    </T>});export const StorageTab=Be.memo(()=>{const{t:x}=Ze(),C=Je(null),[r,N]=k("asyncStorage"),[I,U]=k("default"),[v,M]=k([]),[Y,H]=k(!0),[z,_]=k(""),[q,Ae]=k(100),[Se,Me]=k({}),[Fe,K]=k(!1),[j,Ce]=k("create"),[W,Q]=k(""),[O,J]=k(""),[F,G]=k("string"),[X,P]=k(null),xe=L(()=>Lt(),[]),$=Z(async()=>{H(!0);try{const o=await Ft(r,r==="mmkv"?I:void 0);M(o)}catch{M([])}finally{H(!1)}},[r,I]);je(()=>($(),Ot($)),[$]);const $e=o=>{Me(V=>({...V,[o]:!V[o]}))},Re=()=>{Ce("create"),Q(""),J(""),G("string"),P(null),K(!0)},Ke=o=>{Ce("edit"),Q(o.key),J(o.value),G(o.type==="json"?"json":o.type==="number"?"number":o.type==="boolean"?"boolean":"string"),P(null),K(!0)},We=o=>{ve.alert(x("storage.deleteKeyTitle","Delete Key"),x("storage.deleteKeyMessage",{key:o,defaultValue:`Are you sure you want to delete key "${o}"?`}),[{text:x("common.cancel","Cancel"),style:"cancel"},{text:x("common.clear","Delete"),style:"destructive",onPress:async()=>{await Rt(r,o,r==="mmkv"?I:void 0)?(A(`Deleted "${o}"`),$()):A(`Failed to delete "${o}"`)}}])},De=()=>{ve.alert(x("storage.clearTitle","Clear Storage Driver"),x("storage.clearMessage",{driver:r==="asyncStorage"?"AsyncStorage":"MMKV",defaultValue:`Are you sure you want to delete all keys in ${r==="asyncStorage"?"AsyncStorage":"MMKV"}?`}),[{text:x("common.cancel","Cancel"),style:"cancel"},{text:x("storage.clearConfirm","Clear All"),style:"destructive",onPress:async()=>{await Kt(r,r==="mmkv"?I:void 0)&&(A("All storage keys wiped"),$())}}])},Le=async()=>{if(!W.trim()){A("Key name cannot be empty");return}let o=O;if(F==="json")try{const E=JSON.parse(O);o=JSON.stringify(E)}catch(E){P("Invalid JSON: "+E.message);return}else if(F==="number"&&isNaN(Number(O))){P("Value must be a valid number");return}await $t(r,W.trim(),o,r==="mmkv"?I:void 0)?(A(j==="create"?`Added "${W.trim()}"`:`Updated "${W.trim()}"`),K(!1),$()):A("Error saving storage key")},Oe=()=>{try{const o=JSON.parse(O);J(JSON.stringify(o,null,2)),P(null),G("json"),A("Formatted JSON")}catch{P("Cannot format: invalid JSON syntax")}},R=L(()=>{if(!z.trim())return v;const o=z.toLowerCase().trim().split(/\s+/).filter(Boolean);return v.filter(V=>{const E=`${V.key} ${V.value}`.toLowerCase();return o.every(He=>E.includes(He))})},[v,z]),D=L(()=>v.reduce((o,V)=>o+V.byteSize,0),[v]),Ee=L(()=>D<1024?`${D} B`:D<1024*1024?`${(D/1024).toFixed(1)} KB`:`${(D/(1024*1024)).toFixed(2)} MB`,[D]),we=Z(o=>{Et(o.value,o.key),A(`Copied value of "${o.key}"`)},[]),Ne=Z(({item:o})=><Ht entry={o}isExpanded={!!Se[o.key]}onToggleExpand={$e}onCopy={we}onEdit={Ke}onDelete={We}badge={Nt(o.type)}/>,[Se,we]),jt=r==="asyncStorage"?Wt():Dt();return<T style={t.container}>
       
       <T style={t.driverTabsWrapper}>
-        <Ke horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={t.driverTabsContainer}>
-          <B onPress={()=>E("asyncStorage")}style={[t.driverTabPill,o==="asyncStorage"&&t.driverTabPillActive]}>
-            <Te size={13}color={o==="asyncStorage"?e.white:e.grayText}/>
-            <S style={[t.driverTabText,o==="asyncStorage"&&t.driverTabTextActive]}>
-              AsyncStorage
+        <Ge horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={t.driverTabsContainer}>
+          <B onPress={()=>N("asyncStorage")}style={[t.driverTabPill,{backgroundColor:r==="asyncStorage"?e.brandPurple:`${e.brandPurple}0D`,borderColor:r==="asyncStorage"?e.brandPurple:`${e.brandPurple}2B`},r==="asyncStorage"&&{shadowColor:e.brandPurple,shadowOffset:{width:0,height:1.5},shadowOpacity:.25,shadowRadius:3,elevation:3}]}>
+            <Ve size={13}color={r==="asyncStorage"?e.white:e.brandPurple}/>
+            <S style={[t.driverTabText,{color:r==="asyncStorage"?e.white:e.brandPurple,fontFamily:r==="asyncStorage"?a.interBold:a.interSemiBold}]}>
+              {x("storage.subTabs.asyncStorage","AsyncStorage")}
             </S>
-            {o==="asyncStorage"&&v.length>0&&<T style={t.driverCountBadge}>
-                <S style={t.driverCountText}>{v.length}</S>
+            {v.length>0&&r==="asyncStorage"&&<T style={[t.driverCountBadge,{backgroundColor:"rgba(255,255,255,0.25)",borderColor:"rgba(255,255,255,0.45)"}]}>
+                <S style={[t.driverCountText,{color:e.white}]}>
+                  {v.length}
+                </S>
               </T>}
           </B>
 
-          <B onPress={()=>E("mmkv")}style={[t.driverTabPill,o==="mmkv"&&t.driverTabPillActive]}>
-            <_e size={13}color={o==="mmkv"?e.white:e.grayText}/>
-            <S style={[t.driverTabText,o==="mmkv"&&t.driverTabTextActive]}>
-              MMKV
+          <B onPress={()=>N("mmkv")}style={[t.driverTabPill,{backgroundColor:r==="mmkv"?e.teal600:`${e.teal600}0D`,borderColor:r==="mmkv"?e.teal600:`${e.teal600}2B`},r==="mmkv"&&{shadowColor:e.teal600,shadowOffset:{width:0,height:1.5},shadowOpacity:.25,shadowRadius:3,elevation:3}]}>
+            <It size={13}color={r==="mmkv"?e.white:e.teal600}/>
+            <S style={[t.driverTabText,{color:r==="mmkv"?e.white:e.teal600,fontFamily:r==="mmkv"?a.interBold:a.interSemiBold}]}>
+              {x("storage.subTabs.mmkv","MMKV")}
             </S>
-            {o==="mmkv"&&v.length>0&&<T style={t.driverCountBadge}>
-                <S style={t.driverCountText}>{v.length}</S>
+            {v.length>0&&r==="mmkv"&&<T style={[t.driverCountBadge,{backgroundColor:"rgba(255,255,255,0.25)",borderColor:"rgba(255,255,255,0.45)"}]}>
+                <S style={[t.driverCountText,{color:e.white}]}>
+                  {v.length}
+                </S>
               </T>}
           </B>
 
           
-          {o==="mmkv"&&re.length>1&&<T style={{flexDirection:"row",alignItems:"center",gap:4,marginLeft:6}}>
-              {re.map(r=><B key={r}onPress={()=>G(r)}style={[t.instancePill,z===r&&t.instancePillActive]}>
-                  <S style={[t.instancePillText,z===r&&t.instancePillTextActive]}>
-                    {r}
+          {r==="mmkv"&&xe.length>1&&<T style={{flexDirection:"row",alignItems:"center",gap:4,marginLeft:6}}>
+              {xe.map(o=><B key={o}onPress={()=>U(o)}style={[t.instancePill,I===o&&t.instancePillActive]}>
+                  <S style={[t.instancePillText,I===o&&t.instancePillTextActive]}>
+                    {o}
                   </S>
                 </B>)}
             </T>}
-        </Ke>
+        </Ge>
       </T>
 
       
       <T style={t.actionBar}>
         <T style={t.searchBar}>
-          <He size={14}color={e.grayTextWeak}/>
-          <Z value={V}onChangeText={Y}placeholder={`Search ${v.length} keys & values...`}placeholderTextColor={e.grayTextWeak}style={t.searchInput}clearButtonMode="while-editing"/>
-          {V.length>0&&<T style={{flexDirection:"row",alignItems:"center",gap:4}}>
+          <Tt size={14}color={e.grayTextWeak}/>
+          <Te value={z}onChangeText={_}placeholder={x("storage.searchPlaceholder","Search keys, values, types...")}placeholderTextColor={e.grayTextWeak}style={t.searchInput}clearButtonMode="while-editing"/>
+          {z.length>0&&<T style={{flexDirection:"row",alignItems:"center",gap:4}}>
               <T style={{backgroundColor:`${e.purple}20`,borderRadius:10,paddingHorizontal:6,paddingVertical:1.5}}>
-                <S style={{color:e.purple,fontSize:9.5,fontFamily:x.interBold}}>
-                  {Q.length}
+                <S style={{color:e.purple,fontSize:9.5,fontFamily:a.interBold}}>
+                  {R.length}
                 </S>
               </T>
-              <B onPress={()=>Y("")}hitSlop={8}>
-                <Se size={13}color={e.grayTextWeak}/>
+              <B onPress={()=>_("")}hitSlop={8}>
+                <Ie size={13}color={e.grayTextWeak}/>
               </B>
             </T>}
         </T>
 
         
-        <B onPress={ke}style={t.addKeyBtn}hitSlop={6}>
-          <Je size={13}color={e.white}/>
-          <S style={t.addKeyBtnText}>Add</S>
+        <B onPress={Re}style={t.addKeyBtn}hitSlop={6}>
+          <St size={13}color={e.white}/>
+          <S style={t.addKeyBtnText}>{x("storage.add","Add")}</S>
         </B>
 
-        <B onPress={M}style={t.actionIconBtn}hitSlop={6}>
-          <Qe size={13}color={e.grayText}/>
+        <B onPress={$}style={t.actionIconBtn}hitSlop={6}>
+          <Pt size={13}color={e.grayText}/>
         </B>
 
-        {v.length>0&&<B onPress={Ie}style={[t.actionIconBtn,{borderColor:`${e.errorColor}33`,backgroundColor:`${e.errorColor}12`}]}hitSlop={6}>
-            <Ce size={13}color={e.errorColor}/>
+        {v.length>0&&<B onPress={De}style={[t.actionIconBtn,{borderColor:`${e.errorColor}33`,backgroundColor:`${e.errorColor}12`}]}hitSlop={6}>
+            <Pe size={13}color={e.errorColor}/>
           </B>}
       </T>
 
       
       <T style={t.statsStrip}>
         <S style={t.statsText}>
-          {Q.length} of {v.length} Keys • {$e}
+          {R.length} of {v.length} Keys • {Ee}
         </S>
         <S style={t.statsSubtext}>
-          {o==="asyncStorage"?"SQLite Key-Value":`MMKV (${z})`}
+          {r==="asyncStorage"?"SQLite Key-Value":`MMKV (${I})`}
         </S>
       </T>
 
       
-      {U?<T style={t.loadingContainer}>
-          <Oe size="small"color={e.purple}/>
-          <S style={t.loadingText}>Loading storage entries...</S>
+      {Y?<T style={t.loadingContainer}>
+          <Qe size="small"color={e.purple}/>
+          <S style={t.loadingText}>{x("storage.loading","Loading storage entries...")}</S>
         </T>:<>
-          <De ref={C}data={Q}keyExtractor={r=>r.key}renderItem={Me}initialNumToRender={10}maxToRenderPerBatch={10}windowSize={5}removeClippedSubviews={le.OS==="android"}style={t.scrollArea}contentContainerStyle={t.scrollContent}showsVerticalScrollIndicator={!1}ListEmptyComponent={<T style={t.emptyContainer}>
+          <Ue ref={C}data={R.slice(0,q)}keyExtractor={o=>o.key}renderItem={Ne}initialNumToRender={10}maxToRenderPerBatch={10}windowSize={5}removeClippedSubviews={ke.OS==="android"}style={t.scrollArea}contentContainerStyle={t.scrollContent}showsVerticalScrollIndicator={!1}ListEmptyComponent={<T style={t.emptyContainer}>
                 <T style={t.emptyIconWrap}>
-                  <Te size={28}color={e.grayTextWeak}/>
+                  <Ve size={28}color={e.grayTextWeak}/>
                 </T>
                 <S style={t.emptyTitle}>
-                  {V.trim().length>0?"No matching keys found":`No ${o==="asyncStorage"?"AsyncStorage":"MMKV"} Keys`}
+                  {z.trim().length>0?"No matching keys found":`No ${r==="asyncStorage"?"AsyncStorage":"MMKV"} Keys`}
                 </S>
                 <S style={t.emptySubtitle}>
-                  {V.trim().length>0?`No keys or values match "${V}"`:`Storage is auto-detected. Tap "+ Add" above to create your first ${o==="asyncStorage"?"AsyncStorage":"MMKV"} key!`}
+                  {z.trim().length>0?`No keys or values match "${z}"`:`Storage is auto-detected. Tap "+ Add" above to create your first ${r==="asyncStorage"?"AsyncStorage":"MMKV"} key!`}
                 </S>
-                {V.trim().length>0&&<B onPress={()=>Y("")}style={{marginTop:12,paddingHorizontal:14,paddingVertical:6,borderRadius:8,backgroundColor:e.grayBackground,borderWidth:1,borderColor:e.grayBorderSecondary}}>
-                    <S style={{color:e.brandPurple,fontSize:12,fontFamily:x.interBold}}>
+                {z.trim().length>0&&<B onPress={()=>_("")}style={{marginTop:12,paddingHorizontal:14,paddingVertical:6,borderRadius:8,backgroundColor:e.grayBackground,borderWidth:1,borderColor:e.grayBorderSecondary}}>
+                    <S style={{color:e.brandPurple,fontSize:12,fontFamily:a.interBold}}>
                       Clear Search
                     </S>
                   </B>}
-              </T>}ListFooterComponent={<T style={{height:60}}/>}/>
+              </T>}ListFooterComponent={R.length>0?<Xe count={Math.min(q,R.length)}totalCount={R.length}label="keys"hasMore={R.length>q}onLoadMore={()=>Ae(o=>o+10)}/>:<T style={{height:60}}/>}/>
         </>}
 
       
-      <Le visible={ve}transparent animationType="fade"onRequestClose={()=>F(!1)}>
+      <Ye visible={Fe}transparent animationType="fade"onRequestClose={()=>K(!1)}>
         <T style={t.modalOverlay}>
           <T style={t.modalCard}>
             <T style={t.modalHeader}>
               <S style={t.modalTitle}>
-                {N==="create"?"Add Storage Key":`Edit: ${R}`}
+                {j==="create"?"Add Storage Key":`Edit: ${W}`}
               </S>
-              <B onPress={()=>F(!1)}hitSlop={8}>
-                <Se size={16}color={e.grayText}/>
+              <B onPress={()=>K(!1)}hitSlop={8}>
+                <Ie size={16}color={e.grayText}/>
               </B>
             </T>
 
             
             <T style={t.inputGroup}>
-              <S style={t.inputLabel}>KEY NAME</S>
-              <Z value={R}onChangeText={_}placeholder="e.g. user_session, auth_token"placeholderTextColor={e.grayTextWeak}editable={N==="create"}style={[t.textInput,N==="edit"&&t.textInputDisabled]}autoCapitalize="none"/>
+              <S style={t.inputLabel}>{x("storage.keyName","KEY NAME").toUpperCase()}</S>
+              <Te value={W}onChangeText={Q}placeholder="e.g. user_session, auth_token"placeholderTextColor={e.grayTextWeak}editable={j==="create"}style={[t.textInput,j==="edit"&&t.textInputDisabled]}autoCapitalize="none"/>
             </T>
 
             
             <T style={t.inputGroup}>
               <T style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:4}}>
-                <S style={t.inputLabel}>VALUE TYPE</S>
-                {$==="json"&&<B onPress={Pe}hitSlop={6}>
-                    <S style={t.formatJsonBtn}>Beautify JSON</S>
+                <S style={t.inputLabel}>{x("storage.type","VALUE TYPE").toUpperCase()}</S>
+                {F==="json"&&<B onPress={Oe}hitSlop={6}>
+                    <S style={t.formatJsonBtn}>{x("storage.beautifyJson","Beautify JSON")}</S>
                   </B>}
               </T>
               <T style={t.typeSelectorStrip}>
-                {["string","json","number","boolean"].map(r=>{const w=$===r;return<B key={r}onPress={()=>{j(r),I(null)}}style={[t.typePill,w&&t.typePillActive]}>
-                      <S style={[t.typePillText,w&&t.typePillTextActive]}>
-                        {r.toUpperCase()}
+                {["string","json","number","boolean"].map(o=>{const V=F===o;return<B key={o}onPress={()=>{G(o),P(null)}}style={[t.typePill,V&&t.typePillActive]}>
+                      <S style={[t.typePillText,V&&t.typePillTextActive]}>
+                        {o.toUpperCase()}
                       </S>
                     </B>})}
               </T>
@@ -181,25 +185,25 @@ import ae,{useState as k,useEffect as Re,useMemo as K,useCallback as X,useRef as
 
             
             <T style={t.inputGroup}>
-              <S style={t.inputLabel}>VALUE CONTENT</S>
-              <Z value={D}onChangeText={r=>{H(r),q&&I(null)}}placeholder={$==="json"?'{"userId": 123, "isLoggedIn": true}':$==="number"?"42":$==="boolean"?"true":"String value..."}placeholderTextColor={e.grayTextWeak}style={[t.textInput,t.textAreaInput]}multiline textAlignVertical="top"autoCapitalize="none"/>
-              {q&&<T style={{flexDirection:"row",alignItems:"center",gap:5,marginTop:4}}>
-                  <Ze size={12}color={e.errorColor}/>
-                  <S style={t.errorText}>{q}</S>
+              <S style={t.inputLabel}>{x("storage.valueContent","VALUE CONTENT").toUpperCase()}</S>
+              <Te value={O}onChangeText={o=>{J(o),X&&P(null)}}placeholder={F==="json"?'{"userId": 123, "isLoggedIn": true}':F==="number"?"42":F==="boolean"?"true":"String value..."}placeholderTextColor={e.grayTextWeak}style={[t.textInput,t.textAreaInput]}multiline textAlignVertical="top"autoCapitalize="none"/>
+              {X&&<T style={{flexDirection:"row",alignItems:"center",gap:5,marginTop:4}}>
+                  <Mt size={12}color={e.errorColor}/>
+                  <S style={t.errorText}>{X}</S>
                 </T>}
             </T>
 
             
             <T style={t.modalActions}>
-              <B onPress={()=>F(!1)}style={t.cancelBtn}>
-                <S style={t.cancelBtnText}>Cancel</S>
+              <B onPress={()=>K(!1)}style={t.cancelBtn}>
+                <S style={t.cancelBtnText}>{x("common.cancel","Cancel")}</S>
               </B>
-              <B onPress={Ae}style={t.saveBtn}>
-                <Ye size={14}color={e.white}/>
-                <S style={t.saveBtnText}>Save Key</S>
+              <B onPress={Le}style={t.saveBtn}>
+                <Vt size={14}color={e.white}/>
+                <S style={t.saveBtnText}>{x("storage.saveKey","Save Key")}</S>
               </B>
             </T>
           </T>
         </T>
-      </Le>
-    </T>});const t=Ee.create({container:{flex:1,backgroundColor:e.grayBackground},driverTabsWrapper:{backgroundColor:e.primaryLight,borderBottomWidth:1,borderBottomColor:e.dividerColor,paddingVertical:8},driverTabsContainer:{paddingHorizontal:12,flexDirection:"row",alignItems:"center",gap:6},driverTabPill:{flexDirection:"row",alignItems:"center",gap:6,paddingHorizontal:11,paddingVertical:6,borderRadius:8,backgroundColor:e.grayBackground,borderWidth:1,borderColor:e.grayBorderSecondary},driverTabPillActive:{backgroundColor:e.purple,borderColor:e.purple},driverTabText:{fontFamily:x.interBold,fontSize:11.5,color:e.grayText},driverTabTextActive:{color:e.white},driverCountBadge:{backgroundColor:"rgba(255, 255, 255, 0.25)",paddingHorizontal:5,paddingVertical:1,borderRadius:6},driverCountText:{fontFamily:x.interBold,fontSize:9,color:e.white},instancePill:{paddingHorizontal:7,paddingVertical:3,borderRadius:6,backgroundColor:`${e.purple}14`,borderWidth:1,borderColor:`${e.purple}30`},instancePillActive:{backgroundColor:e.purple,borderColor:e.purple},instancePillText:{fontFamily:x.interBold,fontSize:10,color:e.purple},instancePillTextActive:{color:e.white},actionBar:{flexDirection:"row",alignItems:"center",paddingHorizontal:12,paddingVertical:8,backgroundColor:e.primaryLight,borderBottomWidth:1,borderBottomColor:e.dividerColor,gap:6},searchBar:{flex:1,flexDirection:"row",alignItems:"center",backgroundColor:e.grayBackground,borderRadius:8,paddingHorizontal:9,paddingVertical:le.OS==="ios"?6:2,borderWidth:1,borderColor:e.grayBorderSecondary,gap:6},searchInput:{flex:1,fontFamily:x.interMedium,fontSize:12,color:e.primaryBlack,padding:0},addKeyBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:10,paddingVertical:6,borderRadius:8,backgroundColor:e.purple},addKeyBtnText:{fontFamily:x.interBold,fontSize:11,color:e.white},actionIconBtn:{width:30,height:30,borderRadius:8,alignItems:"center",justifyContent:"center",backgroundColor:e.grayBackground,borderWidth:1,borderColor:e.grayBorderSecondary},statsStrip:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:5,backgroundColor:`${e.grayBorderSecondary}40`},statsText:{fontFamily:x.interMedium,fontSize:10,color:e.grayText},statsSubtext:{fontFamily:x.interBold,fontSize:9.5,color:e.grayTextWeak},scrollArea:{flex:1},scrollContent:{padding:12,gap:10,paddingBottom:100},entryCard:{backgroundColor:e.primaryLight,borderRadius:10,borderWidth:1,borderColor:e.grayBorderSecondary,padding:10,gap:8,shadowColor:e.black,shadowOpacity:.02,shadowRadius:3,shadowOffset:{width:0,height:1},elevation:1},entryHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},entryKey:{fontFamily:x.interBold,fontSize:12.5,color:e.primaryBlack},typeBadge:{paddingHorizontal:5,paddingVertical:1,borderRadius:4,borderWidth:1},typeBadgeText:{fontFamily:x.interBold,fontSize:8.5},sizeText:{fontFamily:x.interRegular,fontSize:10,color:e.grayTextWeak},entryActions:{flexDirection:"row",alignItems:"center",gap:5},entryActionBtn:{padding:5,borderRadius:5,backgroundColor:e.grayBackground},valuePreviewBox:{backgroundColor:e.grayBackground,borderRadius:6,padding:8,borderWidth:1,borderColor:`${e.grayBorderSecondary}80`},valuePreviewText:{fontFamily:x.interRegular,fontSize:11,color:e.primaryBlack,lineHeight:16},expandHint:{fontFamily:x.interBold,fontSize:9.5,color:e.purple,marginTop:4},loadingContainer:{flex:1,alignItems:"center",justifyContent:"center",gap:8},loadingText:{fontFamily:x.interMedium,fontSize:12,color:e.grayText},emptyContainer:{padding:24,alignItems:"center",justifyContent:"center"},emptyIconWrap:{width:56,height:56,borderRadius:28,backgroundColor:`${e.grayBorderSecondary}40`,alignItems:"center",justifyContent:"center",marginBottom:12},emptyTitle:{fontFamily:x.interBold,fontSize:14,color:e.primaryBlack,marginBottom:4},emptySubtitle:{fontFamily:x.interRegular,fontSize:11.5,color:e.grayText,textAlign:"center",maxWidth:280},connectGuideCard:{marginTop:20,width:"100%",backgroundColor:e.primaryLight,borderRadius:10,borderWidth:1,borderColor:e.grayBorderSecondary,padding:12,gap:6},connectGuideTitle:{fontFamily:x.interBold,fontSize:11,color:e.purple},connectGuideCode:{fontFamily:x.interRegular,fontSize:10,color:e.grayText,lineHeight:15},modalOverlay:{flex:1,backgroundColor:"rgba(0, 0, 0, 0.5)",justifyContent:"center",alignItems:"center",padding:16},modalCard:{width:"100%",maxWidth:400,backgroundColor:e.primaryLight,borderRadius:14,padding:16,gap:12,shadowColor:e.black,shadowOpacity:.2,shadowRadius:10,shadowOffset:{width:0,height:4},elevation:5},modalHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",borderBottomWidth:1,borderBottomColor:e.dividerColor,paddingBottom:10},modalTitle:{fontFamily:x.interBold,fontSize:14,color:e.primaryBlack},inputGroup:{gap:4},inputLabel:{fontFamily:x.interBold,fontSize:9.5,color:e.grayTextWeak,letterSpacing:.5},textInput:{backgroundColor:e.grayBackground,borderRadius:8,paddingHorizontal:10,paddingVertical:8,fontFamily:x.interMedium,fontSize:12,color:e.primaryBlack,borderWidth:1,borderColor:e.grayBorderSecondary},textInputDisabled:{backgroundColor:`${e.grayBorderSecondary}40`,color:e.grayText},textAreaInput:{minHeight:90,maxHeight:160,fontFamily:x.interRegular,fontSize:11},typeSelectorStrip:{flexDirection:"row",alignItems:"center",gap:6},typePill:{flex:1,alignItems:"center",paddingVertical:6,borderRadius:6,backgroundColor:e.grayBackground,borderWidth:1,borderColor:e.grayBorderSecondary},typePillActive:{backgroundColor:e.purple,borderColor:e.purple},typePillText:{fontFamily:x.interBold,fontSize:10,color:e.grayText},typePillTextActive:{color:e.white},formatJsonBtn:{fontFamily:x.interBold,fontSize:10,color:e.purple},errorText:{fontFamily:x.interMedium,fontSize:10,color:e.errorColor,marginTop:2},modalActions:{flexDirection:"row",alignItems:"center",gap:10,marginTop:4},cancelBtn:{flex:1,alignItems:"center",paddingVertical:10,borderRadius:8,backgroundColor:e.grayBackground,borderWidth:1,borderColor:e.grayBorderSecondary},cancelBtnText:{fontFamily:x.interBold,fontSize:12,color:e.grayText},saveBtn:{flex:1.5,flexDirection:"row",alignItems:"center",justifyContent:"center",gap:5,paddingVertical:10,borderRadius:8,backgroundColor:e.purple},saveBtnText:{fontFamily:x.interBold,fontSize:12,color:e.white}});export default StorageTab;
+      </Ye>
+    </T>});const t=_e.create({container:{flex:1,backgroundColor:e.grayBackground},driverTabsWrapper:{backgroundColor:e.primaryLight,borderBottomWidth:1,borderBottomColor:e.dividerColor,paddingVertical:8},driverTabsContainer:{paddingHorizontal:12,flexDirection:"row",alignItems:"center",gap:6},driverTabPill:{flexDirection:"row",alignItems:"center",gap:5,paddingHorizontal:9,paddingVertical:4.5,borderRadius:8,backgroundColor:e.grayBackground,borderWidth:1,borderColor:e.grayBorderSecondary},driverTabPillActive:{backgroundColor:e.purple,borderColor:e.purple},driverTabText:{fontFamily:a.interBold,fontSize:10.5,color:e.grayText},driverTabTextActive:{color:e.white},driverCountBadge:{backgroundColor:"rgba(255, 255, 255, 0.25)",paddingHorizontal:5,paddingVertical:1,borderRadius:8},driverCountText:{fontFamily:a.interBold,fontSize:9.5,color:e.white},instancePill:{paddingHorizontal:7,paddingVertical:3,borderRadius:6,backgroundColor:`${e.purple}14`,borderWidth:1,borderColor:`${e.purple}30`},instancePillActive:{backgroundColor:e.purple,borderColor:e.purple},instancePillText:{fontFamily:a.interBold,fontSize:10,color:e.purple},instancePillTextActive:{color:e.white},actionBar:{flexDirection:"row",alignItems:"center",paddingHorizontal:12,paddingVertical:8,backgroundColor:e.primaryLight,borderBottomWidth:1,borderBottomColor:e.dividerColor,gap:6},searchBar:{flex:1,flexDirection:"row",alignItems:"center",backgroundColor:e.grayBackground,borderRadius:8,paddingHorizontal:9,paddingVertical:ke.OS==="ios"?6:2,borderWidth:1,borderColor:e.grayBorderSecondary,gap:6},searchInput:{flex:1,fontFamily:a.interMedium,fontSize:12,color:e.primaryBlack,padding:0},addKeyBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:10,paddingVertical:6,borderRadius:8,backgroundColor:e.purple},addKeyBtnText:{fontFamily:a.interBold,fontSize:11,color:e.white},actionIconBtn:{width:30,height:30,borderRadius:8,alignItems:"center",justifyContent:"center",backgroundColor:e.grayBackground,borderWidth:1,borderColor:e.grayBorderSecondary},statsStrip:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:5,backgroundColor:`${e.grayBorderSecondary}40`},statsText:{fontFamily:a.interMedium,fontSize:10,color:e.grayText},statsSubtext:{fontFamily:a.interBold,fontSize:9.5,color:e.grayTextWeak},scrollArea:{flex:1},scrollContent:{padding:12,gap:10,paddingBottom:100},entryCard:{backgroundColor:e.primaryLight,borderRadius:10,borderWidth:1,borderColor:e.grayBorderSecondary,padding:10,gap:8,shadowColor:e.black,shadowOpacity:.02,shadowRadius:3,shadowOffset:{width:0,height:1},elevation:1},entryHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},entryKey:{fontFamily:a.interBold,fontSize:12.5,color:e.primaryBlack},typeBadge:{paddingHorizontal:5,paddingVertical:1,borderRadius:4,borderWidth:1},typeBadgeText:{fontFamily:a.interBold,fontSize:8.5},sizeText:{fontFamily:a.interRegular,fontSize:10,color:e.grayTextWeak},entryActions:{flexDirection:"row",alignItems:"center",gap:5},entryActionBtn:{padding:5,borderRadius:5,backgroundColor:e.grayBackground},valuePreviewBox:{backgroundColor:e.grayBackground,borderRadius:6,padding:8,borderWidth:1,borderColor:`${e.grayBorderSecondary}80`},valuePreviewText:{fontFamily:a.interRegular,fontSize:11,color:e.primaryBlack,lineHeight:16},expandHint:{fontFamily:a.interBold,fontSize:9.5,color:e.purple,marginTop:4},loadingContainer:{flex:1,alignItems:"center",justifyContent:"center",gap:8},loadingText:{fontFamily:a.interMedium,fontSize:12,color:e.grayText},emptyContainer:{padding:24,alignItems:"center",justifyContent:"center"},emptyIconWrap:{width:56,height:56,borderRadius:28,backgroundColor:`${e.grayBorderSecondary}40`,alignItems:"center",justifyContent:"center",marginBottom:12},emptyTitle:{fontFamily:a.interBold,fontSize:14,color:e.primaryBlack,marginBottom:4},emptySubtitle:{fontFamily:a.interRegular,fontSize:11.5,color:e.grayText,textAlign:"center",maxWidth:280},connectGuideCard:{marginTop:20,width:"100%",backgroundColor:e.primaryLight,borderRadius:10,borderWidth:1,borderColor:e.grayBorderSecondary,padding:12,gap:6},connectGuideTitle:{fontFamily:a.interBold,fontSize:11,color:e.purple},connectGuideCode:{fontFamily:a.interRegular,fontSize:10,color:e.grayText,lineHeight:15},modalOverlay:{flex:1,backgroundColor:"rgba(0, 0, 0, 0.5)",justifyContent:"center",alignItems:"center",padding:16},modalCard:{width:"100%",maxWidth:400,backgroundColor:e.primaryLight,borderRadius:14,padding:16,gap:12,shadowColor:e.black,shadowOpacity:.2,shadowRadius:10,shadowOffset:{width:0,height:4},elevation:5},modalHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",borderBottomWidth:1,borderBottomColor:e.dividerColor,paddingBottom:10},modalTitle:{fontFamily:a.interBold,fontSize:14,color:e.primaryBlack},inputGroup:{gap:4},inputLabel:{fontFamily:a.interBold,fontSize:9.5,color:e.grayTextWeak,letterSpacing:.5},textInput:{backgroundColor:e.grayBackground,borderRadius:8,paddingHorizontal:10,paddingVertical:8,fontFamily:a.interMedium,fontSize:12,color:e.primaryBlack,borderWidth:1,borderColor:e.grayBorderSecondary},textInputDisabled:{backgroundColor:`${e.grayBorderSecondary}40`,color:e.grayText},textAreaInput:{minHeight:90,maxHeight:160,fontFamily:a.interRegular,fontSize:11},typeSelectorStrip:{flexDirection:"row",alignItems:"center",gap:6},typePill:{flex:1,alignItems:"center",paddingVertical:6,borderRadius:6,backgroundColor:e.grayBackground,borderWidth:1,borderColor:e.grayBorderSecondary},typePillActive:{backgroundColor:e.purple,borderColor:e.purple},typePillText:{fontFamily:a.interBold,fontSize:10,color:e.grayText},typePillTextActive:{color:e.white},formatJsonBtn:{fontFamily:a.interBold,fontSize:10,color:e.purple},errorText:{fontFamily:a.interMedium,fontSize:10,color:e.errorColor,marginTop:2},modalActions:{flexDirection:"row",alignItems:"center",gap:10,marginTop:4},cancelBtn:{flex:1,alignItems:"center",paddingVertical:10,borderRadius:8,backgroundColor:e.grayBackground,borderWidth:1,borderColor:e.grayBorderSecondary},cancelBtnText:{fontFamily:a.interBold,fontSize:12,color:e.grayText},saveBtn:{flex:1.5,flexDirection:"row",alignItems:"center",justifyContent:"center",gap:5,paddingVertical:10,borderRadius:8,backgroundColor:e.purple},saveBtnText:{fontFamily:a.interBold,fontSize:12,color:e.white}});export default StorageTab;

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

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