react-native-inapp-inspector 2.3.24 → 2.4.0

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

@@ -1,205 +1,209 @@
-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 we,{useState as z,useEffect as je,useMemo as N,useCallback as oe,useRef as Je}from"react";import{View as S,Text as C,ScrollView as Ge,FlatList as Ue,TextInput as Se,Modal as Ye,Alert as ke,StyleSheet as _e,ActivityIndicator as Qe,Platform as ve}from"react-native";import V from"../TouchableScale";import Xe from"../EndOfListFooter";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as T}from"../../styles/AppFonts";import{useTranslation as Ze}from"../../i18n";import{DatabaseIcon as Ve,SearchIcon as St,ClearIcon as Ie,PlusIcon as Tt,PencilIcon as Ct,TrashIcon as Pe,CopyIcon as Bt,CheckIcon as Vt,LayersIcon as It,ResetIcon as Pt,ChevronIcon as At,WarningTriangleIcon as Ft}from"../NetworkIcons";import{fetchStorageEntries as Mt,setStorageEntry as Lt,removeStorageEntry as $t,clearStorageDriver as Dt,getRegisteredMMKVInstanceIds as Rt,subscribeToStorageChanges as Wt}from"../../customHooks/storageInspector";import{copyToClipboard as Kt}from"../../helpers";import{showToast as $}from"../../helpers/toast";const Et=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`}}},Ot=we.memo(function({entry:B,isExpanded:r,onToggleExpand:J,onCopy:F,onEdit:q,onDelete:I,badge:D}){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 A=B.parsedValue??JSON.parse(B.value);return JSON.stringify(A,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:D.bg,borderColor:`${D.color}33`}]}>
+              <C style={[t.typeBadgeText,{color:D.color}]}>
+                {D.label}
+              </C>
             </S>
-            <T style={[t.typeBadge,{backgroundColor:P.bg,borderColor:`${P.color}33`}]}>
-              <S style={[t.typeBadgeText,{color:P.color}]}>
-                {P.label}
-              </S>
-            </T>
-            <S style={t.sizeText}>{U}</S>
-          </T>
-        </T>
+            <C style={t.sizeText}>{Q}</C>
+          </S>
+        </S>
 
         
-        <T style={t.entryActions}>
-          <B hitSlop={6}onPress={()=>z(C)}style={t.entryActionBtn}>
-            <Ue size={12}color={e.grayText}/>
-          </B>
-
-          <B hitSlop={6}onPress={()=>G(C)}style={t.entryActionBtn}>
-            <Ge 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}/>
-          </B>
-        </T>
-      </T>
+        <S style={t.entryActions}>
+          <V hitSlop={6}onPress={()=>F(B)}style={t.entryActionBtn}>
+            <Bt size={12}color={e.grayText}/>
+          </V>
+
+          <V hitSlop={6}onPress={()=>q(B)}style={t.entryActionBtn}>
+            <Ct size={12}color={e.purple}/>
+          </V>
+
+          <V hitSlop={6}onPress={()=>I(B.key)}style={[t.entryActionBtn,{backgroundColor:`${e.errorColor}12`}]}>
+            <Pe size={12}color={e.errorColor}/>
+          </V>
+        </S>
+      </S>
 
       
-      <B onPress={()=>E(C.key)}style={t.valuePreviewBox}>
-        <S style={t.valuePreviewText}numberOfLines={o?void 0:3}selectable={o}>
-          {O}
-        </S>
-        {C.value.length>80&&<T style={{flexDirection:"row",alignItems:"center",gap:4,marginTop:4}}>
-            <S style={t.expandHint}>
-              {o?"Collapse":"Expand"}
-            </S>
-            <Xe direction={o?"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}>
+      <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"}
+            </C>
+            <At direction={r?"up":"down"}size={10}color={e.purple}/>
+          </S>}
+      </V>
+    </S>});export const StorageTab=we.memo(()=>{const{t:w}=Ze(),B=Je(null),[r,J]=z("asyncStorage"),[F,q]=z("default"),[I,D]=z([]),[Q,G]=z(!0),[A,X]=z(""),[Z,Ae]=z(100),[Te,Fe]=z({}),[Me,K]=z(!1),[U,xe]=z("create"),[E,ee]=z(""),[H,Y]=z(""),[R,_]=z("string"),[te,M]=z(null),Ce=N(()=>Rt(),[]),W=oe(async()=>{G(!0);try{const o=await Mt(r,r==="mmkv"?F:void 0);D(o)}catch{D([])}finally{G(!1)}},[r,F]);je(()=>(W(),Wt(W)),[W]);const Le=o=>{Fe(P=>({...P,[o]:!P[o]}))},$e=()=>{xe("create"),ee(""),Y(""),_("string"),M(null),K(!0)},De=o=>{xe("edit"),ee(o.key),Y(o.value),_(o.type==="json"?"json":o.type==="number"?"number":o.type==="boolean"?"boolean":"string"),M(null),K(!0)},Re=o=>{ke.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 $t(r,o,r==="mmkv"?F:void 0)?($(`Deleted "${o}"`),W()):$(`Failed to delete "${o}"`)}}])},We=()=>{ke.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 Dt(r,r==="mmkv"?F:void 0)&&($("All storage keys wiped"),W())}}])},Ke=async()=>{if(!E.trim()){$("Key name cannot be empty");return}let o=H;if(R==="json")try{const j=JSON.parse(H);o=JSON.stringify(j)}catch(j){M("Invalid JSON: "+j.message);return}else if(R==="number"&&isNaN(Number(H))){M("Value must be a valid number");return}await Lt(r,E.trim(),o,r==="mmkv"?F:void 0)?($(U==="create"?`Added "${E.trim()}"`:`Updated "${E.trim()}"`),K(!1),W()):$("Error saving storage key")},Ee=()=>{try{const o=JSON.parse(H);Y(JSON.stringify(o,null,2)),M(null),_("json"),$("Formatted JSON")}catch{M("Cannot format: invalid JSON syntax")}},L=N(()=>{if(!A.trim())return I;const o=A.toLowerCase().trim().split(/\s+/).filter(Boolean);return I.filter(P=>{const j=`${P.key} ${P.value}`.toLowerCase();return o.every(He=>j.includes(He))})},[I,A]),O=N(()=>I.reduce((o,P)=>o+P.byteSize,0),[I]),Oe=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]),Be=oe(o=>{Kt(o.value,o.key),$(`Copied value of "${o.key}"`)},[]),Ne=oe(({item:o})=><Ot entry={o}isExpanded={!!Te[o.key]}onToggleExpand={Le}onCopy={Be}onEdit={De}onDelete={Re}badge={Et(o.type)}/>,[Te,Be]);return<S 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
-            </S>
-            {o==="asyncStorage"&&v.length>0&&<T style={t.driverCountBadge}>
-                <S style={t.driverCountText}>{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
-            </S>
-            {o==="mmkv"&&v.length>0&&<T style={t.driverCountBadge}>
-                <S style={t.driverCountText}>{v.length}</S>
-              </T>}
-          </B>
+      <S style={t.driverTabsWrapper}>
+        <Ge 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`}]}>
+            <Ve 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`}]}>
+            <It 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>
 
           
-          {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}
-                  </S>
-                </B>)}
-            </T>}
-        </Ke>
-      </T>
+          {r==="mmkv"&&Ce.length>1&&<S style={{flexDirection:"row",alignItems:"center",gap:4,marginLeft:6}}>
+              {Ce.map(o=><V key={o}onPress={()=>q(o)}style={[t.instancePill,F===o&&t.instancePillActive]}>
+                  <C style={[t.instancePillText,F===o&&t.instancePillTextActive]}>
+                    {o}
+                  </C>
+                </V>)}
+            </S>}
+        </Ge>
+      </S>
 
       
-      <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}}>
-              <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>
-              </T>
-              <B onPress={()=>Y("")}hitSlop={8}>
-                <Se size={13}color={e.grayTextWeak}/>
-              </B>
-            </T>}
-        </T>
+      <S style={t.actionBar}>
+        <S style={t.searchBar}>
+          <St size={14}color={e.grayTextWeak}/>
+          <Se value={A}onChangeText={X}placeholder={w("storage.searchPlaceholder","Search keys, values, types...")}placeholderTextColor={e.grayTextWeak}style={t.searchInput}clearButtonMode="while-editing"/>
+          {A.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={()=>X("")}hitSlop={8}>
+                <Ie size={13}color={e.grayTextWeak}/>
+              </V>
+            </S>}
+        </S>
 
         
-        <B onPress={ke}style={t.addKeyBtn}hitSlop={6}>
-          <Je size={13}color={e.white}/>
-          <S style={t.addKeyBtnText}>Add</S>
-        </B>
+        <V onPress={$e}style={t.addKeyBtn}hitSlop={6}>
+          <Tt size={13}color={e.white}/>
+          <C style={t.addKeyBtnText}>{w("storage.add","Add")}</C>
+        </V>
 
-        <B onPress={M}style={t.actionIconBtn}hitSlop={6}>
-          <Qe size={13}color={e.grayText}/>
-        </B>
+        <V onPress={W}style={t.actionIconBtn}hitSlop={6}>
+          <Pt size={13}color={e.grayText}/>
+        </V>
 
-        {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}/>
-          </B>}
-      </T>
+        {I.length>0&&<V onPress={We}style={[t.actionIconBtn,{borderColor:`${e.errorColor}33`,backgroundColor:`${e.errorColor}12`}]}hitSlop={6}>
+            <Pe size={13}color={e.errorColor}/>
+          </V>}
+      </S>
 
       
-      <T style={t.statsStrip}>
-        <S style={t.statsText}>
-          {Q.length} of {v.length} Keys • {$e}
-        </S>
-        <S style={t.statsSubtext}>
-          {o==="asyncStorage"?"SQLite Key-Value":`MMKV (${z})`}
-        </S>
-      </T>
+      <S style={t.statsStrip}>
+        <C style={t.statsText}>
+          {L.length.toLocaleString()} of {I.length.toLocaleString()} Keys • {Oe}
+        </C>
+        <C style={t.statsSubtext}>
+          {r==="asyncStorage"?"SQLite Key-Value":`MMKV (${F})`}
+        </C>
+      </S>
 
       
-      {U?<T style={t.loadingContainer}>
-          <Oe size="small"color={e.purple}/>
-          <S style={t.loadingText}>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}>
-                <T style={t.emptyIconWrap}>
-                  <Te size={28}color={e.grayTextWeak}/>
-                </T>
-                <S style={t.emptyTitle}>
-                  {V.trim().length>0?"No matching keys found":`No ${o==="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!`}
+      {Q?<S style={t.loadingContainer}>
+          <Qe size="small"color={e.purple}/>
+          <C style={t.loadingText}>{w("storage.loading","Loading storage entries...")}</C>
+        </S>:<>
+          <Ue ref={B}data={L.slice(0,Z)}keyExtractor={o=>o.key}renderItem={Ne}initialNumToRender={10}maxToRenderPerBatch={10}windowSize={5}removeClippedSubviews={ve.OS==="android"}style={t.scrollArea}contentContainerStyle={L.length===0?t.emptyScrollContent:t.scrollContent}showsVerticalScrollIndicator={!1}ListEmptyComponent={<S style={t.emptyContainer}>
+                <S style={t.emptyIconWrap}>
+                  <Ve size={28}color={e.grayTextWeak}/>
                 </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}}>
+                <C style={t.emptyTitle}>
+                  {A.trim().length>0?"No matching keys found":`No ${r==="asyncStorage"?"AsyncStorage":"MMKV"} Keys`}
+                </C>
+                <C style={t.emptySubtitle}>
+                  {A.trim().length>0?`No keys or values match "${A}"`:`Storage is auto-detected. Tap "+ Add" above to create your first ${r==="asyncStorage"?"AsyncStorage":"MMKV"} key!`}
+                </C>
+                {A.trim().length>0&&<V onPress={()=>X("")}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={<T style={{height:60}}/>}/>
+                    </C>
+                  </V>}
+              </S>}ListFooterComponent={L.length>0?<Xe count={Math.min(Z,L.length)}totalCount={L.length}label="keys"hasMore={L.length>Z}onLoadMore={()=>Ae(o=>o+10)}/>:<S style={{height:60}}/>}/>
         </>}
 
       
