react-native-inapp-inspector 2.3.24 → 2.4.0

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

@@ -1,4 +1,4 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(a,o,t,l){l===void 0&&(l=t);var r=Object.getOwnPropertyDescriptor(o,t);(!r||("get"in r?!o.__esModule:r.writable||r.configurable))&&(r={enumerable:!0,get:function(){return o[t]}}),Object.defineProperty(a,l,r)}):(function(a,o,t,l){l===void 0&&(l=t),a[l]=o[t]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(a,o){Object.defineProperty(a,"default",{enumerable:!0,value:o})}):function(a,o){a.default=o}),__importStar=this&&this.__importStar||(function(){var a=function(o){return a=Object.getOwnPropertyNames||function(t){var l=[];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(l[l.length]=r);return l},a(o)};return function(o){if(o&&o.__esModule)return o;var t={};if(o!=null)for(var l=a(o),r=0;r<l.length;r++)l[r]!=="default"&&__createBinding(t,o,l[r]);return __setModuleDefault(t,o),t}})(),__importDefault=this&&this.__importDefault||function(a){return a&&a.__esModule?a:{default:a}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.StorageTab=void 0;const react_1=__importStar(require("react")),react_native_1=require("react-native"),TouchableScale_1=__importDefault(require("../TouchableScale")),AppColors_1=require("../../styles/AppColors"),AppFonts_1=require("../../styles/AppFonts"),i18n_1=require("../../i18n"),NetworkIcons_1=require("../NetworkIcons"),storageInspector_1=require("../../customHooks/storageInspector"),helpers_1=require("../../helpers"),toast_1=require("../../helpers/toast"),getTypeBadge=a=>{switch(a){case"json":return{label:"JSON",color:AppColors_1.AppColors.purple,bg:`${AppColors_1.AppColors.purple}16`};case"number":return{label:"NUM",color:AppColors_1.AppColors.warningIconGold,bg:`${AppColors_1.AppColors.warningIconGold}16`};case"boolean":return{label:"BOOL",color:AppColors_1.AppColors.emerald500,bg:`${AppColors_1.AppColors.emerald500}16`};case"null":return{label:"NULL",color:AppColors_1.AppColors.grayTextWeak,bg:`${AppColors_1.AppColors.grayTextWeak}16`};default:return{label:"STR",color:AppColors_1.AppColors.blue500,bg:`${AppColors_1.AppColors.blue500}16`}}},StorageEntryCard=react_1.default.memo(function({entry:o,isExpanded:t,onToggleExpand:l,onCopy:r,onEdit:v,onDelete:n,badge:p}){const h=(0,react_1.useMemo)(()=>o.byteSize<1024?`${o.byteSize} B`:`${(o.byteSize/1024).toFixed(1)} KB`,[o.byteSize]),T=(0,react_1.useMemo)(()=>{if(!t)return o.value.length>250?o.value.slice(0,250)+"...":o.value;if(o.type==="json")try{const s=o.parsedValue??JSON.parse(o.value);return JSON.stringify(s,null,2)}catch{return o.value}return o.value},[t,o.value,o.type,o.parsedValue]);return<react_native_1.View style={styles.entryCard}>
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(r,o,t,l){l===void 0&&(l=t);var a=Object.getOwnPropertyDescriptor(o,t);(!a||("get"in a?!o.__esModule:a.writable||a.configurable))&&(a={enumerable:!0,get:function(){return o[t]}}),Object.defineProperty(r,l,a)}):(function(r,o,t,l){l===void 0&&(l=t),r[l]=o[t]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(r,o){Object.defineProperty(r,"default",{enumerable:!0,value:o})}):function(r,o){r.default=o}),__importStar=this&&this.__importStar||(function(){var r=function(o){return r=Object.getOwnPropertyNames||function(t){var l=[];for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&(l[l.length]=a);return l},r(o)};return function(o){if(o&&o.__esModule)return o;var t={};if(o!=null)for(var l=r(o),a=0;a<l.length;a++)l[a]!=="default"&&__createBinding(t,o,l[a]);return __setModuleDefault(t,o),t}})(),__importDefault=this&&this.__importDefault||function(r){return r&&r.__esModule?r:{default:r}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.StorageTab=void 0;const react_1=__importStar(require("react")),react_native_1=require("react-native"),TouchableScale_1=__importDefault(require("../TouchableScale")),EndOfListFooter_1=__importDefault(require("../EndOfListFooter")),AppColors_1=require("../../styles/AppColors"),AppFonts_1=require("../../styles/AppFonts"),i18n_1=require("../../i18n"),NetworkIcons_1=require("../NetworkIcons"),storageInspector_1=require("../../customHooks/storageInspector"),helpers_1=require("../../helpers"),toast_1=require("../../helpers/toast"),getTypeBadge=r=>{switch(r){case"json":return{label:"JSON",color:AppColors_1.AppColors.purple,bg:`${AppColors_1.AppColors.purple}16`};case"number":return{label:"NUM",color:AppColors_1.AppColors.warningIconGold,bg:`${AppColors_1.AppColors.warningIconGold}16`};case"boolean":return{label:"BOOL",color:AppColors_1.AppColors.emerald500,bg:`${AppColors_1.AppColors.emerald500}16`};case"null":return{label:"NULL",color:AppColors_1.AppColors.grayTextWeak,bg:`${AppColors_1.AppColors.grayTextWeak}16`};default:return{label:"STR",color:AppColors_1.AppColors.blue500,bg:`${AppColors_1.AppColors.blue500}16`}}},StorageEntryCard=react_1.default.memo(function({entry:o,isExpanded:t,onToggleExpand:l,onCopy:a,onEdit:v,onDelete:n,badge:d}){const S=(0,react_1.useMemo)(()=>o.byteSize<1024?`${o.byteSize.toLocaleString()} B`:`${(o.byteSize/1024).toLocaleString(void 0,{minimumFractionDigits:1,maximumFractionDigits:1})} KB`,[o.byteSize]),A=(0,react_1.useMemo)(()=>{if(!t)return o.value.length>250?o.value.slice(0,250)+"...":o.value;if(o.type==="json")try{const s=o.parsedValue??JSON.parse(o.value);return JSON.stringify(s,null,2)}catch{return o.value}return o.value},[t,o.value,o.type,o.parsedValue]);return<react_native_1.View style={styles.entryCard}>
       
       <react_native_1.View style={styles.entryHeader}>
         <react_native_1.View style={{flex:1,marginRight:8}}>
@@ -6,18 +6,18 @@
             <react_native_1.Text style={styles.entryKey}numberOfLines={1}selectable>
               {o.key}
             </react_native_1.Text>
-            <react_native_1.View style={[styles.typeBadge,{backgroundColor:p.bg,borderColor:`${p.color}33`}]}>
-              <react_native_1.Text style={[styles.typeBadgeText,{color:p.color}]}>
-                {p.label}
+            <react_native_1.View style={[styles.typeBadge,{backgroundColor:d.bg,borderColor:`${d.color}33`}]}>
+              <react_native_1.Text style={[styles.typeBadgeText,{color:d.color}]}>
+                {d.label}
               </react_native_1.Text>
             </react_native_1.View>
-            <react_native_1.Text style={styles.sizeText}>{h}</react_native_1.Text>
+            <react_native_1.Text style={styles.sizeText}>{S}</react_native_1.Text>
           </react_native_1.View>
         </react_native_1.View>
 
         
         <react_native_1.View style={styles.entryActions}>
-          <TouchableScale_1.default hitSlop={6}onPress={()=>r(o)}style={styles.entryActionBtn}>
+          <TouchableScale_1.default hitSlop={6}onPress={()=>a(o)}style={styles.entryActionBtn}>
             <NetworkIcons_1.CopyIcon size={12}color={AppColors_1.AppColors.grayText}/>
           </TouchableScale_1.default>
 
@@ -34,7 +34,7 @@
       
       <TouchableScale_1.default onPress={()=>l(o.key)}style={styles.valuePreviewBox}>
         <react_native_1.Text style={styles.valuePreviewText}numberOfLines={t?void 0:3}selectable={t}>
-          {T}
+          {A}
         </react_native_1.Text>
         {o.value.length>80&&<react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:4,marginTop:4}}>
             <react_native_1.Text style={styles.expandHint}>
@@ -43,34 +43,38 @@
             <NetworkIcons_1.ChevronIcon direction={t?"up":"down"}size={10}color={AppColors_1.AppColors.purple}/>
           </react_native_1.View>}
       </TouchableScale_1.default>
-    </react_native_1.View>});exports.StorageTab=react_1.default.memo(()=>{const{t:a}=(0,i18n_1.useTranslation)(),o=(0,react_1.useRef)(null),[t,l]=(0,react_1.useState)("asyncStorage"),[r,v]=(0,react_1.useState)("default"),[n,p]=(0,react_1.useState)([]),[h,T]=(0,react_1.useState)(!0),[s,_]=(0,react_1.useState)(""),[V,F]=(0,react_1.useState)({}),[P,y]=(0,react_1.useState)(!1),[m,k]=(0,react_1.useState)("create"),[g,S]=(0,react_1.useState)(""),[f,A]=(0,react_1.useState)(""),[d,x]=(0,react_1.useState)("string"),[w,c]=(0,react_1.useState)(null),I=(0,react_1.useMemo)(()=>(0,storageInspector_1.getRegisteredMMKVInstanceIds)(),[]),u=(0,react_1.useCallback)(async()=>{T(!0);try{const e=await(0,storageInspector_1.fetchStorageEntries)(t,t==="mmkv"?r:void 0);p(e)}catch{p([])}finally{T(!1)}},[t,r]);(0,react_1.useEffect)(()=>(u(),(0,storageInspector_1.subscribeToStorageChanges)(u)),[u]);const M=e=>{F(i=>({...i,[e]:!i[e]}))},$=()=>{k("create"),S(""),A(""),x("string"),c(null),y(!0)},O=e=>{k("edit"),S(e.key),A(e.value),x(e.type==="json"?"json":e.type==="number"?"number":e.type==="boolean"?"boolean":"string"),c(null),y(!0)},W=e=>{react_native_1.Alert.alert("Delete Storage Key",`Are you sure you want to permanently delete "${e}" from ${t==="asyncStorage"?"AsyncStorage":"MMKV"}?`,[{text:"Cancel",style:"cancel"},{text:"Delete",style:"destructive",onPress:async()=>{await(0,storageInspector_1.removeStorageEntry)(t,e,t==="mmkv"?r:void 0)?((0,toast_1.showToast)(`Deleted "${e}"`),u()):(0,toast_1.showToast)(`Failed to delete "${e}"`)}}])},D=()=>{react_native_1.Alert.alert("Wipe All Storage Keys",`Are you sure you want to clear all ${n.length} keys in ${t==="asyncStorage"?"AsyncStorage":"MMKV"}? This cannot be undone.`,[{text:"Cancel",style:"cancel"},{text:"Wipe All",style:"destructive",onPress:async()=>{await(0,storageInspector_1.clearStorageDriver)(t,t==="mmkv"?r:void 0)&&((0,toast_1.showToast)("All storage keys wiped"),u())}}])},R=async()=>{if(!g.trim()){(0,toast_1.showToast)("Key name cannot be empty");return}let e=f;if(d==="json")try{const b=JSON.parse(f);e=JSON.stringify(b)}catch(b){c("Invalid JSON: "+b.message);return}else if(d==="number"&&isNaN(Number(f))){c("Value must be a valid number");return}await(0,storageInspector_1.setStorageEntry)(t,g.trim(),e,t==="mmkv"?r:void 0)?((0,toast_1.showToast)(m==="create"?`Added "${g.trim()}"`:`Updated "${g.trim()}"`),y(!1),u()):(0,toast_1.showToast)("Error saving storage key")},K=()=>{try{const e=JSON.parse(f);A(JSON.stringify(e,null,2)),c(null),x("json"),(0,toast_1.showToast)("Formatted JSON")}catch{c("Cannot format: invalid JSON syntax")}},B=(0,react_1.useMemo)(()=>{if(!s.trim())return n;const e=s.toLowerCase().trim().split(/\s+/).filter(Boolean);return n.filter(i=>{const b=`${i.key} ${i.value}`.toLowerCase();return e.every(N=>b.includes(N))})},[n,s]),C=(0,react_1.useMemo)(()=>n.reduce((e,i)=>e+i.byteSize,0),[n]),j=(0,react_1.useMemo)(()=>C<1024?`${C} B`:C<1024*1024?`${(C/1024).toFixed(1)} KB`:`${(C/(1024*1024)).toFixed(2)} MB`,[C]),z=(0,react_1.useCallback)(e=>{(0,helpers_1.copyToClipboard)(e.value,e.key),(0,toast_1.showToast)(`Copied value of "${e.key}"`)},[]),L=(0,react_1.useCallback)(({item:e})=><StorageEntryCard entry={e}isExpanded={!!V[e.key]}onToggleExpand={M}onCopy={z}onEdit={O}onDelete={W}badge={getTypeBadge(e.type)}/>,[V,z]),E=t==="asyncStorage"?(0,storageInspector_1.isAsyncStorageConnected)():(0,storageInspector_1.isMMKVConnected)();return<react_native_1.View style={styles.container}>
+    </react_native_1.View>});exports.StorageTab=react_1.default.memo(()=>{const{t:r}=(0,i18n_1.useTranslation)(),o=(0,react_1.useRef)(null),[t,l]=(0,react_1.useState)("asyncStorage"),[a,v]=(0,react_1.useState)("default"),[n,d]=(0,react_1.useState)([]),[S,A]=(0,react_1.useState)(!0),[s,_]=(0,react_1.useState)(""),[w,P]=(0,react_1.useState)(100),[k,M]=(0,react_1.useState)({}),[D,y]=(0,react_1.useState)(!1),[T,I]=(0,react_1.useState)("create"),[C,B]=(0,react_1.useState)(""),[m,h]=(0,react_1.useState)(""),[u,x]=(0,react_1.useState)("string"),[V,c]=(0,react_1.useState)(null),F=(0,react_1.useMemo)(()=>(0,storageInspector_1.getRegisteredMMKVInstanceIds)(),[]),g=(0,react_1.useCallback)(async()=>{A(!0);try{const e=await(0,storageInspector_1.fetchStorageEntries)(t,t==="mmkv"?a:void 0);d(e)}catch{d([])}finally{A(!1)}},[t,a]);(0,react_1.useEffect)(()=>(g(),(0,storageInspector_1.subscribeToStorageChanges)(g)),[g]);const L=e=>{M(i=>({...i,[e]:!i[e]}))},O=()=>{I("create"),B(""),h(""),x("string"),c(null),y(!0)},$=e=>{I("edit"),B(e.key),h(e.value),x(e.type==="json"?"json":e.type==="number"?"number":e.type==="boolean"?"boolean":"string"),c(null),y(!0)},R=e=>{react_native_1.Alert.alert(r("storage.deleteKeyTitle","Delete Key"),r("storage.deleteKeyMessage",{key:e,defaultValue:`Are you sure you want to delete key "${e}"?`}),[{text:r("common.cancel","Cancel"),style:"cancel"},{text:r("common.clear","Delete"),style:"destructive",onPress:async()=>{await(0,storageInspector_1.removeStorageEntry)(t,e,t==="mmkv"?a:void 0)?((0,toast_1.showToast)(`Deleted "${e}"`),g()):(0,toast_1.showToast)(`Failed to delete "${e}"`)}}])},K=()=>{react_native_1.Alert.alert(r("storage.clearTitle","Clear Storage Driver"),r("storage.clearMessage",{driver:t==="asyncStorage"?"AsyncStorage":"MMKV",defaultValue:`Are you sure you want to delete all keys in ${t==="asyncStorage"?"AsyncStorage":"MMKV"}?`}),[{text:r("common.cancel","Cancel"),style:"cancel"},{text:r("storage.clearConfirm","Clear All"),style:"destructive",onPress:async()=>{await(0,storageInspector_1.clearStorageDriver)(t,t==="mmkv"?a:void 0)&&((0,toast_1.showToast)("All storage keys wiped"),g())}}])},W=async()=>{if(!C.trim()){(0,toast_1.showToast)("Key name cannot be empty");return}let e=m;if(u==="json")try{const b=JSON.parse(m);e=JSON.stringify(b)}catch(b){c("Invalid JSON: "+b.message);return}else if(u==="number"&&isNaN(Number(m))){c("Value must be a valid number");return}await(0,storageInspector_1.setStorageEntry)(t,C.trim(),e,t==="mmkv"?a:void 0)?((0,toast_1.showToast)(T==="create"?`Added "${C.trim()}"`:`Updated "${C.trim()}"`),y(!1),g()):(0,toast_1.showToast)("Error saving storage key")},j=()=>{try{const e=JSON.parse(m);h(JSON.stringify(e,null,2)),c(null),x("json"),(0,toast_1.showToast)("Formatted JSON")}catch{c("Cannot format: invalid JSON syntax")}},p=(0,react_1.useMemo)(()=>{if(!s.trim())return n;const e=s.toLowerCase().trim().split(/\s+/).filter(Boolean);return n.filter(i=>{const b=`${i.key} ${i.value}`.toLowerCase();return e.every(H=>b.includes(H))})},[n,s]),f=(0,react_1.useMemo)(()=>n.reduce((e,i)=>e+i.byteSize,0),[n]),E=(0,react_1.useMemo)(()=>f<1024?`${f.toLocaleString()} B`:f<1024*1024?`${(f/1024).toLocaleString(void 0,{minimumFractionDigits:1,maximumFractionDigits:1})} KB`:`${(f/(1024*1024)).toLocaleString(void 0,{minimumFractionDigits:2,maximumFractionDigits:2})} MB`,[f]),z=(0,react_1.useCallback)(e=>{(0,helpers_1.copyToClipboard)(e.value,e.key),(0,toast_1.showToast)(`Copied value of "${e.key}"`)},[]),N=(0,react_1.useCallback)(({item:e})=><StorageEntryCard entry={e}isExpanded={!!k[e.key]}onToggleExpand={L}onCopy={z}onEdit={$}onDelete={R}badge={getTypeBadge(e.type)}/>,[k,z]);return<react_native_1.View style={styles.container}>
       
       <react_native_1.View style={styles.driverTabsWrapper}>
         <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={styles.driverTabsContainer}>
-          <TouchableScale_1.default onPress={()=>l("asyncStorage")}style={[styles.driverTabPill,t==="asyncStorage"&&styles.driverTabPillActive]}>
-            <NetworkIcons_1.DatabaseIcon size={13}color={t==="asyncStorage"?AppColors_1.AppColors.white:AppColors_1.AppColors.grayText}/>
-            <react_native_1.Text style={[styles.driverTabText,t==="asyncStorage"&&styles.driverTabTextActive]}>
-              AsyncStorage
+          <TouchableScale_1.default onPress={()=>l("asyncStorage")}style={[styles.driverTabPill,t==="asyncStorage"&&{backgroundColor:AppColors_1.AppColors.brandPurple,borderColor:AppColors_1.AppColors.brandPurple},t!=="asyncStorage"&&{backgroundColor:`${AppColors_1.AppColors.brandPurple}12`,borderColor:`${AppColors_1.AppColors.brandPurple}30`}]}>
+            <NetworkIcons_1.DatabaseIcon size={11}color={t==="asyncStorage"?AppColors_1.AppColors.white:AppColors_1.AppColors.brandPurple}/>
+            <react_native_1.Text style={[styles.driverTabText,{color:t==="asyncStorage"?AppColors_1.AppColors.white:AppColors_1.AppColors.primaryBlack}]}>
+              {r("storage.subTabs.asyncStorage","AsyncStorage")}
             </react_native_1.Text>
-            {t==="asyncStorage"&&n.length>0&&<react_native_1.View style={styles.driverCountBadge}>
-                <react_native_1.Text style={styles.driverCountText}>{n.length}</react_native_1.Text>
+            {n.length>0&&t==="asyncStorage"&&<react_native_1.View style={[styles.driverCountBadge,{backgroundColor:"rgba(255,255,255,0.25)"}]}>
+                <react_native_1.Text style={[styles.driverCountText,{color:AppColors_1.AppColors.white}]}>
+                  {n.length}
+                </react_native_1.Text>
               </react_native_1.View>}
           </TouchableScale_1.default>
 
-          <TouchableScale_1.default onPress={()=>l("mmkv")}style={[styles.driverTabPill,t==="mmkv"&&styles.driverTabPillActive]}>
-            <NetworkIcons_1.LayersIcon size={13}color={t==="mmkv"?AppColors_1.AppColors.white:AppColors_1.AppColors.grayText}/>
-            <react_native_1.Text style={[styles.driverTabText,t==="mmkv"&&styles.driverTabTextActive]}>
-              MMKV
+          <TouchableScale_1.default onPress={()=>l("mmkv")}style={[styles.driverTabPill,t==="mmkv"&&{backgroundColor:AppColors_1.AppColors.teal600,borderColor:AppColors_1.AppColors.teal600},t!=="mmkv"&&{backgroundColor:`${AppColors_1.AppColors.teal600}12`,borderColor:`${AppColors_1.AppColors.teal600}30`}]}>
+            <NetworkIcons_1.LayersIcon size={11}color={t==="mmkv"?AppColors_1.AppColors.white:AppColors_1.AppColors.teal600}/>
+            <react_native_1.Text style={[styles.driverTabText,{color:t==="mmkv"?AppColors_1.AppColors.white:AppColors_1.AppColors.primaryBlack}]}>
+              {r("storage.subTabs.mmkv","MMKV")}
             </react_native_1.Text>
-            {t==="mmkv"&&n.length>0&&<react_native_1.View style={styles.driverCountBadge}>
-                <react_native_1.Text style={styles.driverCountText}>{n.length}</react_native_1.Text>
+            {n.length>0&&t==="mmkv"&&<react_native_1.View style={[styles.driverCountBadge,{backgroundColor:"rgba(255,255,255,0.25)"}]}>
+                <react_native_1.Text style={[styles.driverCountText,{color:AppColors_1.AppColors.white}]}>
+                  {n.length}
+                </react_native_1.Text>
               </react_native_1.View>}
           </TouchableScale_1.default>
 
           
-          {t==="mmkv"&&I.length>1&&<react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:4,marginLeft:6}}>
-              {I.map(e=><TouchableScale_1.default key={e}onPress={()=>v(e)}style={[styles.instancePill,r===e&&styles.instancePillActive]}>
-                  <react_native_1.Text style={[styles.instancePillText,r===e&&styles.instancePillTextActive]}>
+          {t==="mmkv"&&F.length>1&&<react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:4,marginLeft:6}}>
+              {F.map(e=><TouchableScale_1.default key={e}onPress={()=>v(e)}style={[styles.instancePill,a===e&&styles.instancePillActive]}>
+                  <react_native_1.Text style={[styles.instancePillText,a===e&&styles.instancePillTextActive]}>
                     {e}
                   </react_native_1.Text>
                 </TouchableScale_1.default>)}
@@ -82,11 +86,11 @@
       <react_native_1.View style={styles.actionBar}>
         <react_native_1.View style={styles.searchBar}>
           <NetworkIcons_1.SearchIcon size={14}color={AppColors_1.AppColors.grayTextWeak}/>
-          <react_native_1.TextInput value={s}onChangeText={_}placeholder={`Search ${n.length} keys & values...`}placeholderTextColor={AppColors_1.AppColors.grayTextWeak}style={styles.searchInput}clearButtonMode="while-editing"/>
+          <react_native_1.TextInput value={s}onChangeText={_}placeholder={r("storage.searchPlaceholder","Search keys, values, types...")}placeholderTextColor={AppColors_1.AppColors.grayTextWeak}style={styles.searchInput}clearButtonMode="while-editing"/>
           {s.length>0&&<react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:4}}>
               <react_native_1.View style={{backgroundColor:`${AppColors_1.AppColors.purple}20`,borderRadius:10,paddingHorizontal:6,paddingVertical:1.5}}>
                 <react_native_1.Text style={{color:AppColors_1.AppColors.purple,fontSize:9.5,fontFamily:AppFonts_1.AppFonts.interBold}}>
-                  {B.length}
+                  {p.length}
                 </react_native_1.Text>
               </react_native_1.View>
               <TouchableScale_1.default onPress={()=>_("")}hitSlop={8}>
@@ -96,16 +100,16 @@
         </react_native_1.View>
 
         
-        <TouchableScale_1.default onPress={$}style={styles.addKeyBtn}hitSlop={6}>
+        <TouchableScale_1.default onPress={O}style={styles.addKeyBtn}hitSlop={6}>
           <NetworkIcons_1.PlusIcon size={13}color={AppColors_1.AppColors.white}/>
-          <react_native_1.Text style={styles.addKeyBtnText}>Add</react_native_1.Text>
+          <react_native_1.Text style={styles.addKeyBtnText}>{r("storage.add","Add")}</react_native_1.Text>
         </TouchableScale_1.default>
 
-        <TouchableScale_1.default onPress={u}style={styles.actionIconBtn}hitSlop={6}>
+        <TouchableScale_1.default onPress={g}style={styles.actionIconBtn}hitSlop={6}>
           <NetworkIcons_1.ResetIcon size={13}color={AppColors_1.AppColors.grayText}/>
         </TouchableScale_1.default>
 
-        {n.length>0&&<TouchableScale_1.default onPress={D}style={[styles.actionIconBtn,{borderColor:`${AppColors_1.AppColors.errorColor}33`,backgroundColor:`${AppColors_1.AppColors.errorColor}12`}]}hitSlop={6}>
+        {n.length>0&&<TouchableScale_1.default onPress={K}style={[styles.actionIconBtn,{borderColor:`${AppColors_1.AppColors.errorColor}33`,backgroundColor:`${AppColors_1.AppColors.errorColor}12`}]}hitSlop={6}>
             <NetworkIcons_1.TrashIcon size={13}color={AppColors_1.AppColors.errorColor}/>
           </TouchableScale_1.default>}
       </react_native_1.View>
@@ -113,19 +117,19 @@
       
       <react_native_1.View style={styles.statsStrip}>
         <react_native_1.Text style={styles.statsText}>
-          {B.length} of {n.length} Keys • {j}
+          {p.length.toLocaleString()} of {n.length.toLocaleString()} Keys • {E}
         </react_native_1.Text>
         <react_native_1.Text style={styles.statsSubtext}>
-          {t==="asyncStorage"?"SQLite Key-Value":`MMKV (${r})`}
+          {t==="asyncStorage"?"SQLite Key-Value":`MMKV (${a})`}
         </react_native_1.Text>
       </react_native_1.View>
 
       
-      {h?<react_native_1.View style={styles.loadingContainer}>
+      {S?<react_native_1.View style={styles.loadingContainer}>
           <react_native_1.ActivityIndicator size="small"color={AppColors_1.AppColors.purple}/>
-          <react_native_1.Text style={styles.loadingText}>Loading storage entries...</react_native_1.Text>
+          <react_native_1.Text style={styles.loadingText}>{r("storage.loading","Loading storage entries...")}</react_native_1.Text>
         </react_native_1.View>:<>
-          <react_native_1.FlatList ref={o}data={B}keyExtractor={e=>e.key}renderItem={L}initialNumToRender={10}maxToRenderPerBatch={10}windowSize={5}removeClippedSubviews={react_native_1.Platform.OS==="android"}style={styles.scrollArea}contentContainerStyle={styles.scrollContent}showsVerticalScrollIndicator={!1}ListEmptyComponent={<react_native_1.View style={styles.emptyContainer}>
+          <react_native_1.FlatList ref={o}data={p.slice(0,w)}keyExtractor={e=>e.key}renderItem={N}initialNumToRender={10}maxToRenderPerBatch={10}windowSize={5}removeClippedSubviews={react_native_1.Platform.OS==="android"}style={styles.scrollArea}contentContainerStyle={p.length===0?styles.emptyScrollContent:styles.scrollContent}showsVerticalScrollIndicator={!1}ListEmptyComponent={<react_native_1.View style={styles.emptyContainer}>
                 <react_native_1.View style={styles.emptyIconWrap}>
                   <NetworkIcons_1.DatabaseIcon size={28}color={AppColors_1.AppColors.grayTextWeak}/>
                 </react_native_1.View>
@@ -140,16 +144,16 @@
                       Clear Search
                     </react_native_1.Text>
                   </TouchableScale_1.default>}
-              </react_native_1.View>}ListFooterComponent={<react_native_1.View style={{height:60}}/>}/>
+              </react_native_1.View>}ListFooterComponent={p.length>0?<EndOfListFooter_1.default count={Math.min(w,p.length)}totalCount={p.length}label="keys"hasMore={p.length>w}onLoadMore={()=>P(e=>e+10)}/>:<react_native_1.View style={{height:60}}/>}/>
         </>}
 
       
-      <react_native_1.Modal visible={P}transparent animationType="fade"onRequestClose={()=>y(!1)}>
+      <react_native_1.Modal visible={D}transparent animationType="fade"onRequestClose={()=>y(!1)}>
         <react_native_1.View style={styles.modalOverlay}>
           <react_native_1.View style={styles.modalCard}>
             <react_native_1.View style={styles.modalHeader}>
               <react_native_1.Text style={styles.modalTitle}>
-                {m==="create"?"Add Storage Key":`Edit: ${g}`}
+                {T==="create"?"Add Storage Key":`Edit: ${C}`}
               </react_native_1.Text>
               <TouchableScale_1.default onPress={()=>y(!1)}hitSlop={8}>
                 <NetworkIcons_1.ClearIcon size={16}color={AppColors_1.AppColors.grayText}/>
@@ -158,20 +162,20 @@
 
             
             <react_native_1.View style={styles.inputGroup}>
-              <react_native_1.Text style={styles.inputLabel}>KEY NAME</react_native_1.Text>
-              <react_native_1.TextInput value={g}onChangeText={S}placeholder="e.g. user_session, auth_token"placeholderTextColor={AppColors_1.AppColors.grayTextWeak}editable={m==="create"}style={[styles.textInput,m==="edit"&&styles.textInputDisabled]}autoCapitalize="none"/>
+              <react_native_1.Text style={styles.inputLabel}>{r("storage.keyName","KEY NAME").toUpperCase()}</react_native_1.Text>
+              <react_native_1.TextInput value={C}onChangeText={B}placeholder="e.g. user_session, auth_token"placeholderTextColor={AppColors_1.AppColors.grayTextWeak}editable={T==="create"}style={[styles.textInput,T==="edit"&&styles.textInputDisabled]}autoCapitalize="none"/>
             </react_native_1.View>
 
             
             <react_native_1.View style={styles.inputGroup}>
               <react_native_1.View style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:4}}>
-                <react_native_1.Text style={styles.inputLabel}>VALUE TYPE</react_native_1.Text>
-                {d==="json"&&<TouchableScale_1.default onPress={K}hitSlop={6}>
-                    <react_native_1.Text style={styles.formatJsonBtn}>Beautify JSON</react_native_1.Text>
+                <react_native_1.Text style={styles.inputLabel}>{r("storage.type","VALUE TYPE").toUpperCase()}</react_native_1.Text>
+                {u==="json"&&<TouchableScale_1.default onPress={j}hitSlop={6}>
+                    <react_native_1.Text style={styles.formatJsonBtn}>{r("storage.beautifyJson","Beautify JSON")}</react_native_1.Text>
                   </TouchableScale_1.default>}
               </react_native_1.View>
               <react_native_1.View style={styles.typeSelectorStrip}>
-                {["string","json","number","boolean"].map(e=>{const i=d===e;return<TouchableScale_1.default key={e}onPress={()=>{x(e),c(null)}}style={[styles.typePill,i&&styles.typePillActive]}>
+                {["string","json","number","boolean"].map(e=>{const i=u===e;return<TouchableScale_1.default key={e}onPress={()=>{x(e),c(null)}}style={[styles.typePill,i&&styles.typePillActive]}>
                       <react_native_1.Text style={[styles.typePillText,i&&styles.typePillTextActive]}>
                         {e.toUpperCase()}
                       </react_native_1.Text>
@@ -181,25 +185,25 @@
 
             
             <react_native_1.View style={styles.inputGroup}>
-              <react_native_1.Text style={styles.inputLabel}>VALUE CONTENT</react_native_1.Text>
-              <react_native_1.TextInput value={f}onChangeText={e=>{A(e),w&&c(null)}}placeholder={d==="json"?'{"userId": 123, "isLoggedIn": true}':d==="number"?"42":d==="boolean"?"true":"String value..."}placeholderTextColor={AppColors_1.AppColors.grayTextWeak}style={[styles.textInput,styles.textAreaInput]}multiline textAlignVertical="top"autoCapitalize="none"/>
-              {w&&<react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:5,marginTop:4}}>
+              <react_native_1.Text style={styles.inputLabel}>{r("storage.valueContent","VALUE CONTENT").toUpperCase()}</react_native_1.Text>
+              <react_native_1.TextInput value={m}onChangeText={e=>{h(e),V&&c(null)}}placeholder={u==="json"?'{"userId": 123, "isLoggedIn": true}':u==="number"?"42":u==="boolean"?"true":"String value..."}placeholderTextColor={AppColors_1.AppColors.grayTextWeak}style={[styles.textInput,styles.textAreaInput]}multiline textAlignVertical="top"autoCapitalize="none"/>
+              {V&&<react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:5,marginTop:4}}>
                   <NetworkIcons_1.WarningTriangleIcon size={12}color={AppColors_1.AppColors.errorColor}/>
-                  <react_native_1.Text style={styles.errorText}>{w}</react_native_1.Text>
+                  <react_native_1.Text style={styles.errorText}>{V}</react_native_1.Text>
                 </react_native_1.View>}
             </react_native_1.View>
 
             
             <react_native_1.View style={styles.modalActions}>
               <TouchableScale_1.default onPress={()=>y(!1)}style={styles.cancelBtn}>
-                <react_native_1.Text style={styles.cancelBtnText}>Cancel</react_native_1.Text>
+                <react_native_1.Text style={styles.cancelBtnText}>{r("common.cancel","Cancel")}</react_native_1.Text>
               </TouchableScale_1.default>
-              <TouchableScale_1.default onPress={R}style={styles.saveBtn}>
+              <TouchableScale_1.default onPress={W}style={styles.saveBtn}>
                 <NetworkIcons_1.CheckIcon size={14}color={AppColors_1.AppColors.white}/>
-                <react_native_1.Text style={styles.saveBtnText}>Save Key</react_native_1.Text>
+                <react_native_1.Text style={styles.saveBtnText}>{r("storage.saveKey","Save Key")}</react_native_1.Text>
               </TouchableScale_1.default>
             </react_native_1.View>
           </react_native_1.View>
         </react_native_1.View>
       </react_native_1.Modal>
-    </react_native_1.View>});const styles=react_native_1.StyleSheet.create({container:{flex:1,backgroundColor:AppColors_1.AppColors.grayBackground},driverTabsWrapper:{backgroundColor:AppColors_1.AppColors.primaryLight,borderBottomWidth:1,borderBottomColor:AppColors_1.AppColors.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:AppColors_1.AppColors.grayBackground,borderWidth:1,borderColor:AppColors_1.AppColors.grayBorderSecondary},driverTabPillActive:{backgroundColor:AppColors_1.AppColors.purple,borderColor:AppColors_1.AppColors.purple},driverTabText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:11.5,color:AppColors_1.AppColors.grayText},driverTabTextActive:{color:AppColors_1.AppColors.white},driverCountBadge:{backgroundColor:"rgba(255, 255, 255, 0.25)",paddingHorizontal:5,paddingVertical:1,borderRadius:6},driverCountText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9,color:AppColors_1.AppColors.white},instancePill:{paddingHorizontal:7,paddingVertical:3,borderRadius:6,backgroundColor:`${AppColors_1.AppColors.purple}14`,borderWidth:1,borderColor:`${AppColors_1.AppColors.purple}30`},instancePillActive:{backgroundColor:AppColors_1.AppColors.purple,borderColor:AppColors_1.AppColors.purple},instancePillText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10,color:AppColors_1.AppColors.purple},instancePillTextActive:{color:AppColors_1.AppColors.white},actionBar:{flexDirection:"row",alignItems:"center",paddingHorizontal:12,paddingVertical:8,backgroundColor:AppColors_1.AppColors.primaryLight,borderBottomWidth:1,borderBottomColor:AppColors_1.AppColors.dividerColor,gap:6},searchBar:{flex:1,flexDirection:"row",alignItems:"center",backgroundColor:AppColors_1.AppColors.grayBackground,borderRadius:8,paddingHorizontal:9,paddingVertical:react_native_1.Platform.OS==="ios"?6:2,borderWidth:1,borderColor:AppColors_1.AppColors.grayBorderSecondary,gap:6},searchInput:{flex:1,fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:12,color:AppColors_1.AppColors.primaryBlack,padding:0},addKeyBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:10,paddingVertical:6,borderRadius:8,backgroundColor:AppColors_1.AppColors.purple},addKeyBtnText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:11,color:AppColors_1.AppColors.white},actionIconBtn:{width:30,height:30,borderRadius:8,alignItems:"center",justifyContent:"center",backgroundColor:AppColors_1.AppColors.grayBackground,borderWidth:1,borderColor:AppColors_1.AppColors.grayBorderSecondary},statsStrip:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:5,backgroundColor:`${AppColors_1.AppColors.grayBorderSecondary}40`},statsText:{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:10,color:AppColors_1.AppColors.grayText},statsSubtext:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9.5,color:AppColors_1.AppColors.grayTextWeak},scrollArea:{flex:1},scrollContent:{padding:12,gap:10,paddingBottom:100},entryCard:{backgroundColor:AppColors_1.AppColors.primaryLight,borderRadius:10,borderWidth:1,borderColor:AppColors_1.AppColors.grayBorderSecondary,padding:10,gap:8,shadowColor:AppColors_1.AppColors.black,shadowOpacity:.02,shadowRadius:3,shadowOffset:{width:0,height:1},elevation:1},entryHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},entryKey:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:12.5,color:AppColors_1.AppColors.primaryBlack},typeBadge:{paddingHorizontal:5,paddingVertical:1,borderRadius:4,borderWidth:1},typeBadgeText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:8.5},sizeText:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:10,color:AppColors_1.AppColors.grayTextWeak},entryActions:{flexDirection:"row",alignItems:"center",gap:5},entryActionBtn:{padding:5,borderRadius:5,backgroundColor:AppColors_1.AppColors.grayBackground},valuePreviewBox:{backgroundColor:AppColors_1.AppColors.grayBackground,borderRadius:6,padding:8,borderWidth:1,borderColor:`${AppColors_1.AppColors.grayBorderSecondary}80`},valuePreviewText:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:11,color:AppColors_1.AppColors.primaryBlack,lineHeight:16},expandHint:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9.5,color:AppColors_1.AppColors.purple,marginTop:4},loadingContainer:{flex:1,alignItems:"center",justifyContent:"center",gap:8},loadingText:{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:12,color:AppColors_1.AppColors.grayText},emptyContainer:{padding:24,alignItems:"center",justifyContent:"center"},emptyIconWrap:{width:56,height:56,borderRadius:28,backgroundColor:`${AppColors_1.AppColors.grayBorderSecondary}40`,alignItems:"center",justifyContent:"center",marginBottom:12},emptyTitle:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:14,color:AppColors_1.AppColors.primaryBlack,marginBottom:4},emptySubtitle:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:11.5,color:AppColors_1.AppColors.grayText,textAlign:"center",maxWidth:280},connectGuideCard:{marginTop:20,width:"100%",backgroundColor:AppColors_1.AppColors.primaryLight,borderRadius:10,borderWidth:1,borderColor:AppColors_1.AppColors.grayBorderSecondary,padding:12,gap:6},connectGuideTitle:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:11,color:AppColors_1.AppColors.purple},connectGuideCode:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:10,color:AppColors_1.AppColors.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:AppColors_1.AppColors.primaryLight,borderRadius:14,padding:16,gap:12,shadowColor:AppColors_1.AppColors.black,shadowOpacity:.2,shadowRadius:10,shadowOffset:{width:0,height:4},elevation:5},modalHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",borderBottomWidth:1,borderBottomColor:AppColors_1.AppColors.dividerColor,paddingBottom:10},modalTitle:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:14,color:AppColors_1.AppColors.primaryBlack},inputGroup:{gap:4},inputLabel:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9.5,color:AppColors_1.AppColors.grayTextWeak,letterSpacing:.5},textInput:{backgroundColor:AppColors_1.AppColors.grayBackground,borderRadius:8,paddingHorizontal:10,paddingVertical:8,fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:12,color:AppColors_1.AppColors.primaryBlack,borderWidth:1,borderColor:AppColors_1.AppColors.grayBorderSecondary},textInputDisabled:{backgroundColor:`${AppColors_1.AppColors.grayBorderSecondary}40`,color:AppColors_1.AppColors.grayText},textAreaInput:{minHeight:90,maxHeight:160,fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:11},typeSelectorStrip:{flexDirection:"row",alignItems:"center",gap:6},typePill:{flex:1,alignItems:"center",paddingVertical:6,borderRadius:6,backgroundColor:AppColors_1.AppColors.grayBackground,borderWidth:1,borderColor:AppColors_1.AppColors.grayBorderSecondary},typePillActive:{backgroundColor:AppColors_1.AppColors.purple,borderColor:AppColors_1.AppColors.purple},typePillText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10,color:AppColors_1.AppColors.grayText},typePillTextActive:{color:AppColors_1.AppColors.white},formatJsonBtn:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10,color:AppColors_1.AppColors.purple},errorText:{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:10,color:AppColors_1.AppColors.errorColor,marginTop:2},modalActions:{flexDirection:"row",alignItems:"center",gap:10,marginTop:4},cancelBtn:{flex:1,alignItems:"center",paddingVertical:10,borderRadius:8,backgroundColor:AppColors_1.AppColors.grayBackground,borderWidth:1,borderColor:AppColors_1.AppColors.grayBorderSecondary},cancelBtnText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:12,color:AppColors_1.AppColors.grayText},saveBtn:{flex:1.5,flexDirection:"row",alignItems:"center",justifyContent:"center",gap:5,paddingVertical:10,borderRadius:8,backgroundColor:AppColors_1.AppColors.purple},saveBtnText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:12,color:AppColors_1.AppColors.white}});exports.default=exports.StorageTab;
+    </react_native_1.View>});const styles=react_native_1.StyleSheet.create({container:{flex:1,backgroundColor:AppColors_1.AppColors.grayBackground},driverTabsWrapper:{backgroundColor:AppColors_1.AppColors.primaryLight,borderBottomWidth:1,borderBottomColor:AppColors_1.AppColors.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:AppColors_1.AppColors.grayBackground,borderWidth:1,borderColor:AppColors_1.AppColors.grayBorderSecondary},driverTabPillActive:{backgroundColor:AppColors_1.AppColors.purple,borderColor:AppColors_1.AppColors.purple},driverTabText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10.5,color:AppColors_1.AppColors.grayText},driverTabTextActive:{color:AppColors_1.AppColors.white},driverCountBadge:{backgroundColor:"rgba(255, 255, 255, 0.25)",paddingHorizontal:5,paddingVertical:1,borderRadius:8},driverCountText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9.5,color:AppColors_1.AppColors.white},instancePill:{paddingHorizontal:7,paddingVertical:3,borderRadius:6,backgroundColor:`${AppColors_1.AppColors.purple}14`,borderWidth:1,borderColor:`${AppColors_1.AppColors.purple}30`},instancePillActive:{backgroundColor:AppColors_1.AppColors.purple,borderColor:AppColors_1.AppColors.purple},instancePillText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10,color:AppColors_1.AppColors.purple},instancePillTextActive:{color:AppColors_1.AppColors.white},actionBar:{flexDirection:"row",alignItems:"center",paddingHorizontal:12,paddingVertical:8,backgroundColor:AppColors_1.AppColors.primaryLight,borderBottomWidth:1,borderBottomColor:AppColors_1.AppColors.dividerColor,gap:6},searchBar:{flex:1,flexDirection:"row",alignItems:"center",backgroundColor:AppColors_1.AppColors.grayBackground,borderRadius:8,paddingHorizontal:9,paddingVertical:react_native_1.Platform.OS==="ios"?6:2,borderWidth:1,borderColor:AppColors_1.AppColors.grayBorderSecondary,gap:6},searchInput:{flex:1,fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:12,color:AppColors_1.AppColors.primaryBlack,padding:0},addKeyBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:10,paddingVertical:6,borderRadius:8,backgroundColor:AppColors_1.AppColors.purple},addKeyBtnText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:11,color:AppColors_1.AppColors.white},actionIconBtn:{width:30,height:30,borderRadius:8,alignItems:"center",justifyContent:"center",backgroundColor:AppColors_1.AppColors.grayBackground,borderWidth:1,borderColor:AppColors_1.AppColors.grayBorderSecondary},statsStrip:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:5,backgroundColor:`${AppColors_1.AppColors.grayBorderSecondary}40`},statsText:{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:10,color:AppColors_1.AppColors.grayText},statsSubtext:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9.5,color:AppColors_1.AppColors.grayTextWeak},scrollArea:{flex:1},scrollContent:{padding:12,gap:10,paddingBottom:100},emptyScrollContent:{flexGrow:1,justifyContent:"center",alignItems:"center",padding:24,paddingBottom:60},entryCard:{backgroundColor:AppColors_1.AppColors.primaryLight,borderRadius:10,borderWidth:1,borderColor:AppColors_1.AppColors.grayBorderSecondary,padding:10,gap:8,shadowColor:AppColors_1.AppColors.black,shadowOpacity:.02,shadowRadius:3,shadowOffset:{width:0,height:1},elevation:1},entryHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},entryKey:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:12.5,color:AppColors_1.AppColors.primaryBlack},typeBadge:{paddingHorizontal:5,paddingVertical:1,borderRadius:4,borderWidth:1},typeBadgeText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:8.5},sizeText:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:10,color:AppColors_1.AppColors.grayTextWeak},entryActions:{flexDirection:"row",alignItems:"center",gap:5},entryActionBtn:{padding:5,borderRadius:5,backgroundColor:AppColors_1.AppColors.grayBackground},valuePreviewBox:{backgroundColor:AppColors_1.AppColors.grayBackground,borderRadius:6,padding:8,borderWidth:1,borderColor:`${AppColors_1.AppColors.grayBorderSecondary}80`},valuePreviewText:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:11,color:AppColors_1.AppColors.primaryBlack,lineHeight:16},expandHint:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9.5,color:AppColors_1.AppColors.purple,marginTop:4},loadingContainer:{flex:1,alignItems:"center",justifyContent:"center",gap:8},loadingText:{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:12,color:AppColors_1.AppColors.grayText},emptyContainer:{padding:24,alignItems:"center",justifyContent:"center"},emptyIconWrap:{width:56,height:56,borderRadius:28,backgroundColor:`${AppColors_1.AppColors.grayBorderSecondary}40`,alignItems:"center",justifyContent:"center",marginBottom:12},emptyTitle:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:14,color:AppColors_1.AppColors.primaryBlack,marginBottom:4},emptySubtitle:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:11.5,color:AppColors_1.AppColors.grayText,textAlign:"center",maxWidth:280},connectGuideCard:{marginTop:20,width:"100%",backgroundColor:AppColors_1.AppColors.primaryLight,borderRadius:10,borderWidth:1,borderColor:AppColors_1.AppColors.grayBorderSecondary,padding:12,gap:6},connectGuideTitle:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:11,color:AppColors_1.AppColors.purple},connectGuideCode:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:10,color:AppColors_1.AppColors.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:AppColors_1.AppColors.primaryLight,borderRadius:14,padding:16,gap:12,shadowColor:AppColors_1.AppColors.black,shadowOpacity:.2,shadowRadius:10,shadowOffset:{width:0,height:4},elevation:5},modalHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",borderBottomWidth:1,borderBottomColor:AppColors_1.AppColors.dividerColor,paddingBottom:10},modalTitle:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:14,color:AppColors_1.AppColors.primaryBlack},inputGroup:{gap:4},inputLabel:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9.5,color:AppColors_1.AppColors.grayTextWeak,letterSpacing:.5},textInput:{backgroundColor:AppColors_1.AppColors.grayBackground,borderRadius:8,paddingHorizontal:10,paddingVertical:8,fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:12,color:AppColors_1.AppColors.primaryBlack,borderWidth:1,borderColor:AppColors_1.AppColors.grayBorderSecondary},textInputDisabled:{backgroundColor:`${AppColors_1.AppColors.grayBorderSecondary}40`,color:AppColors_1.AppColors.grayText},textAreaInput:{minHeight:90,maxHeight:160,fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:11},typeSelectorStrip:{flexDirection:"row",alignItems:"center",gap:6},typePill:{flex:1,alignItems:"center",paddingVertical:6,borderRadius:6,backgroundColor:AppColors_1.AppColors.grayBackground,borderWidth:1,borderColor:AppColors_1.AppColors.grayBorderSecondary},typePillActive:{backgroundColor:AppColors_1.AppColors.purple,borderColor:AppColors_1.AppColors.purple},typePillText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10,color:AppColors_1.AppColors.grayText},typePillTextActive:{color:AppColors_1.AppColors.white},formatJsonBtn:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10,color:AppColors_1.AppColors.purple},errorText:{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:10,color:AppColors_1.AppColors.errorColor,marginTop:2},modalActions:{flexDirection:"row",alignItems:"center",gap:10,marginTop:4},cancelBtn:{flex:1,alignItems:"center",paddingVertical:10,borderRadius:8,backgroundColor:AppColors_1.AppColors.grayBackground,borderWidth:1,borderColor:AppColors_1.AppColors.grayBorderSecondary},cancelBtnText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:12,color:AppColors_1.AppColors.grayText},saveBtn:{flex:1.5,flexDirection:"row",alignItems:"center",justifyContent:"center",gap:5,paddingVertical:10,borderRadius:8,backgroundColor:AppColors_1.AppColors.purple},saveBtnText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:12,color:AppColors_1.AppColors.white}});exports.default=exports.StorageTab;

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

