react-native-inapp-inspector 2.4.0 → 2.4.2

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

@@ -0,0 +1,112 @@
+import ce,{useCallback as b,useMemo as P,useRef as Ve,useState as B}from"react";import{FlatList as Ae,Platform as Le,Pressable as De,ScrollView as Pe,Share as ve,StyleSheet as Ee,Text as T,TextInput as Oe,TouchableOpacity as E,View as S}from"react-native";import{useInspector as Me}from"./InspectorContext";import $e from"./SocketCard";import He,{DEFAULT_SOCKET_FILTERS as _e,isSocketFiltersDefault as O}from"./SocketFilterModal";import{ConfirmationModal as Ue}from"./ConfirmationModal";import A from"../TouchableScale";import Ne from"../AnimatedEntrance";import Qe from"../EmptyState";import Ke from"../EndOfListFooter";import k from"../../styles";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as x}from"../../styles/AppFonts";import{useTranslation as qe}from"../../i18n";import{copyToClipboard as Ge}from"../../helpers";import{showToast as M}from"../../helpers/toast";import{ClearIcon as Je,SearchIcon as Xe,TrashIcon as Se,WebsocketIcon as Ye,BoltIcon as U,FilterIcon as Ze,GlobeIcon as St,LockIcon as Ct,ClockIcon as Tt,FailIcon as Bt,CopyIcon as It,ShareIcon as Rt}from"../NetworkIcons";const Wt=10,Ft=ce.memo(()=>{const{t:s}=qe(),{socketRecords:R,filteredSocketRecords:j,socketSearch:C,setSocketSearch:$,socketQuickFilter:z,setSocketQuickFilter:N,setSelectedSocket:Q,clearAllSocketLogs:K,deleteMultipleSocketRecords:q,simulateSocket:G,maxSocketLogs:H}=Me(),ye=H||50,J=Ve(null),[X,be]=B(0),[L,Y]=B(ye),[Ce,Z]=B(!1),[y,ke]=B(_e),[n,W]=B(new Set),[ee,te]=B(!1),[I,F]=B({visible:!1,title:"",message:"",onConfirm:()=>{}});ce.useEffect(()=>{Y(H||50),J.current?.scrollToOffset({offset:0,animated:!1})},[C,z,H]);const oe=["chat","crypto","socketio","echo"],le=b(()=>{const e=oe[X%oe.length];G(e),be(o=>o+1),M(`Simulated ${e.toUpperCase()} WebSocket`)},[X,G]),w=P(()=>{let e=0,o=0,l=0,ie=0,ne=0,ae=0;return R.forEach(D=>{const _=(D.status||"open").toLowerCase();_==="open"?e++:_==="closed"?o++:_==="error"&&l++,D.client==="socket.io"||D.url.includes("/socket.io")?ae++:D.url.startsWith("wss://")?ie++:ne++}),{all:R.length,open:e,closed:o,error:l,wss:ie,ws:ne,sio:ae}},[R]),i=P(()=>{let e=j;return O(y)||(y.status.has("all")||(e=e.filter(o=>y.status.has(o.status||"open"))),y.types.has("all")||(e=e.filter(o=>!!(y.types.has("sio")&&(o.client==="socket.io"||o.url.includes("/socket.io"))||y.types.has("wss")&&o.url.startsWith("wss://")||y.types.has("ws")&&o.url.startsWith("ws://")))),y.sortBy==="time_asc"?e=[...e].sort((o,l)=>o.startTime-l.startTime):y.sortBy==="frames_desc"?e=[...e].sort((o,l)=>(l.frames?.length||0)-(o.frames?.length||0)):y.sortBy==="duration_desc"&&(e=[...e].sort((o,l)=>(l.duration||0)-(o.duration||0)))),e},[j,y]),V=P(()=>i.slice(0,L),[i,L]),re=b(e=>{W(o=>{const l=new Set(o);return l.has(e)?l.delete(e):l.add(e),l})},[]),Te=b(()=>{n.size===i.length?W(new Set):W(new Set(i.map(e=>e.id)))},[n.size,i]),we=b(()=>{const e=i.filter(l=>n.has(l.id));if(e.length===0)return;const o=e.map(l=>l.url).join(`
+`);Ge(o,`${e.length} WebSocket URLs`),M(`${e.length} URLs copied to clipboard`)},[i,n]),xe=b(async()=>{const e=i.filter(o=>n.has(o.id));if(e.length!==0)try{const o=JSON.stringify(e.map(l=>({url:l.url,status:l.status,startTime:new Date(l.startTime).toISOString(),duration:l.duration,framesCount:l.frames?.length||0,totalBytesSent:l.totalBytesSent,totalBytesReceived:l.totalBytesReceived})),null,2);await ve.share({message:o,title:`WebSocket Traffic (${e.length} connections)`})}catch{}},[i,n]),Be=b(()=>{n.size!==0&&F({visible:!0,title:s("socket.deleteSelectedTitle","Delete Selected WebSockets"),message:s("socket.deleteSelectedMsg",{count:n.size,defaultValue:`Are you sure you want to delete ${n.size} selected WebSocket logs?`}),confirmText:s("common.delete","Delete"),cancelText:s("common.cancel","Cancel"),onConfirm:()=>{F(o=>({...o,visible:!1}));const e=Array.from(n);q?.(e),W(new Set),M(`Deleted ${e.length} WebSocket logs`)}})},[n,q,s]),ze=b(()=>{F({visible:!0,title:s("socket.clearTitle","Clear All WebSocket Logs"),message:s("socket.clearMessage","Are you sure you want to delete all recorded WebSocket sessions?"),confirmText:s("common.clear","Clear All"),cancelText:s("common.cancel","Cancel"),onConfirm:()=>{F(e=>({...e,visible:!1})),K(),W(new Set),M(s("socket.cleared","All WebSocket logs cleared"))}})},[K,s]),Ie=P(()=>[{id:"all",label:"All",count:w.all,color:t.purple,icon:e=><Ye size={12}color={e}/>},{id:"open",label:"Open",count:w.open,color:t.greenColor,icon:e=><S style={{width:6,height:6,borderRadius:3,backgroundColor:e}}/>},{id:"closed",label:"Closed",count:w.closed,color:t.slate500,icon:e=><Tt size={11}color={e}/>},{id:"error",label:"Error",count:w.error,color:t.errorColor,icon:e=><Bt size={9}color={e}/>},{id:"sio",label:"Socket.IO",count:w.sio,color:t.violet600,icon:e=><U size={11}color={e}/>},{id:"wss",label:"WSS",count:w.wss,color:t.emerald600,icon:e=><Ct size={11}color={e}/>},{id:"ws",label:"WS",count:w.ws,color:t.blue600,icon:e=><St size={11}color={e}/>}],[w]),Re=b(()=>{L<i.length&&Y(e=>Math.min(e+Wt,i.length))},[L,i.length]),se=b(e=>{Q(e)},[Q]),We=b(e=>e?.id?String(e.id):"",[]),Fe=b(({item:e,index:o})=><Ne index={o}distance={8}>
+        <$e item={e}onPress={()=>se(e)}searchStr={C}isSelected={n.has(e.id)}onToggleSelect={re}serialNumber={o+1}/>
+      </Ne>,[C,n,re,se]);return<S style={{flex:1,backgroundColor:t.primaryLight}}>
+      
+      <S style={{marginTop:6}}>
+        <S style={k.toolbarRow}>
+          <S style={[k.searchContainer,{flex:1,marginRight:8,height:38},ee&&{borderColor:t.purple,borderWidth:1.5}]}>
+            <S style={k.searchIcon}>
+              <Xe color={ee?t.purple:t.grayTextWeak}size={15}/>
+            </S>
+            <Oe style={[k.searchInput,{paddingVertical:0}]}placeholder={s("socket.searchSocketsPlaceholder","Search WebSocket URL, payload...")}placeholderTextColor={t.grayTextWeak}value={C}onChangeText={$}onFocus={()=>te(!0)}onBlur={()=>te(!1)}autoCorrect={!1}autoCapitalize="none"returnKeyType="search"clearButtonMode="while-editing"/>
+            {C.length>0&&<S style={{flexDirection:"row",alignItems:"center",gap:4,marginRight:6}}>
+                <S style={{backgroundColor:`${t.purple}20`,borderRadius:10,paddingHorizontal:6,paddingVertical:1.5}}>
+                  <T style={{color:t.purple,fontSize:9.5,fontFamily:x.interBold}}>
+                    {i.length}
+                  </T>
+                </S>
+                {Le.OS==="android"&&<De onPress={()=>$("")}hitSlop={10}style={k.clearBtn}>
+                    <Je color={t.grayTextWeak}size={13}/>
+                  </De>}
+              </S>}
+          </S>
+
+          <S style={k.toolbarRight}>
+            <A style={[k.toolbarBtn,!O(y)&&{borderColor:t.purple,backgroundColor:`${t.purple}15`}]}onPress={()=>Z(!0)}hitSlop={6}accessibilityRole="button"accessibilityLabel="Filter WebSockets">
+              <Ze color={O(y)?t.grayTextStrong:t.purple}size={15}/>
+              {!O(y)&&<S style={k.activeFilterDot}/>}
+            </A>
+
+            <A style={[k.toolbarBtn,{backgroundColor:`${t.amber600}14`,borderColor:`${t.amber600}30`}]}onPress={le}hitSlop={6}accessibilityRole="button"accessibilityLabel="Simulate test WebSocket traffic">
+              <U color={t.amber600}size={15}/>
+            </A>
+
+            {R.length>0&&<A style={[k.toolbarBtn,{borderColor:`${t.errorColor}38`,backgroundColor:`${t.errorColor}0F`}]}onPress={ze}hitSlop={6}accessibilityRole="button"accessibilityLabel="Clear all socket logs">
+                <Se color={t.errorColor}size={15}/>
+              </A>}
+          </S>
+        </S>
+      </S>
+
+      
+      <S style={r.carouselWrapper}>
+        <Pe horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={r.carouselContent}>
+          {Ie.map(e=>{const o=z===e.id;return<A key={e.id}onPress={()=>N(e.id)}style={[r.filterPill,o&&{backgroundColor:e.color,borderColor:e.color}]}>
+                {e.icon?e.icon(o?t.white:e.color):null}
+                <T style={[r.filterPillText,o&&{color:t.white,fontFamily:x.interBold}]}>
+                  {e.label}
+                </T>
+                {e.count>0&&<S style={[r.countBadge,{backgroundColor:o?"rgba(255, 255, 255, 0.25)":`${e.color}20`}]}>
+                    <T style={[r.countBadgeText,{color:o?t.white:e.color}]}>
+                      {e.count>99?"99+":e.count}
+                    </T>
+                  </S>}
+              </A>})}
+        </Pe>
+      </S>
+
+      
+      {n.size>0&&<S style={r.selectionBar}>
+          <S style={r.selectionLeft}>
+            <E onPress={Te}style={r.selectAllBtn}hitSlop={{top:6,bottom:6,left:6,right:6}}>
+              <T style={r.selectAllText}>
+                {n.size===i.length?s("common.deselectAll","Deselect"):s("common.selectAll","Select All")}
+              </T>
+            </E>
+
+            <T style={r.selectionCountText}>
+              {n.size} / {i.length}
+            </T>
+          </S>
+
+          <S style={r.selectionRight}>
+            <E onPress={we}style={r.actionBtn}hitSlop={{top:6,bottom:6,left:6,right:6}}>
+              <It size={12}color={t.slate600}/>
+              <T style={r.actionBtnText}>
+                {s("common.copy","Copy")}
+              </T>
+            </E>
+
+            <E onPress={xe}style={r.actionBtn}hitSlop={{top:6,bottom:6,left:6,right:6}}>
+              <Rt size={12}color={t.sky600}/>
+              <T style={[r.actionBtnText,{color:t.sky600}]}>
+                {s("common.share","Share")}
+              </T>
+            </E>
+
+            <E onPress={Be}style={[r.actionBtn,r.deleteActionBtn]}hitSlop={{top:6,bottom:6,left:6,right:6}}>
+              <Se size={12}color={t.red500}/>
+              <T style={[r.actionBtnText,{color:t.red500}]}>
+                {s("common.delete","Delete")}
+              </T>
+            </E>
+          </S>
+        </S>}
+
+      
+      <Ae ref={J}data={V}keyExtractor={We}renderItem={Fe}initialNumToRender={10}maxToRenderPerBatch={8}windowSize={5}updateCellsBatchingPeriod={40}removeClippedSubviews={!0}renderToHardwareTextureAndroid={!0}contentContainerStyle={[r.listContent,V.length===0&&{flex:1}]}showsVerticalScrollIndicator={!1}ListEmptyComponent={<S style={r.emptyWrapper}>
+            <Qe isSearch={!!(C||z!=="all")}searchQuery={C}customTitle={C||z!=="all"?s("socket.noMatching","No matching WebSockets"):s("socket.noSockets","No WebSockets recorded yet")}customSub={C||z!=="all"?s("socket.adjustSearchFilter","Try adjusting your search query or filter chips."):s("socket.noSocketsDesc","WebSocket connections and Socket.IO messages will appear here in real-time.")}onClearSearch={()=>{$(""),N("all")}}showReload={!1}/>
+            {!C&&z==="all"&&<A onPress={le}style={r.simulateEmptyBtn}>
+                <U color={t.white}size={14}/>
+                <T style={r.simulateEmptyBtnText}>
+                  {s("socket.simulateTraffic","Simulate Demo WebSocket Traffic")}
+                </T>
+              </A>}
+          </S>}ListFooterComponent={V.length>0?<Ke totalCount={i.length}count={V.length}hasMore={V.length<i.length}onLoadMore={Re}/>:null}/>
+
+      
+      <He visible={Ce}onClose={()=>Z(!1)}filters={y}onApply={ke}records={R}/>
+
+      <Ue visible={I.visible}title={I.title}message={I.message}confirmText={I.confirmText}cancelText={I.cancelText}isDestructive={!0}icon="trash"onConfirm={I.onConfirm}onCancel={()=>F(e=>({...e,visible:!1}))}/>
+    </S>});export default Ft;const r=Ee.create({carouselWrapper:{paddingVertical:6,borderBottomWidth:1,borderBottomColor:t.dividerColor,backgroundColor:t.white},carouselContent:{paddingHorizontal:8,gap:6,flexDirection:"row",alignItems:"center"},filterPill:{flexDirection:"row",alignItems:"center",gap:5,paddingHorizontal:9,paddingVertical:4.5,borderRadius:20,backgroundColor:t.grayBackground,borderWidth:1,borderColor:t.dividerColor},filterPillText:{fontSize:11,fontFamily:x.interMedium,color:t.primaryBlack},countBadge:{paddingHorizontal:5,paddingVertical:1,borderRadius:10},countBadgeText:{fontSize:9.5,fontFamily:x.interBold},selectionBar:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:7,backgroundColor:`${t.purple}0D`,borderBottomWidth:1,borderBottomColor:`${t.purple}25`},selectionLeft:{flexDirection:"row",alignItems:"center",gap:8},selectAllBtn:{paddingHorizontal:7,paddingVertical:3,borderRadius:5,backgroundColor:`${t.purple}1E`},selectAllText:{fontFamily:x.interSemiBold,fontSize:10.5,color:t.purple},selectionCountText:{fontFamily:x.interMedium,fontSize:11,color:t.grayTextStrong},selectionRight:{flexDirection:"row",alignItems:"center",gap:6},actionBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:7,paddingVertical:3.5,borderRadius:5,backgroundColor:t.white,borderWidth:1,borderColor:t.dividerColor},deleteActionBtn:{backgroundColor:`${t.red500}10`,borderColor:`${t.red500}30`},actionBtnText:{fontFamily:x.interMedium,fontSize:10.5,color:t.grayTextStrong},listContent:{padding:6,paddingBottom:24},emptyWrapper:{flex:1,alignItems:"center",justifyContent:"center",paddingVertical:20},simulateEmptyBtn:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:6,marginTop:14,paddingHorizontal:16,paddingVertical:10,borderRadius:10,backgroundColor:t.amber600,shadowColor:t.amber600,shadowOffset:{width:0,height:2},shadowOpacity:.25,shadowRadius:4,elevation:3},simulateEmptyBtnText:{fontFamily:x.interBold,fontSize:12,color:t.white,letterSpacing:.2}});

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

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

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

@@ -0,0 +1,7 @@
+import React from 'react';
+interface SupportModalProps {
+    visible: boolean;
+    onClose: () => void;
+}
+export declare const SupportModal: React.FC<SupportModalProps>;
+export {};