react-native-inapp-inspector 2.2.3 → 2.2.4

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

@@ -0,0 +1,853 @@
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import { View, Text, ScrollView, 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, } from '../NetworkIcons';
+import { fetchStorageEntries, setStorageEntry, removeStorageEntry, clearStorageDriver, isAsyncStorageConnected, isMMKVConnected, getRegisteredMMKVInstanceIds, subscribeToStorageChanges, } from '../../customHooks/storageInspector';
+import { copyToClipboard } from '../../helpers';
+import { showToast } from '../../helpers/toast';
+export const StorageTab = React.memo(() => {
+    const { t } = useTranslation();
+    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({});
+    // Modal State for Create / Edit
+    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(), []);
+    // Fetch entries
+    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]);
+    // Toggle JSON accordion
+    const toggleExpand = (key) => {
+        setExpandedKeys(prev => ({ ...prev, [key]: !prev[key] }));
+    };
+    // Open Create Modal
+    const handleOpenCreate = () => {
+        setModalMode('create');
+        setEditKeyName('');
+        setEditValue('');
+        setEditType('string');
+        setJsonError(null);
+        setModalVisible(true);
+    };
+    // Open Edit Modal
+    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);
+    };
+    // Delete single key
+    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}"`);
+                    }
+                },
+            },
+        ]);
+    };
+    // Clear all keys
+    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();
+                    }
+                },
+            },
+        ]);
+    };
+    // Save Modal (Create / Update)
+    const handleSaveModal = async () => {
+        if (!editKeyName.trim()) {
+            showToast('Key name cannot be empty');
+            return;
+        }
+        let finalVal = editValue;
+        if (editType === 'json') {
+            try {
+                // Validate JSON
+                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');
+        }
+    };
+    // Format / Beautify JSON in modal
+    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');
+        }
+    };
+    // Filter entries
+    const filteredEntries = useMemo(() => {
+        if (!search.trim())
+            return entries;
+        const q = search.toLowerCase().trim();
+        return entries.filter(e => e.key.toLowerCase().includes(q) || e.value.toLowerCase().includes(q));
+    }, [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 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 isConnected = activeDriver === 'asyncStorage'
+        ? isAsyncStorageConnected()
+        : isMMKVConnected();
+    return (<View style={styles.container}>
+      {/* ── Driver Sub-Tabs ── */}
+      <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,
+        ]}>
+              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,
+        ]}>
+              MMKV
+            </Text>
+            {activeDriver === 'mmkv' && entries.length > 0 && (<View style={styles.driverCountBadge}>
+                <Text style={styles.driverCountText}>{entries.length}</Text>
+              </View>)}
+          </TouchableScale>
+
+          {/* MMKV Named Instance Dropdown/Pills */}
+          {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>
+
+      {/* ── Search & Actions Bar ── */}
+      <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 && (<TouchableScale onPress={() => setSearch('')} hitSlop={8}>
+              <ClearIcon size={13} color={AppColors.grayTextWeak}/>
+            </TouchableScale>)}
+        </View>
+
+        {/* Action Buttons: Add Key & Refresh */}
+        <TouchableScale onPress={handleOpenCreate} style={styles.addKeyBtn} hitSlop={6}>
+          <PlusIcon size={13} color={AppColors.white}/>
+          <Text style={styles.addKeyBtnText}>Add</Text>
+        </TouchableScale>
+
+        <TouchableScale onPress={loadEntries} style={styles.actionIconBtn} hitSlop={6}>
+          <ResetIcon size={13} color={AppColors.grayText}/>
+        </TouchableScale>
+
+        {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>
+
+      {/* ── Stats Strip ── */}
+      <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>
+
+      {/* ── Storage Entries List ── */}
+      {isLoading ? (<View style={styles.loadingContainer}>
+          <ActivityIndicator size="small" color={AppColors.purple}/>
+          <Text style={styles.loadingText}>Loading storage entries...</Text>
+        </View>) : filteredEntries.length === 0 ? (<ScrollView contentContainerStyle={styles.emptyContainer} showsVerticalScrollIndicator={false}>
+          <View style={styles.emptyIconWrap}>
+            <DatabaseIcon size={28} color={AppColors.grayTextWeak}/>
+          </View>
+          <Text style={styles.emptyTitle}>
+            {search ? 'No matching keys found' : `No ${activeDriver === 'asyncStorage' ? 'AsyncStorage' : 'MMKV'} Keys`}
+          </Text>
+          <Text style={styles.emptySubtitle}>
+            {search
+                ? 'Try modifying your search query'
+                : `Storage is auto-detected. Tap "+ Add" above to create your first ${activeDriver === 'asyncStorage' ? 'AsyncStorage' : 'MMKV'} key!`}
+          </Text>
+        </ScrollView>) : (<ScrollView style={styles.scrollArea} contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
+          {filteredEntries.map(entry => {
+                const isExpanded = Boolean(expandedKeys[entry.key]);
+                const badge = getTypeBadge(entry.type);
+                const formattedBytes = entry.byteSize < 1024
+                    ? `${entry.byteSize} B`
+                    : `${(entry.byteSize / 1024).toFixed(1)} KB`;
+                return (<View key={entry.key} style={styles.entryCard}>
+                {/* Entry Header: Key name, Type Badge, Size, Actions */}
+                <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>
+
+                  {/* Actions: Copy, Edit, Delete */}
+                  <View style={styles.entryActions}>
+                    <TouchableScale hitSlop={6} onPress={() => {
+                        copyToClipboard(entry.value, entry.key);
+                        showToast(`Copied value of "${entry.key}"`);
+                    }} style={styles.entryActionBtn}>
+                      <CopyIcon size={12} color={AppColors.grayText}/>
+                    </TouchableScale>
+
+                    <TouchableScale hitSlop={6} onPress={() => handleOpenEdit(entry)} style={styles.entryActionBtn}>
+                      <PencilIcon size={12} color={AppColors.purple}/>
+                    </TouchableScale>
+
+                    <TouchableScale hitSlop={6} onPress={() => handleDeleteKey(entry.key)} style={[styles.entryActionBtn, { backgroundColor: `${AppColors.errorColor}12` }]}>
+                      <TrashIcon size={12} color={AppColors.errorColor}/>
+                    </TouchableScale>
+                  </View>
+                </View>
+
+                {/* Entry Value Preview / Viewer */}
+                <TouchableScale onPress={() => toggleExpand(entry.key)} style={styles.valuePreviewBox}>
+                  <Text style={styles.valuePreviewText} numberOfLines={isExpanded ? undefined : 3} selectable>
+                    {entry.type === 'json' && entry.parsedValue
+                        ? isExpanded
+                            ? JSON.stringify(entry.parsedValue, null, 2)
+                            : entry.value
+                        : entry.value}
+                  </Text>
+                  {entry.value.length > 80 && (<Text style={styles.expandHint}>
+                      {isExpanded ? '▲ Collapse' : '▼ Expand'}
+                    </Text>)}
+                </TouchableScale>
+              </View>);
+            })}
+          <View style={{ height: 60 }}/>
+        </ScrollView>)}
+
+      {/* ── Create / Edit Key Modal ── */}
+      <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>
+
+            {/* Key Name Input */}
+            <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>
+
+            {/* Type Selector Strip */}
+            <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>
+
+            {/* Value Input */}
+            <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 && (<Text style={styles.errorText}>⚠️ {jsonError}</Text>)}
+            </View>
+
+            {/* Modal Actions */}
+            <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: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+        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: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+        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: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+        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;