@@ -1,51 +1,55 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(t,o,n,r){r===void 0&&(r=n);var i=Object.getOwnPropertyDescriptor(o,n);(!i||("get"in i?!o.__esModule:i.writable||i.configurable))&&(i={enumerable:!0,get:function(){return o[n]}}),Object.defineProperty(t,r,i)}):(function(t,o,n,r){r===void 0&&(r=n),t[r]=o[n]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(t,o){Object.defineProperty(t,"default",{enumerable:!0,value:o})}):function(t,o){t.default=o}),__importStar=this&&this.__importStar||(function(){var t=function(o){return t=Object.getOwnPropertyNames||function(n){var r=[];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(r[r.length]=i);return r},t(o)};return function(o){if(o&&o.__esModule)return o;var n={};if(o!=null)for(var r=t(o),i=0;i<r.length;i++)r[i]!=="default"&&__createBinding(n,o,r[i]);return __setModuleDefault(n,o),n}})(),__importDefault=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(exports,"__esModule",{value:!0});const react_1=__importStar(require("react")),react_native_1=require("react-native"),InspectorContext_1=require("./InspectorContext"),styles_1=__importDefault(require("../../styles")),AppColors_1=require("../../styles/AppColors"),AppFonts_1=require("../../styles/AppFonts"),TouchableScale_1=__importDefault(require("../TouchableScale")),NetworkIcons_1=require("../NetworkIcons"),reduxLogger_1=require("../../customHooks/reduxLogger"),analyticsLogger_1=require("../../customHooks/analyticsLogger"),helpers_1=require("../../helpers"),TabBar=react_1.default.memo(()=>{const{activeTab:t,switchActiveTab:o,tabVisibility:n,logs:r,consoleLogs:i,analyticsEvents:w,crashRecords:f,lastReadApisCount:A,lastReadLogsCount:m,lastReadCrashesCount:S,mediaCount:y}=(0,InspectorContext_1.useInspector)(),x=(0,reduxLogger_1.isReduxConnected)(),I=(0,analyticsLogger_1.isAnalyticsConnected)(),s=t==="media",p=(n?.media??!0)&&y>0,C=(0,react_1.useRef)(null),[g,T]=(0,react_1.useState)(!1),[_,R]=(0,react_1.useState)(!0),b=(0,react_1.useRef)(0),k=e=>{const{contentOffset:c,layoutMeasurement:l,contentSize:h}=e.nativeEvent,a=c.x;b.current=a;const u=a>8,d=a<h.width-l.width-8;g!==u&&T(u),_!==d&&R(d)},v=e=>{C.current?.scrollTo({x:Math.max(0,b.current+e),animated:!0})};return<react_native_1.View style={[styles_1.default.tabBarContainer,{flexDirection:"row",alignItems:"center",paddingHorizontal:0}]}>
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(t,o,n,r){r===void 0&&(r=n);var i=Object.getOwnPropertyDescriptor(o,n);(!i||("get"in i?!o.__esModule:i.writable||i.configurable))&&(i={enumerable:!0,get:function(){return o[n]}}),Object.defineProperty(t,r,i)}):(function(t,o,n,r){r===void 0&&(r=n),t[r]=o[n]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(t,o){Object.defineProperty(t,"default",{enumerable:!0,value:o})}):function(t,o){t.default=o}),__importStar=this&&this.__importStar||(function(){var t=function(o){return t=Object.getOwnPropertyNames||function(n){var r=[];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(r[r.length]=i);return r},t(o)};return function(o){if(o&&o.__esModule)return o;var n={};if(o!=null)for(var r=t(o),i=0;i<r.length;i++)r[i]!=="default"&&__createBinding(n,o,r[i]);return __setModuleDefault(n,o),n}})(),__importDefault=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(exports,"__esModule",{value:!0});const react_1=__importStar(require("react")),react_native_1=require("react-native"),InspectorContext_1=require("./InspectorContext"),styles_1=__importDefault(require("../../styles")),AppColors_1=require("../../styles/AppColors"),AppFonts_1=require("../../styles/AppFonts"),TouchableScale_1=__importDefault(require("../TouchableScale")),NetworkIcons_1=require("../NetworkIcons"),reduxLogger_1=require("../../customHooks/reduxLogger"),analyticsLogger_1=require("../../customHooks/analyticsLogger"),helpers_1=require("../../helpers"),HEADER_TAB_THEME={themeColor:AppColors_1.AppColors.brandPurple,bgInactive:`${AppColors_1.AppColors.brandPurple}0D`,borderInactive:`${AppColors_1.AppColors.brandPurple}2B`,iconInactive:AppColors_1.AppColors.brandPurple,idBadgeBg:`${AppColors_1.AppColors.brandPurple}1C`,idBadgeBorder:`${AppColors_1.AppColors.brandPurple}3D`,idBadgeText:AppColors_1.AppColors.brandPurple},TAB_THEMES={apis:HEADER_TAB_THEME,logs:HEADER_TAB_THEME,analytics:HEADER_TAB_THEME,redux:HEADER_TAB_THEME,storage:HEADER_TAB_THEME,device:HEADER_TAB_THEME,crash:HEADER_TAB_THEME,push:HEADER_TAB_THEME,debugging:HEADER_TAB_THEME,media:HEADER_TAB_THEME},TabBar=react_1.default.memo(()=>{const{activeTab:t,switchActiveTab:o,tabVisibility:n,logs:r,consoleLogs:i,analyticsEvents:A,crashRecords:f,pushRecords:y,unreadPushCount:m,lastReadApisCount:S,lastReadLogsCount:I,lastReadCrashesCount:x,mediaCount:C}=(0,InspectorContext_1.useInspector)(),T=(0,reduxLogger_1.isReduxConnected)(),B=(0,analyticsLogger_1.isAnalyticsConnected)(),c=t==="media",g=(n?.media??!0)&&C>0,b=(0,react_1.useRef)(null),[h,R]=(0,react_1.useState)(!1),[_,P]=(0,react_1.useState)(!0),w=(0,react_1.useRef)(0),k=e=>{const{contentOffset:a,layoutMeasurement:l,contentSize:s}=e.nativeEvent,d=a.x;w.current=d;const u=d>8,p=d<s.width-l.width-8;h!==u&&R(u),_!==p&&P(p)},v=e=>{b.current?.scrollTo({x:Math.max(0,w.current+e),animated:!0})};return<react_native_1.View style={[styles_1.default.tabBarContainer,{flexDirection:"row",alignItems:"center",paddingHorizontal:0}]}>
       
-      {g&&<react_native_1.TouchableOpacity onPress={()=>v(-160)}hitSlop={{top:6,bottom:6,left:6,right:6}}activeOpacity={.7}style={{paddingLeft:6,paddingRight:2,justifyContent:"center",alignItems:"center"}}>
+      {h&&<react_native_1.TouchableOpacity onPress={()=>v(-160)}hitSlop={{top:6,bottom:6,left:6,right:6}}activeOpacity={.7}style={{paddingLeft:6,paddingRight:2,justifyContent:"center",alignItems:"center"}}>
           <react_native_1.View style={{width:22,height:22,borderRadius:11,backgroundColor:AppColors_1.AppColors.grayBorderSecondary,alignItems:"center",justifyContent:"center"}}>
-            <NetworkIcons_1.ChevronIcon direction="left"size={13}color={AppColors_1.AppColors.purple}/>
+            <NetworkIcons_1.ChevronIcon direction="left"size={13}color={AppColors_1.AppColors.grayTextStrong}/>
           </react_native_1.View>
         </react_native_1.TouchableOpacity>}
 
       
-      <react_native_1.ScrollView ref={C}horizontal showsHorizontalScrollIndicator={!1}onScroll={k}scrollEventThrottle={16}style={{flex:1}}contentContainerStyle={{paddingLeft:g?4:12,paddingRight:p?6:12}}>
-        {[{id:1,key:"apis",label:"APIs",count:r.length,icon:"apis"},{id:2,key:"logs",label:"Logs",count:i.length,icon:"logs"},{id:3,key:"analytics",label:"Analytics",count:w.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:f?.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"?react_native_1.Platform.OS==="android"&&(0,helpers_1.isLocalDebugEnvironment)()&&!!n?.debugging:!(!n?.[e.key]||e.key==="redux"&&!x||e.key==="analytics"&&!I)).map(e=>{const c=t===e.key,l=c?AppColors_1.AppColors.white:e.key==="crash"&&e.count>0?AppColors_1.AppColors.errorColor:AppColors_1.AppColors.grayText,h=e.count>9?"9+":String(e.count),a=t!=="apis"&&r.length>A,u=t!=="logs"&&i.length>m,d=t!=="crash"&&(f?.length||0)>(S||0);return<TouchableScale_1.default key={e.key}onPress={()=>{o(e.key)}}style={[styles_1.default.contentTabButton,c&&styles_1.default.contentTabButtonActive]}>
+      <react_native_1.ScrollView ref={b}horizontal showsHorizontalScrollIndicator={!1}onScroll={k}scrollEventThrottle={16}style={{flex:1}}contentContainerStyle={{paddingLeft:h?4:12,paddingRight:g?6:12}}>
+        {[{id:1,key:"apis",label:"APIs",count:r.length,icon:"apis"},{id:2,key:"logs",label:"Logs",count:i.length,icon:"logs"},{id:3,key:"analytics",label:"Analytics",count:A.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:f?.length||0,icon:"crash"},{id:8,key:"push",label:"Push",count:y?.length||0,icon:"push"},{id:9,key:"debugging",label:"Debugging",count:0,icon:"debugging"}].filter(e=>e.key==="debugging"?react_native_1.Platform.OS==="android"&&(0,helpers_1.isLocalDebugEnvironment)()&&!!n?.debugging:!(!n?.[e.key]||e.key==="redux"&&!T||e.key==="analytics"&&!B)).map(e=>{const a=t===e.key,l=TAB_THEMES[e.key]||TAB_THEMES.apis,s=a?AppColors_1.AppColors.white:l.iconInactive,d=e.count>99?"99+":String(e.count),u=t!=="apis"&&r.length>S,p=t!=="logs"&&i.length>I,O=t!=="crash"&&(f?.length||0)>(x||0);return<TouchableScale_1.default key={e.key}onPress={()=>{o(e.key)}}style={[styles_1.default.contentTabButton,{backgroundColor:a?l.themeColor:l.bgInactive,borderColor:a?l.themeColor:l.borderInactive},a&&{shadowColor:l.themeColor,shadowOffset:{width:0,height:2},shadowOpacity:.28,shadowRadius:3.5,elevation:3}]}>
                 <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:6}}>
-                  {e.icon==="apis"&&<NetworkIcons_1.SignalIcon color={l}size={14}/>}
-                  {e.icon==="logs"&&<NetworkIcons_1.TerminalIcon color={l}size={14}/>}
-                  {e.icon==="analytics"&&<NetworkIcons_1.AnalyticsIcon color={l}size={14}/>}
-                  {e.icon==="redux"&&<NetworkIcons_1.ReduxIcon color={l}size={14}/>}
-                  {e.icon==="storage"&&<NetworkIcons_1.DatabaseIcon color={l}size={14}/>}
-                  {e.icon==="device"&&<NetworkIcons_1.SmartphoneIcon color={l}size={14}/>}
-                  {e.icon==="crash"&&<NetworkIcons_1.CrashIcon color={l}size={14}/>}
-                  {e.icon==="bundle"&&<NetworkIcons_1.PackageIcon color={l}size={14}/>}
-                  {e.icon==="performance"&&<NetworkIcons_1.PerformanceIcon color={l}size={14}/>}
-                  {e.icon==="debugging"&&<NetworkIcons_1.QrCodeIcon color={l}size={14}/>}
-                  <react_native_1.View style={{minWidth:20,height:20,paddingHorizontal:4,borderRadius:10,backgroundColor:c?`${AppColors_1.AppColors.white}33`:`${AppColors_1.AppColors.purple}1F`,borderWidth:1,borderColor:c?`${AppColors_1.AppColors.white}66`:`${AppColors_1.AppColors.purple}40`,alignItems:"center",justifyContent:"center"}}>
-                    <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9.5,lineHeight:12,color:c?AppColors_1.AppColors.white:AppColors_1.AppColors.purple}}>
+                  {e.icon==="apis"&&<NetworkIcons_1.SignalIcon color={s}size={14}/>}
+                  {e.icon==="logs"&&<NetworkIcons_1.TerminalIcon color={s}size={14}/>}
+                  {e.icon==="analytics"&&<NetworkIcons_1.AnalyticsIcon color={s}size={14}/>}
+                  {e.icon==="redux"&&<NetworkIcons_1.ReduxIcon color={s}size={14}/>}
+                  {e.icon==="storage"&&<NetworkIcons_1.DatabaseIcon color={s}size={14}/>}
+                  {e.icon==="device"&&<NetworkIcons_1.SmartphoneIcon color={s}size={14}/>}
+                  {e.icon==="crash"&&<NetworkIcons_1.CrashIcon color={s}size={14}/>}
+                  {e.icon==="push"&&<NetworkIcons_1.BellIcon color={s}size={14}/>}
+                  {e.icon==="debugging"&&<NetworkIcons_1.QrCodeIcon color={s}size={14}/>}
+                  <react_native_1.View style={{minWidth:20,height:20,paddingHorizontal:4,borderRadius:10,backgroundColor:a?`${AppColors_1.AppColors.white}33`:l.idBadgeBg,borderWidth:1,borderColor:a?`${AppColors_1.AppColors.white}66`:l.idBadgeBorder,alignItems:"center",justifyContent:"center"}}>
+                    <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9.5,lineHeight:12,color:a?AppColors_1.AppColors.white:l.idBadgeText}}>
                       #{e.id}
                     </react_native_1.Text>
                   </react_native_1.View>
-                  <react_native_1.Text numberOfLines={1}ellipsizeMode="tail"style={[styles_1.default.contentTabButtonText,c&&styles_1.default.contentTabButtonTextActive]}>
-                    {e.label} {e.count>0?`(${h})`:""}
+                  <react_native_1.Text numberOfLines={1}ellipsizeMode="tail"style={[styles_1.default.contentTabButtonText,{color:a?AppColors_1.AppColors.white:AppColors_1.AppColors.grayTextStrong,fontFamily:a?AppFonts_1.AppFonts.interBold:AppFonts_1.AppFonts.interSemiBold}]}>
+                    {e.label}
                   </react_native_1.Text>
-                  {(e.key==="apis"&&a||e.key==="logs"&&u||e.key==="crash"&&d)&&<react_native_1.View style={{width:6,height:6,borderRadius:3,backgroundColor:AppColors_1.AppColors.errorColor,marginLeft:4,alignSelf:"center"}}/>}
+                  {e.count>0&&e.key!=="push"&&<react_native_1.View style={{paddingHorizontal:5,paddingVertical:1,borderRadius:8,backgroundColor:a?"rgba(255,255,255,0.25)":l.idBadgeBg,borderWidth:.5,borderColor:a?"rgba(255,255,255,0.45)":l.idBadgeBorder,marginLeft:1,alignItems:"center",justifyContent:"center"}}>
+                      <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9.5,lineHeight:12,color:a?AppColors_1.AppColors.white:l.themeColor}}>
+                        {d}
+                      </react_native_1.Text>
+                    </react_native_1.View>}
+                  {(e.key==="apis"&&u||e.key==="logs"&&p||e.key==="crash"&&O||e.key==="push"&&((y?.length||0)>0||m>0))&&<react_native_1.View style={{width:6,height:6,borderRadius:3,backgroundColor:AppColors_1.AppColors.errorColor,marginLeft:4,alignSelf:"center"}}/>}
                 </react_native_1.View>
               </TouchableScale_1.default>})}
       </react_native_1.ScrollView>
 
       
