react-native-inapp-inspector 2.3.25 → 2.4.1

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

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

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

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

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

@@ -1,4 +1,4 @@
-import{useState as M,useEffect as F}from"react";import{Modal as G,View as C,Text as S,TouchableOpacity as O,StyleSheet as Y,Animated as T,Linking as J}from"react-native";import B,{Path as L}from"react-native-svg";import{BrandSquareIcon as K}from"../BrandSquareIcon";import{NpmIcon as Q}from"../NetworkIcons";import{LIB_VERSION as X}from"../../constants";import{copyToClipboard as Z}from"../../helpers";import{showToast as $}from"../../helpers/toast";import{AppFonts as P}from"../../styles/AppFonts";import{AppColors as e}from"../../styles/AppColors";const Ce=({size:o=14,color:r=e.grayTextWeak})=><B width={o}height={o}viewBox="0 0 24 24"fill="none">
+import{useState as M,useEffect as F}from"react";import{Modal as G,View as C,Text as S,TouchableOpacity as O,StyleSheet as Y,Animated as T,Linking as J}from"react-native";import B,{Path as L}from"react-native-svg";import{BrandCircleIcon as K}from"../BrandCircleIcon";import{NpmIcon as Q}from"../NetworkIcons";import{LIB_VERSION as X}from"../../constants";import{copyToClipboard as Z}from"../../helpers";import{showToast as $}from"../../helpers/toast";import{AppFonts as P}from"../../styles/AppFonts";import{AppColors as e}from"../../styles/AppColors";const Ce=({size:o=14,color:r=e.grayTextWeak})=><B width={o}height={o}viewBox="0 0 24 24"fill="none">
     <L d="M8 4v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2z"stroke={r}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
     <L d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"stroke={r}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
   </B>,N=({size:o=14,color:r=e.emerald500})=><B width={o}height={o}viewBox="0 0 24 24"fill="none">