-      <Le visible={ve}transparent animationType="fade"onRequestClose={()=>F(!1)}>
-        <T style={t.modalOverlay}>
-          <T style={t.modalCard}>
-            <T style={t.modalHeader}>
-              <S style={t.modalTitle}>
-                {N==="create"?"Add Storage Key":`Edit: ${R}`}
-              </S>
-              <B onPress={()=>F(!1)}hitSlop={8}>
-                <Se size={16}color={e.grayText}/>
-              </B>
-            </T>
+      <Ye visible={Me}transparent animationType="fade"onRequestClose={()=>K(!1)}>
+        <S style={t.modalOverlay}>
+          <S style={t.modalCard}>
+            <S style={t.modalHeader}>
+              <C style={t.modalTitle}>
+                {U==="create"?"Add Storage Key":`Edit: ${E}`}
+              </C>
+              <V onPress={()=>K(!1)}hitSlop={8}>
+                <Ie size={16}color={e.grayText}/>
+              </V>
+            </S>
 
             
-            <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"/>
-            </T>
+            <S style={t.inputGroup}>
+              <C style={t.inputLabel}>{w("storage.keyName","KEY NAME").toUpperCase()}</C>
+              <Se value={E}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}>VALUE TYPE</S>
-                {$==="json"&&<B onPress={Pe}hitSlop={6}>
-                    <S style={t.formatJsonBtn}>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()}
-                      </S>
-                    </B>})}
-              </T>
-            </T>
+            <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={Ee}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 P=R===o;return<V key={o}onPress={()=>{_(o),M(null)}}style={[t.typePill,P&&t.typePillActive]}>
+                      <C style={[t.typePillText,P&&t.typePillTextActive]}>
+                        {o.toUpperCase()}
+                      </C>
+                    </V>})}
+              </S>
+            </S>
 
             
-            <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>
-                </T>}
-            </T>
+            <S style={t.inputGroup}>
+              <C style={t.inputLabel}>{w("storage.valueContent","VALUE CONTENT").toUpperCase()}</C>
+              <Se value={H}onChangeText={o=>{Y(o),te&&M(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}}>
+                  <Ft size={12}color={e.errorColor}/>
+                  <C style={t.errorText}>{te}</C>
+                </S>}
+            </S>
 
             
-            <T style={t.modalActions}>
-              <B onPress={()=>F(!1)}style={t.cancelBtn}>
-                <S style={t.cancelBtnText}>Cancel</S>
-              </B>
-              <B onPress={Ae}style={t.saveBtn}>
-                <Ye size={14}color={e.white}/>
-                <S style={t.saveBtnText}>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;
+            <S style={t.modalActions}>
+              <V onPress={()=>K(!1)}style={t.cancelBtn}>
+                <C style={t.cancelBtnText}>{w("common.cancel","Cancel")}</C>
+              </V>
+              <V onPress={Ke}style={t.saveBtn}>
+                <Vt size={14}color={e.white}/>
+                <C style={t.saveBtnText}>{w("storage.saveKey","Save Key")}</C>
+              </V>
+            </S>
+          </S>
+        </S>
+      </Ye>
+    </S>});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: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:ve.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,52 +1,56 @@
-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 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}]}>
       
-      {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&&<_ 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"}}>
+            <Q 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={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}}>
-                  {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"&&<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:v.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={[T.contentTabButtonText,{color:t?e.white:e.grayTextStrong,fontFamily:t?v.interBold:v.interSemiBold}]}>
+                    {o.label}
+                  </L>
+                  {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"&&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>
 
       
-      {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}/>
+      {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"}}>
+            <Q 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}}>
+          <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"}}>
-              <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}}/>}
+              <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 $e;
+    </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">