react-native-inapp-inspector 2.3.18 → 2.3.20

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

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