-      {_&&<react_native_1.TouchableOpacity onPress={()=>v(160)}hitSlop={{top:6,bottom:6,left:6,right:6}}activeOpacity={.7}style={{paddingLeft:2,paddingRight:p?4:8,justifyContent:"center",alignItems:"center"}}>
+      {_&&<react_native_1.TouchableOpacity onPress={()=>v(160)}hitSlop={{top:6,bottom:6,left:6,right:6}}activeOpacity={.7}style={{paddingLeft:2,paddingRight:g?4:8,justifyContent:"center",alignItems:"center"}}>
           <react_native_1.View style={{width:22,height:22,borderRadius:11,backgroundColor:AppColors_1.AppColors.grayBorderSecondary,alignItems:"center",justifyContent:"center"}}>
-            <NetworkIcons_1.ChevronIcon direction="right"size={13}color={AppColors_1.AppColors.purple}/>
+            <NetworkIcons_1.ChevronIcon direction="right"size={13}color={AppColors_1.AppColors.grayTextStrong}/>
           </react_native_1.View>
         </react_native_1.TouchableOpacity>}
 
       
-      {p&&<react_native_1.View style={{paddingLeft:6,paddingRight:10,borderLeftWidth:1,borderLeftColor:AppColors_1.AppColors.dividerColor,backgroundColor:AppColors_1.AppColors.primaryLight,justifyContent:"center",shadowColor:AppColors_1.AppColors.shadowColorString,shadowOffset:{width:-3,height:0},shadowOpacity:.12,shadowRadius:4,elevation:4,zIndex:10}}>
-          <TouchableScale_1.default key="media"onPress={()=>{o("media")}}accessibilityRole="button"accessibilityLabel="Media Gallery"style={[styles_1.default.contentTabButton,{marginRight:0,borderRadius:8,backgroundColor:s?AppColors_1.AppColors.purple:AppColors_1.AppColors.graySurface,borderColor:s?AppColors_1.AppColors.purple:AppColors_1.AppColors.dividerColor,borderWidth:1,paddingHorizontal:10,paddingVertical:7,alignItems:"center",justifyContent:"center"},s&&styles_1.default.contentTabButtonActive]}>
+      {g&&<react_native_1.View style={{paddingLeft:6,paddingRight:10,borderLeftWidth:1,borderLeftColor:AppColors_1.AppColors.dividerColor,backgroundColor:AppColors_1.AppColors.primaryLight,justifyContent:"center",shadowColor:AppColors_1.AppColors.shadowColorString,shadowOffset:{width:-3,height:0},shadowOpacity:.12,shadowRadius:4,elevation:4,zIndex:10}}>
+          <TouchableScale_1.default key="media"onPress={()=>{o("media")}}accessibilityRole="button"accessibilityLabel="Media Gallery"style={[styles_1.default.contentTabButton,{marginRight:0,borderRadius:8,backgroundColor:c?AppColors_1.AppColors.brandPurple:`${AppColors_1.AppColors.brandPurple}0D`,borderColor:c?AppColors_1.AppColors.brandPurple:`${AppColors_1.AppColors.brandPurple}2B`,borderWidth:1,paddingHorizontal:10,paddingVertical:7,alignItems:"center",justifyContent:"center"},c&&{shadowColor:AppColors_1.AppColors.brandPurple,shadowOffset:{width:0,height:2},shadowOpacity:.28,shadowRadius:3.5,elevation:3}]}>
             <react_native_1.View style={{position:"relative",alignItems:"center",justifyContent:"center"}}>
-              <NetworkIcons_1.ScreencastIcon color={s?AppColors_1.AppColors.white:AppColors_1.AppColors.grayText}size={15}/>
-              {y>0&&<react_native_1.View style={{position:"absolute",top:-3,right:-4,width:7,height:7,borderRadius:3.5,backgroundColor:s?AppColors_1.AppColors.emerald400:AppColors_1.AppColors.purple,borderWidth:1.2,borderColor:s?AppColors_1.AppColors.purple:AppColors_1.AppColors.white}}/>}
+              <NetworkIcons_1.ScreencastIcon color={c?AppColors_1.AppColors.white:AppColors_1.AppColors.brandPurple}size={15}/>
+              {C>0&&<react_native_1.View style={{position:"absolute",top:-3,right:-4,width:7,height:7,borderRadius:3.5,backgroundColor:c?AppColors_1.AppColors.white:AppColors_1.AppColors.brandPurple,borderWidth:1.2,borderColor:c?AppColors_1.AppColors.brandPurple:AppColors_1.AppColors.white}}/>}
             </react_native_1.View>
           </TouchableScale_1.default>
         </react_native_1.View>}

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

@@ -1,4 +1,4 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(t,e,a,o){o===void 0&&(o=a);var r=Object.getOwnPropertyDescriptor(e,a);(!r||("get"in r?!e.__esModule:r.writable||r.configurable))&&(r={enumerable:!0,get:function(){return e[a]}}),Object.defineProperty(t,o,r)}):(function(t,e,a,o){o===void 0&&(o=a),t[o]=e[a]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(t,e){Object.defineProperty(t,"default",{enumerable:!0,value:e})}):function(t,e){t.default=e}),__importStar=this&&this.__importStar||(function(){var t=function(e){return t=Object.getOwnPropertyNames||function(a){var o=[];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(o[o.length]=r);return o},t(e)};return function(e){if(e&&e.__esModule)return e;var a={};if(e!=null)for(var o=t(e),r=0;r<o.length;r++)o[r]!=="default"&&__createBinding(a,e,o[r]);return __setModuleDefault(a,e),a}})();Object.defineProperty(exports,"__esModule",{value:!0}),exports.UpdateAvailableModal=void 0;const react_1=__importStar(require("react")),react_native_1=require("react-native"),react_native_svg_1=__importStar(require("react-native-svg")),BrandSquareIcon_1=require("../BrandSquareIcon"),NetworkIcons_1=require("../NetworkIcons"),constants_1=require("../../constants"),helpers_1=require("../../helpers"),toast_1=require("../../helpers/toast"),AppFonts_1=require("../../styles/AppFonts"),AppColors_1=require("../../styles/AppColors"),CopySvg=({size:t=14,color:e=AppColors_1.AppColors.grayTextWeak})=><react_native_svg_1.default width={t}height={t}viewBox="0 0 24 24"fill="none">
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(t,e,a,o){o===void 0&&(o=a);var r=Object.getOwnPropertyDescriptor(e,a);(!r||("get"in r?!e.__esModule:r.writable||r.configurable))&&(r={enumerable:!0,get:function(){return e[a]}}),Object.defineProperty(t,o,r)}):(function(t,e,a,o){o===void 0&&(o=a),t[o]=e[a]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(t,e){Object.defineProperty(t,"default",{enumerable:!0,value:e})}):function(t,e){t.default=e}),__importStar=this&&this.__importStar||(function(){var t=function(e){return t=Object.getOwnPropertyNames||function(a){var o=[];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(o[o.length]=r);return o},t(e)};return function(e){if(e&&e.__esModule)return e;var a={};if(e!=null)for(var o=t(e),r=0;r<o.length;r++)o[r]!=="default"&&__createBinding(a,e,o[r]);return __setModuleDefault(a,e),a}})();Object.defineProperty(exports,"__esModule",{value:!0}),exports.UpdateAvailableModal=void 0;const react_1=__importStar(require("react")),react_native_1=require("react-native"),react_native_svg_1=__importStar(require("react-native-svg")),BrandCircleIcon_1=require("../BrandCircleIcon"),NetworkIcons_1=require("../NetworkIcons"),constants_1=require("../../constants"),helpers_1=require("../../helpers"),toast_1=require("../../helpers/toast"),AppFonts_1=require("../../styles/AppFonts"),AppColors_1=require("../../styles/AppColors"),CopySvg=({size:t=14,color:e=AppColors_1.AppColors.grayTextWeak})=><react_native_svg_1.default width={t}height={t}viewBox="0 0 24 24"fill="none">
     <react_native_svg_1.Path 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={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
     <react_native_svg_1.Path 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={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
   </react_native_svg_1.default>,CheckSvg=({size:t=14,color:e=AppColors_1.AppColors.emerald500})=><react_native_svg_1.default width={t}height={t}viewBox="0 0 24 24"fill="none">
@@ -24,7 +24,7 @@
           
           <react_native_1.View style={styles.headerSection}>
             <react_native_1.View style={styles.iconHaloRing}>
-              <BrandSquareIcon_1.BrandSquareIcon size={38}/>
+              <BrandCircleIcon_1.BrandCircleIcon size={38}/>
               <react_native_1.View style={styles.sparkleBadge}>
                 <SparkleSvg size={13}color={AppColors_1.AppColors.amber500}/>
               </react_native_1.View>