react-native-inapp-inspector 2.2.2 → 2.2.4

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

@@ -0,0 +1,892 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StorageTab = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const TouchableScale_1 = __importDefault(require("../TouchableScale"));
+const AppColors_1 = require("../../styles/AppColors");
+const AppFonts_1 = require("../../styles/AppFonts");
+const i18n_1 = require("../../i18n");
+const NetworkIcons_1 = require("../NetworkIcons");
+const storageInspector_1 = require("../../customHooks/storageInspector");
+const helpers_1 = require("../../helpers");
+const toast_1 = require("../../helpers/toast");
+exports.StorageTab = react_1.default.memo(() => {
+    const { t } = (0, i18n_1.useTranslation)();
+    const [activeDriver, setActiveDriver] = (0, react_1.useState)('asyncStorage');
+    const [activeMMKVId, setActiveMMKVId] = (0, react_1.useState)('default');
+    const [entries, setEntries] = (0, react_1.useState)([]);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
+    const [search, setSearch] = (0, react_1.useState)('');
+    const [expandedKeys, setExpandedKeys] = (0, react_1.useState)({});
+    // Modal State for Create / Edit
+    const [modalVisible, setModalVisible] = (0, react_1.useState)(false);
+    const [modalMode, setModalMode] = (0, react_1.useState)('create');
+    const [editKeyName, setEditKeyName] = (0, react_1.useState)('');
+    const [editValue, setEditValue] = (0, react_1.useState)('');
+    const [editType, setEditType] = (0, react_1.useState)('string');
+    const [jsonError, setJsonError] = (0, react_1.useState)(null);
+    const mmkvInstanceIds = (0, react_1.useMemo)(() => (0, storageInspector_1.getRegisteredMMKVInstanceIds)(), []);
+    // Fetch entries
+    const loadEntries = (0, react_1.useCallback)(async () => {
+        setIsLoading(true);
+        try {
+            const data = await (0, storageInspector_1.fetchStorageEntries)(activeDriver, activeDriver === 'mmkv' ? activeMMKVId : undefined);
+            setEntries(data);
+        }
+        catch {
+            setEntries([]);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [activeDriver, activeMMKVId]);
+    (0, react_1.useEffect)(() => {
+        loadEntries();
+        const unsubscribe = (0, storageInspector_1.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) => {
+        react_native_1.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 (0, storageInspector_1.removeStorageEntry)(activeDriver, key, activeDriver === 'mmkv' ? activeMMKVId : undefined);
+                    if (ok) {
+                        (0, toast_1.showToast)(`Deleted "${key}"`);
+                        loadEntries();
+                    }
+                    else {
+                        (0, toast_1.showToast)(`Failed to delete "${key}"`);
+                    }
+                },
+            },
+        ]);
+    };
+    // Clear all keys
+    const handleClearAll = () => {
+        react_native_1.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 (0, storageInspector_1.clearStorageDriver)(activeDriver, activeDriver === 'mmkv' ? activeMMKVId : undefined);
+                    if (ok) {
+                        (0, toast_1.showToast)('All storage keys wiped');
+                        loadEntries();
+                    }
+                },
+            },
+        ]);
+    };
+    // Save Modal (Create / Update)
+    const handleSaveModal = async () => {
+        if (!editKeyName.trim()) {
+            (0, toast_1.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 (0, storageInspector_1.setStorageEntry)(activeDriver, editKeyName.trim(), finalVal, activeDriver === 'mmkv' ? activeMMKVId : undefined);
+        if (success) {
+            (0, toast_1.showToast)(modalMode === 'create' ? `Added "${editKeyName.trim()}"` : `Updated "${editKeyName.trim()}"`);
+            setModalVisible(false);
+            loadEntries();
+        }
+        else {
+            (0, toast_1.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');
+            (0, toast_1.showToast)('Formatted JSON');
+        }
+        catch {
+            setJsonError('Cannot format: invalid JSON syntax');
+        }
+    };
+    // Filter entries
+    const filteredEntries = (0, react_1.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 = (0, react_1.useMemo)(() => {
+        return entries.reduce((sum, e) => sum + e.byteSize, 0);
+    }, [entries]);
+    const formattedTotalSize = (0, react_1.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_1.AppColors.purple, bg: `${AppColors_1.AppColors.purple}16` };
+            case 'number':
+                return { label: 'NUM', color: AppColors_1.AppColors.warningIconGold, bg: `${AppColors_1.AppColors.warningIconGold}16` };
+            case 'boolean':
+                return { label: 'BOOL', color: AppColors_1.AppColors.emerald500, bg: `${AppColors_1.AppColors.emerald500}16` };
+            case 'null':
+                return { label: 'NULL', color: AppColors_1.AppColors.grayTextWeak, bg: `${AppColors_1.AppColors.grayTextWeak}16` };
+            default:
+                return { label: 'STR', color: AppColors_1.AppColors.blue500, bg: `${AppColors_1.AppColors.blue500}16` };
+        }
+    };
+    const isConnected = activeDriver === 'asyncStorage'
+        ? (0, storageInspector_1.isAsyncStorageConnected)()
+        : (0, storageInspector_1.isMMKVConnected)();
+    return (<react_native_1.View style={styles.container}>
+      {/* ── Driver Sub-Tabs ── */}
+      <react_native_1.View style={styles.driverTabsWrapper}>
+        <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.driverTabsContainer}>
+          <TouchableScale_1.default onPress={() => setActiveDriver('asyncStorage')} style={[
+            styles.driverTabPill,
+            activeDriver === 'asyncStorage' && styles.driverTabPillActive,
+        ]}>
+            <NetworkIcons_1.DatabaseIcon size={13} color={activeDriver === 'asyncStorage'
+            ? AppColors_1.AppColors.white
+            : AppColors_1.AppColors.grayText}/>
+            <react_native_1.Text style={[
+            styles.driverTabText,
+            activeDriver === 'asyncStorage' && styles.driverTabTextActive,
+        ]}>
+              AsyncStorage
+            </react_native_1.Text>
+            {activeDriver === 'asyncStorage' && entries.length > 0 && (<react_native_1.View style={styles.driverCountBadge}>
+                <react_native_1.Text style={styles.driverCountText}>{entries.length}</react_native_1.Text>
+              </react_native_1.View>)}
+          </TouchableScale_1.default>
+
+          <TouchableScale_1.default onPress={() => setActiveDriver('mmkv')} style={[
+            styles.driverTabPill,
+            activeDriver === 'mmkv' && styles.driverTabPillActive,
+        ]}>
+            <NetworkIcons_1.LayersIcon size={13} color={activeDriver === 'mmkv'
+            ? AppColors_1.AppColors.white
+            : AppColors_1.AppColors.grayText}/>
+            <react_native_1.Text style={[
+            styles.driverTabText,
+            activeDriver === 'mmkv' && styles.driverTabTextActive,
+        ]}>
+              MMKV
+            </react_native_1.Text>
+            {activeDriver === 'mmkv' && entries.length > 0 && (<react_native_1.View style={styles.driverCountBadge}>
+                <react_native_1.Text style={styles.driverCountText}>{entries.length}</react_native_1.Text>
+              </react_native_1.View>)}
+          </TouchableScale_1.default>
+
+          {/* MMKV Named Instance Dropdown/Pills */}
+          {activeDriver === 'mmkv' && mmkvInstanceIds.length > 1 && (<react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 4, marginLeft: 6 }}>
+              {mmkvInstanceIds.map(id => (<TouchableScale_1.default key={id} onPress={() => setActiveMMKVId(id)} style={[
+                    styles.instancePill,
+                    activeMMKVId === id && styles.instancePillActive,
+                ]}>
+                  <react_native_1.Text style={[
+                    styles.instancePillText,
+                    activeMMKVId === id && styles.instancePillTextActive,
+                ]}>
+                    {id}
+                  </react_native_1.Text>
+                </TouchableScale_1.default>))}
+            </react_native_1.View>)}
+        </react_native_1.ScrollView>
+      </react_native_1.View>
+
+      {/* ── Search & Actions Bar ── */}
+      <react_native_1.View style={styles.actionBar}>
+        <react_native_1.View style={styles.searchBar}>
+          <NetworkIcons_1.SearchIcon size={14} color={AppColors_1.AppColors.grayTextWeak}/>
+          <react_native_1.TextInput value={search} onChangeText={setSearch} placeholder={`Search ${entries.length} keys & values...`} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} style={styles.searchInput} clearButtonMode="while-editing"/>
+          {search.length > 0 && (<TouchableScale_1.default onPress={() => setSearch('')} hitSlop={8}>
+              <NetworkIcons_1.ClearIcon size={13} color={AppColors_1.AppColors.grayTextWeak}/>
+            </TouchableScale_1.default>)}
+        </react_native_1.View>
+
+        {/* Action Buttons: Add Key & Refresh */}
+        <TouchableScale_1.default onPress={handleOpenCreate} style={styles.addKeyBtn} hitSlop={6}>
+          <NetworkIcons_1.PlusIcon size={13} color={AppColors_1.AppColors.white}/>
+          <react_native_1.Text style={styles.addKeyBtnText}>Add</react_native_1.Text>
+        </TouchableScale_1.default>
+
+        <TouchableScale_1.default onPress={loadEntries} style={styles.actionIconBtn} hitSlop={6}>
+          <NetworkIcons_1.ResetIcon size={13} color={AppColors_1.AppColors.grayText}/>
+        </TouchableScale_1.default>
+
+        {entries.length > 0 && (<TouchableScale_1.default onPress={handleClearAll} style={[styles.actionIconBtn, { borderColor: `${AppColors_1.AppColors.errorColor}33`, backgroundColor: `${AppColors_1.AppColors.errorColor}12` }]} hitSlop={6}>
+            <NetworkIcons_1.TrashIcon size={13} color={AppColors_1.AppColors.errorColor}/>
+          </TouchableScale_1.default>)}
+      </react_native_1.View>
+
+      {/* ── Stats Strip ── */}
+      <react_native_1.View style={styles.statsStrip}>
+        <react_native_1.Text style={styles.statsText}>
+          {filteredEntries.length} of {entries.length} Keys • {formattedTotalSize}
+        </react_native_1.Text>
+        <react_native_1.Text style={styles.statsSubtext}>
+          {activeDriver === 'asyncStorage' ? 'SQLite Key-Value' : `MMKV (${activeMMKVId})`}
+        </react_native_1.Text>
+      </react_native_1.View>
+
+      {/* ── Storage Entries List ── */}
+      {isLoading ? (<react_native_1.View style={styles.loadingContainer}>
+          <react_native_1.ActivityIndicator size="small" color={AppColors_1.AppColors.purple}/>
+          <react_native_1.Text style={styles.loadingText}>Loading storage entries...</react_native_1.Text>
+        </react_native_1.View>) : filteredEntries.length === 0 ? (<react_native_1.ScrollView contentContainerStyle={styles.emptyContainer} showsVerticalScrollIndicator={false}>
+          <react_native_1.View style={styles.emptyIconWrap}>
+            <NetworkIcons_1.DatabaseIcon size={28} color={AppColors_1.AppColors.grayTextWeak}/>
+          </react_native_1.View>
+          <react_native_1.Text style={styles.emptyTitle}>
+            {search ? 'No matching keys found' : `No ${activeDriver === 'asyncStorage' ? 'AsyncStorage' : 'MMKV'} Keys`}
+          </react_native_1.Text>
+          <react_native_1.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!`}
+          </react_native_1.Text>
+        </react_native_1.ScrollView>) : (<react_native_1.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 (<react_native_1.View key={entry.key} style={styles.entryCard}>
+                {/* Entry Header: Key name, Type Badge, Size, Actions */}
+                <react_native_1.View style={styles.entryHeader}>
+                  <react_native_1.View style={{ flex: 1, marginRight: 8 }}>
+                    <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
+                      <react_native_1.Text style={styles.entryKey} numberOfLines={1} selectable>
+                        {entry.key}
+                      </react_native_1.Text>
+                      <react_native_1.View style={[
+                        styles.typeBadge,
+                        { backgroundColor: badge.bg, borderColor: `${badge.color}33` },
+                    ]}>
+                        <react_native_1.Text style={[styles.typeBadgeText, { color: badge.color }]}>
+                          {badge.label}
+                        </react_native_1.Text>
+                      </react_native_1.View>
+                      <react_native_1.Text style={styles.sizeText}>{formattedBytes}</react_native_1.Text>
+                    </react_native_1.View>
+                  </react_native_1.View>
+
+                  {/* Actions: Copy, Edit, Delete */}
+                  <react_native_1.View style={styles.entryActions}>
+                    <TouchableScale_1.default hitSlop={6} onPress={() => {
+                        (0, helpers_1.copyToClipboard)(entry.value, entry.key);
+                        (0, toast_1.showToast)(`Copied value of "${entry.key}"`);
+                    }} style={styles.entryActionBtn}>
+                      <NetworkIcons_1.CopyIcon size={12} color={AppColors_1.AppColors.grayText}/>
+                    </TouchableScale_1.default>
+
+                    <TouchableScale_1.default hitSlop={6} onPress={() => handleOpenEdit(entry)} style={styles.entryActionBtn}>
+                      <NetworkIcons_1.PencilIcon size={12} color={AppColors_1.AppColors.purple}/>
+                    </TouchableScale_1.default>
+
+                    <TouchableScale_1.default hitSlop={6} onPress={() => handleDeleteKey(entry.key)} style={[styles.entryActionBtn, { backgroundColor: `${AppColors_1.AppColors.errorColor}12` }]}>
+                      <NetworkIcons_1.TrashIcon size={12} color={AppColors_1.AppColors.errorColor}/>
+                    </TouchableScale_1.default>
+                  </react_native_1.View>
+                </react_native_1.View>
+
+                {/* Entry Value Preview / Viewer */}
+                <TouchableScale_1.default onPress={() => toggleExpand(entry.key)} style={styles.valuePreviewBox}>
+                  <react_native_1.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}
+                  </react_native_1.Text>
+                  {entry.value.length > 80 && (<react_native_1.Text style={styles.expandHint}>
+                      {isExpanded ? '▲ Collapse' : '▼ Expand'}
+                    </react_native_1.Text>)}
+                </TouchableScale_1.default>
+              </react_native_1.View>);
+            })}
+          <react_native_1.View style={{ height: 60 }}/>
+        </react_native_1.ScrollView>)}
+
+      {/* ── Create / Edit Key Modal ── */}
+      <react_native_1.Modal visible={modalVisible} transparent animationType="fade" onRequestClose={() => setModalVisible(false)}>
+        <react_native_1.View style={styles.modalOverlay}>
+          <react_native_1.View style={styles.modalCard}>
+            <react_native_1.View style={styles.modalHeader}>
+              <react_native_1.Text style={styles.modalTitle}>
+                {modalMode === 'create' ? 'Add Storage Key' : `Edit: ${editKeyName}`}
+              </react_native_1.Text>
+              <TouchableScale_1.default onPress={() => setModalVisible(false)} hitSlop={8}>
+                <NetworkIcons_1.ClearIcon size={16} color={AppColors_1.AppColors.grayText}/>
+              </TouchableScale_1.default>
+            </react_native_1.View>
+
+            {/* Key Name Input */}
+            <react_native_1.View style={styles.inputGroup}>
+              <react_native_1.Text style={styles.inputLabel}>KEY NAME</react_native_1.Text>
+              <react_native_1.TextInput value={editKeyName} onChangeText={setEditKeyName} placeholder="e.g. user_session, auth_token" placeholderTextColor={AppColors_1.AppColors.grayTextWeak} editable={modalMode === 'create'} style={[
+            styles.textInput,
+            modalMode === 'edit' && styles.textInputDisabled,
+        ]} autoCapitalize="none"/>
+            </react_native_1.View>
+
+            {/* Type Selector Strip */}
+            <react_native_1.View style={styles.inputGroup}>
+              <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
+                <react_native_1.Text style={styles.inputLabel}>VALUE TYPE</react_native_1.Text>
+                {editType === 'json' && (<TouchableScale_1.default onPress={handleBeautifyJson} hitSlop={6}>
+                    <react_native_1.Text style={styles.formatJsonBtn}>Beautify JSON</react_native_1.Text>
+                  </TouchableScale_1.default>)}
+              </react_native_1.View>
+              <react_native_1.View style={styles.typeSelectorStrip}>
+                {['string', 'json', 'number', 'boolean'].map(t => {
+            const isSel = editType === t;
+            return (<TouchableScale_1.default key={t} onPress={() => {
+                    setEditType(t);
+                    setJsonError(null);
+                }} style={[
+                    styles.typePill,
+                    isSel && styles.typePillActive,
+                ]}>
+                      <react_native_1.Text style={[
+                    styles.typePillText,
+                    isSel && styles.typePillTextActive,
+                ]}>
+                        {t.toUpperCase()}
+                      </react_native_1.Text>
+                    </TouchableScale_1.default>);
+        })}
+              </react_native_1.View>
+            </react_native_1.View>
+
+            {/* Value Input */}
+            <react_native_1.View style={styles.inputGroup}>
+              <react_native_1.Text style={styles.inputLabel}>VALUE CONTENT</react_native_1.Text>
+              <react_native_1.TextInput value={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_1.AppColors.grayTextWeak} style={[styles.textInput, styles.textAreaInput]} multiline textAlignVertical="top" autoCapitalize="none"/>
+              {jsonError && (<react_native_1.Text style={styles.errorText}>⚠️ {jsonError}</react_native_1.Text>)}
+            </react_native_1.View>
+
+            {/* Modal Actions */}
+            <react_native_1.View style={styles.modalActions}>
+              <TouchableScale_1.default onPress={() => setModalVisible(false)} style={styles.cancelBtn}>
+                <react_native_1.Text style={styles.cancelBtnText}>Cancel</react_native_1.Text>
+              </TouchableScale_1.default>
+              <TouchableScale_1.default onPress={handleSaveModal} style={styles.saveBtn}>
+                <NetworkIcons_1.CheckIcon size={14} color={AppColors_1.AppColors.white}/>
+                <react_native_1.Text style={styles.saveBtnText}>Save Key</react_native_1.Text>
+              </TouchableScale_1.default>
+            </react_native_1.View>
+          </react_native_1.View>
+        </react_native_1.View>
+      </react_native_1.Modal>
+    </react_native_1.View>);
+});
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+    },
+    driverTabsWrapper: {
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors_1.AppColors.dividerColor,
+        paddingVertical: 8,
+    },
+    driverTabsContainer: {
+        paddingHorizontal: 12,
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+    },
+    driverTabPill: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        paddingHorizontal: 11,
+        paddingVertical: 6,
+        borderRadius: 8,
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+    },
+    driverTabPillActive: {
+        backgroundColor: AppColors_1.AppColors.purple,
+        borderColor: AppColors_1.AppColors.purple,
+    },
+    driverTabText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 11.5,
+        color: AppColors_1.AppColors.grayText,
+    },
+    driverTabTextActive: {
+        color: AppColors_1.AppColors.white,
+    },
+    driverCountBadge: {
+        backgroundColor: 'rgba(255, 255, 255, 0.25)',
+        paddingHorizontal: 5,
+        paddingVertical: 1,
+        borderRadius: 6,
+    },
+    driverCountText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9,
+        color: AppColors_1.AppColors.white,
+    },
+    instancePill: {
+        paddingHorizontal: 7,
+        paddingVertical: 3,
+        borderRadius: 6,
+        backgroundColor: `${AppColors_1.AppColors.purple}14`,
+        borderWidth: 1,
+        borderColor: `${AppColors_1.AppColors.purple}30`,
+    },
+    instancePillActive: {
+        backgroundColor: AppColors_1.AppColors.purple,
+        borderColor: AppColors_1.AppColors.purple,
+    },
+    instancePillText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 10,
+        color: AppColors_1.AppColors.purple,
+    },
+    instancePillTextActive: {
+        color: AppColors_1.AppColors.white,
+    },
+    actionBar: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors_1.AppColors.dividerColor,
+        gap: 6,
+    },
+    searchBar: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        borderRadius: 8,
+        paddingHorizontal: 9,
+        paddingVertical: react_native_1.Platform.OS === 'ios' ? 6 : 2,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+        gap: 6,
+    },
+    searchInput: {
+        flex: 1,
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 12,
+        color: AppColors_1.AppColors.primaryBlack,
+        padding: 0,
+    },
+    addKeyBtn: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        paddingHorizontal: 10,
+        paddingVertical: 6,
+        borderRadius: 8,
+        backgroundColor: AppColors_1.AppColors.purple,
+    },
+    addKeyBtnText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 11,
+        color: AppColors_1.AppColors.white,
+    },
+    actionIconBtn: {
+        width: 30,
+        height: 30,
+        borderRadius: 8,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+    },
+    statsStrip: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 12,
+        paddingVertical: 5,
+        backgroundColor: `${AppColors_1.AppColors.grayBorderSecondary}40`,
+    },
+    statsText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 10,
+        color: AppColors_1.AppColors.grayText,
+    },
+    statsSubtext: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9.5,
+        color: AppColors_1.AppColors.grayTextWeak,
+    },
+    scrollArea: {
+        flex: 1,
+    },
+    scrollContent: {
+        padding: 12,
+        gap: 10,
+        paddingBottom: 100,
+    },
+    entryCard: {
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+        padding: 10,
+        gap: 8,
+        shadowColor: AppColors_1.AppColors.black,
+        shadowOpacity: 0.02,
+        shadowRadius: 3,
+        shadowOffset: { width: 0, height: 1 },
+        elevation: 1,
+    },
+    entryHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    entryKey: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 12.5,
+        color: AppColors_1.AppColors.primaryBlack,
+    },
+    typeBadge: {
+        paddingHorizontal: 5,
+        paddingVertical: 1,
+        borderRadius: 4,
+        borderWidth: 1,
+    },
+    typeBadgeText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 8.5,
+    },
+    sizeText: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 10,
+        color: AppColors_1.AppColors.grayTextWeak,
+    },
+    entryActions: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 5,
+    },
+    entryActionBtn: {
+        padding: 5,
+        borderRadius: 5,
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+    },
+    valuePreviewBox: {
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        borderRadius: 6,
+        padding: 8,
+        borderWidth: 1,
+        borderColor: `${AppColors_1.AppColors.grayBorderSecondary}80`,
+    },
+    valuePreviewText: {
+        fontFamily: react_native_1.Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+        fontSize: 11,
+        color: AppColors_1.AppColors.primaryBlack,
+        lineHeight: 16,
+    },
+    expandHint: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9.5,
+        color: AppColors_1.AppColors.purple,
+        marginTop: 4,
+    },
+    loadingContainer: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 8,
+    },
+    loadingText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 12,
+        color: AppColors_1.AppColors.grayText,
+    },
+    emptyContainer: {
+        padding: 24,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    emptyIconWrap: {
+        width: 56,
+        height: 56,
+        borderRadius: 28,
+        backgroundColor: `${AppColors_1.AppColors.grayBorderSecondary}40`,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: 12,
+    },
+    emptyTitle: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 14,
+        color: AppColors_1.AppColors.primaryBlack,
+        marginBottom: 4,
+    },
+    emptySubtitle: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 11.5,
+        color: AppColors_1.AppColors.grayText,
+        textAlign: 'center',
+        maxWidth: 280,
+    },
+    connectGuideCard: {
+        marginTop: 20,
+        width: '100%',
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+        padding: 12,
+        gap: 6,
+    },
+    connectGuideTitle: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 11,
+        color: AppColors_1.AppColors.purple,
+    },
+    connectGuideCode: {
+        fontFamily: react_native_1.Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+        fontSize: 10,
+        color: AppColors_1.AppColors.grayText,
+        lineHeight: 15,
+    },
+    modalOverlay: {
+        flex: 1,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 16,
+    },
+    modalCard: {
+        width: '100%',
+        maxWidth: 400,
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+        borderRadius: 14,
+        padding: 16,
+        gap: 12,
+        shadowColor: AppColors_1.AppColors.black,
+        shadowOpacity: 0.2,
+        shadowRadius: 10,
+        shadowOffset: { width: 0, height: 4 },
+        elevation: 5,
+    },
+    modalHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors_1.AppColors.dividerColor,
+        paddingBottom: 10,
+    },
+    modalTitle: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 14,
+        color: AppColors_1.AppColors.primaryBlack,
+    },
+    inputGroup: {
+        gap: 4,
+    },
+    inputLabel: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9.5,
+        color: AppColors_1.AppColors.grayTextWeak,
+        letterSpacing: 0.5,
+    },
+    textInput: {
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        borderRadius: 8,
+        paddingHorizontal: 10,
+        paddingVertical: 8,
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 12,
+        color: AppColors_1.AppColors.primaryBlack,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+    },
+    textInputDisabled: {
+        backgroundColor: `${AppColors_1.AppColors.grayBorderSecondary}40`,
+        color: AppColors_1.AppColors.grayText,
+    },
+    textAreaInput: {
+        minHeight: 90,
+        maxHeight: 160,
+        fontFamily: react_native_1.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_1.AppColors.grayBackground,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+    },
+    typePillActive: {
+        backgroundColor: AppColors_1.AppColors.purple,
+        borderColor: AppColors_1.AppColors.purple,
+    },
+    typePillText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 10,
+        color: AppColors_1.AppColors.grayText,
+    },
+    typePillTextActive: {
+        color: AppColors_1.AppColors.white,
+    },
+    formatJsonBtn: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 10,
+        color: AppColors_1.AppColors.purple,
+    },
+    errorText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 10,
+        color: AppColors_1.AppColors.errorColor,
+        marginTop: 2,
+    },
+    modalActions: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 10,
+        marginTop: 4,
+    },
+    cancelBtn: {
+        flex: 1,
+        alignItems: 'center',
+        paddingVertical: 10,
+        borderRadius: 8,
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+    },
+    cancelBtnText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 12,
+        color: AppColors_1.AppColors.grayText,
+    },
+    saveBtn: {
+        flex: 1.5,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 5,
+        paddingVertical: 10,
+        borderRadius: 8,
+        backgroundColor: AppColors_1.AppColors.purple,
+    },
+    saveBtnText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 12,
+        color: AppColors_1.AppColors.white,
+    },
+});
+exports.default = exports.StorageTab;