react-native-storage-inspector 1.0.2 → 1.0.4

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import React6, { useState, useMemo, useEffect, useCallback } from 'react';
+import React7, { useState, useMemo, useEffect, useCallback } from 'react';
 import { StyleSheet, Dimensions, View, ScrollView, RefreshControl, Text, TouchableOpacity, Share, Modal, TextInput } from 'react-native';
 
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
@@ -25,7 +25,7 @@ function createMMKVAdapter(instance, name) {
       return Promise.resolve();
     },
     removeItem(key) {
-      instance.delete(key);
+      instance.remove(key);
       return Promise.resolve();
     },
     isAvailable() {
@@ -35,7 +35,6 @@ function createMMKVAdapter(instance, name) {
 }
 
 // src/adapters/async-storage.ts
-var asyncStorage = null;
 function getAsyncStorageFromRequire() {
   try {
     const mod = require("@react-native-async-storage/async-storage");
@@ -44,8 +43,8 @@ function getAsyncStorageFromRequire() {
     return null;
   }
 }
-function createAsyncStorageAdapter(instance) {
-  const getStorage = () => instance ?? (asyncStorage ?? (asyncStorage = getAsyncStorageFromRequire()));
+function createAsyncStorageAdapter() {
+  const getStorage = () => getAsyncStorageFromRequire();
   return {
     type: "async-storage",
     name: "Async Storage",
@@ -76,7 +75,6 @@ function createAsyncStorageAdapter(instance) {
 }
 
 // src/adapters/keychain.ts
-var keychain = null;
 function getKeychainFromRequire() {
   try {
     return require("react-native-keychain");
@@ -84,14 +82,14 @@ function getKeychainFromRequire() {
     return null;
   }
 }
-function createKeychainAdapter(knownKeys = [], instance) {
-  const getKc = () => instance ?? (keychain ?? (keychain = getKeychainFromRequire()));
+function createKeychainAdapter() {
+  const getKc = () => getKeychainFromRequire();
   return {
     type: "keychain",
     name: "Keychain",
     async getAllKeys() {
       const kc = getKc();
-      if (!kc) return [...knownKeys];
+      if (!kc) return [];
       const genericServices = [];
       if (typeof kc.getAllGenericPasswordServices === "function") {
         try {
@@ -100,42 +98,32 @@ function createKeychainAdapter(knownKeys = [], instance) {
         } catch {
         }
       }
-      const merged = /* @__PURE__ */ new Set([...genericServices, ...knownKeys]);
-      return Array.from(merged);
+      return [...new Set(genericServices)];
     },
     async getItem(key) {
       const kc = getKc();
-      if (!kc) return null;
-      if (typeof kc.getGenericPassword === "function") {
-        try {
-          const creds2 = await kc.getGenericPassword({ service: key });
-          if (creds2 && typeof creds2 === "object" && "password" in creds2) {
-            return creds2.password;
-          }
-        } catch {
+      if (!kc?.getGenericPassword) return null;
+      try {
+        const creds = await kc.getGenericPassword({ service: key });
+        if (creds && typeof creds === "object" && "password" in creds) {
+          return creds.password;
         }
+      } catch {
       }
-      const creds = await kc.getInternetCredentials(key);
-      return creds?.password ?? null;
+      return null;
     },
     async setItem(key, value) {
       const kc = getKc();
-      if (!kc) throw new Error("react-native-keychain is not available");
-      if (typeof kc.setGenericPassword === "function") {
-        const result2 = await kc.setGenericPassword(key, value, { service: key });
-        if (result2 === false) throw new Error("Keychain set failed");
-        return;
-      }
-      const result = await kc.setInternetCredentials(key, key, value);
+      if (!kc?.setGenericPassword)
+        throw new Error("react-native-keychain is not available");
+      const result = await kc.setGenericPassword(key, value, { service: key });
       if (result === false) throw new Error("Keychain set failed");
     },
     async removeItem(key) {
       const kc = getKc();
-      if (!kc) throw new Error("react-native-keychain is not available");
-      if (typeof kc.resetGenericPassword === "function") {
-        await kc.resetGenericPassword({ service: key });
-      }
-      await kc.resetInternetCredentials(key);
+      if (!kc?.resetGenericPassword)
+        throw new Error("react-native-keychain is not available");
+      await kc.resetGenericPassword({ service: key });
     },
     isAvailable() {
       return getKc() !== null;
@@ -143,8 +131,20 @@ function createKeychainAdapter(knownKeys = [], instance) {
   };
 }
 
+// src/utils.ts
+function parsePersistedKeys(raw) {
+  if (raw == null || raw === "") return [];
+  try {
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return [];
+    return parsed.filter((item) => typeof item === "string");
+  } catch {
+    return [];
+  }
+}
+
 // src/adapters/secure-store.ts
-var secureStore = null;
+var PERSISTED_KEYS_STORAGE_KEY = "__storage_inspector_secure_store_keys__";
 function getSecureStoreFromRequire() {
   try {
     return require("expo-secure-store");
@@ -152,13 +152,17 @@ function getSecureStoreFromRequire() {
     return null;
   }
 }
-function createSecureStoreAdapter(knownKeys = [], instance) {
-  const getStore = () => instance ?? (secureStore ?? (secureStore = getSecureStoreFromRequire()));
+function createSecureStoreAdapter(knownKeys = []) {
+  const getStore = () => getSecureStoreFromRequire();
   return {
     type: "expo-secure-store",
     name: "Secure Store",
     async getAllKeys() {
-      return [...knownKeys];
+      const store = getStore();
+      if (!store) return [];
+      const persistedKeysString = await store.getItemAsync(PERSISTED_KEYS_STORAGE_KEY);
+      const persistedKeys = parsePersistedKeys(persistedKeysString);
+      return [.../* @__PURE__ */ new Set([...knownKeys, ...persistedKeys])];
     },
     async getItem(key) {
       const store = getStore();
@@ -169,11 +173,26 @@ function createSecureStoreAdapter(knownKeys = [], instance) {
       const store = getStore();
       if (!store) throw new Error("expo-secure-store is not available");
       await store.setItemAsync(key, value);
+      if (key === PERSISTED_KEYS_STORAGE_KEY) return;
+      const persistedKeysString = await store.getItemAsync(PERSISTED_KEYS_STORAGE_KEY);
+      const persistedKeys = parsePersistedKeys(persistedKeysString);
+      const newPersistedKeys = [.../* @__PURE__ */ new Set([...persistedKeys, key])];
+      await store.setItemAsync(
+        PERSISTED_KEYS_STORAGE_KEY,
+        JSON.stringify(newPersistedKeys)
+      );
     },
     async removeItem(key) {
       const store = getStore();
       if (!store) throw new Error("expo-secure-store is not available");
       await store.deleteItemAsync(key);
+      const persistedKeysString = await store.getItemAsync(PERSISTED_KEYS_STORAGE_KEY);
+      const persistedKeys = parsePersistedKeys(persistedKeysString);
+      const newPersistedKeys = persistedKeys.filter((k) => k !== key);
+      await store.setItemAsync(
+        PERSISTED_KEYS_STORAGE_KEY,
+        JSON.stringify(newPersistedKeys)
+      );
     },
     isAvailable() {
       return getStore() !== null;
@@ -197,7 +216,8 @@ function useStorageItems(adapter) {
       const pairs = [];
       for (const key of keys) {
         const value = await adapter.getItem(key);
-        pairs.push({ key, value: value ?? "" });
+        if (value === null) continue;
+        pairs.push({ key, value });
       }
       setItems(pairs);
     } catch (e) {
@@ -224,7 +244,8 @@ var theme = {
     text: "#000000",
     textSecondary: "#666666",
     textMuted: "#999999",
-    inverted: "#ffffff"
+    inverted: "#ffffff",
+    overlayBackdrop: "rgba(0,0,0,0.5)"
   }
 };
 
@@ -245,15 +266,11 @@ var ROTATION = {
   chevronDown: "90deg",
   chevronUp: "-90deg"
 };
-function Icon({
-  name,
-  size = 20,
-  tintColor = theme.colors.text,
-  iconStyle
-}) {
+function Icon(props) {
+  const { name, size = 20, tintColor = theme.colors.text, iconStyle } = props;
   const glyph = GLYPHS[name] ?? "?";
   const rotation = ROTATION[name];
-  return /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement(
     Text,
     {
       style: [
@@ -276,7 +293,6 @@ var { width: SCREEN_WIDTH } = Dimensions.get("window");
 var LAYOUT = {
   padding: 16,
   fontSize: 14,
-  headerHeight: 52,
   rowMinHeight: 48,
   sectionHeaderHeight: 48,
   iconSize: 20,
@@ -290,331 +306,242 @@ var LAYOUT = {
   sectionRadius: 4,
   screenWidth: SCREEN_WIDTH
 };
-var { colors } = theme;
+
+// src/components/IconButton.tsx
+function IconButton(props) {
+  const {
+    name,
+    onPress,
+    size = LAYOUT.iconSize,
+    tintColor = theme.colors.text,
+    disabled = false,
+    hitSlop = LAYOUT.hitSlop,
+    style,
+    activeOpacity = 0.6
+  } = props;
+  return /* @__PURE__ */ React7.createElement(
+    TouchableOpacity,
+    {
+      style: [styles2.iconButton, style],
+      onPress,
+      disabled,
+      hitSlop,
+      activeOpacity
+    },
+    /* @__PURE__ */ React7.createElement(
+      Icon,
+      {
+        name,
+        size,
+        tintColor: disabled ? theme.colors.textMuted : tintColor
+      }
+    )
+  );
+}
 var styles2 = StyleSheet.create({
-  container: {
+  iconButton: {
+    width: LAYOUT.iconButtonSize,
+    height: LAYOUT.iconButtonSize,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+
+// src/strings.ts
+var strings = {
+  // StorageInspector
+  noAdapterAvailable: "No storage adapter available. Install at least one of: react-native-mmkv, @react-native-async-storage/async-storage, react-native-keychain, expo-secure-store",
+  // StorageSection
+  keychainHint: "No generic password items yet. Add a key using + above.",
+  secureStoreHint: "Secure Store has no list API. Pass secureStoreKeys prop with known keys, or add a key using + above.",
+  loading: "Loading\u2026",
+  noItems: "No items",
+  valueLabel: "Value",
+  charCount: (n) => n === 1 ? "1 char" : `${n} chars`,
+  deleteItemTitle: (key) => `Delete ${key}?`,
+  deleteItemMessage: (key) => `This will permanently delete the ${key} storage item. Do you wish to continue?`,
+  clearAllTitle: (name) => `Clear All ${name}?`,
+  clearAllMessage: (count, name) => `This will permanently delete all ${count} ${name} items. Do you wish to continue?`,
+  // StorageList
+  storageNotAvailable: "This storage is not available.",
+  keychainHintShort: "No items yet. Add a key below.",
+  edit: "Edit",
+  delete: "Delete",
+  addItem: "Add item",
+  // ItemForm
+  keyRequired: "Key is required",
+  saveFailed: "Save failed",
+  editItemTitle: (key) => `Edit ${key}`,
+  addItemTitle: (storageName) => `Add ${storageName} Item`,
+  storageTypeLabel: (name) => `Storage Type: ${name}`,
+  keyLabel: "Key",
+  enterKeyPlaceholder: "Enter key",
+  enterValuePlaceholder: "Enter value",
+  cancel: "Cancel",
+  saving: "Saving\u2026",
+  save: "Save",
+  add: "Add",
+  // ConfirmModal defaults
+  confirmDelete: "Yes, delete",
+  cancelKeep: "No, keep it"
+};
+
+// src/components/ItemForm.tsx
+function ItemForm(props) {
+  const { visible, storageName, editingItem, onSave, onCancel } = props;
+  const [key, setKey] = useState("");
+  const [value, setValue] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState(null);
+  const isEdit = editingItem !== null;
+  useEffect(() => {
+    if (visible) {
+      setKey(editingItem?.key ?? "");
+      setValue(editingItem?.value ?? "");
+      setError(null);
+    }
+  }, [visible, editingItem]);
+  const handleSubmit = async () => {
+    const k = key.trim();
+    if (!k) {
+      setError(strings.keyRequired);
+      return;
+    }
+    setSaving(true);
+    setError(null);
+    try {
+      await onSave(k, value);
+      onCancel();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : strings.saveFailed);
+    } finally {
+      setSaving(false);
+    }
+  };
+  const title = isEdit ? strings.editItemTitle(editingItem?.key ?? "") : strings.addItemTitle(storageName);
+  return /* @__PURE__ */ React7.createElement(Modal, { visible, transparent: true, animationType: "slide", onRequestClose: onCancel }, /* @__PURE__ */ React7.createElement(View, { style: styles3.formOverlay }, /* @__PURE__ */ React7.createElement(
+    TouchableOpacity,
+    {
+      style: { flex: 1, width: "100%" },
+      activeOpacity: 1,
+      onPress: onCancel
+    }
+  ), /* @__PURE__ */ React7.createElement(View, { style: styles3.formModal }, /* @__PURE__ */ React7.createElement(View, { style: styles3.formHeader }, /* @__PURE__ */ React7.createElement(Text, { style: styles3.formTitle, numberOfLines: 1 }, title), /* @__PURE__ */ React7.createElement(
+    IconButton,
+    {
+      name: "close",
+      onPress: onCancel,
+      size: 24,
+      tintColor: theme.colors.textSecondary,
+      style: styles3.formCloseButton,
+      hitSlop: LAYOUT.hitSlopLarge
+    }
+  )), /* @__PURE__ */ React7.createElement(Text, { style: styles3.formStorageType }, strings.storageTypeLabel(storageName)), /* @__PURE__ */ React7.createElement(Text, { style: styles3.formLabel }, strings.keyLabel), /* @__PURE__ */ React7.createElement(
+    TextInput,
+    {
+      style: [styles3.formInput, isEdit && styles3.formInputDisabled],
+      value: key,
+      onChangeText: setKey,
+      placeholder: strings.enterKeyPlaceholder,
+      placeholderTextColor: theme.colors.textMuted,
+      editable: !isEdit,
+      autoCapitalize: "none",
+      multiline: true
+    }
+  ), /* @__PURE__ */ React7.createElement(Text, { style: styles3.formLabel }, strings.valueLabel), /* @__PURE__ */ React7.createElement(
+    TextInput,
+    {
+      style: styles3.formInput,
+      value,
+      onChangeText: setValue,
+      placeholder: strings.enterValuePlaceholder,
+      placeholderTextColor: theme.colors.textMuted,
+      multiline: true,
+      numberOfLines: 3
+    }
+  ), error ? /* @__PURE__ */ React7.createElement(Text, { style: [styles3.errorText, { marginBottom: 12 }] }, error) : null, /* @__PURE__ */ React7.createElement(View, { style: styles3.formActions }, /* @__PURE__ */ React7.createElement(
+    TouchableOpacity,
+    {
+      style: [styles3.formButton, styles3.formButtonCancel],
+      onPress: onCancel,
+      disabled: saving
+    },
+    /* @__PURE__ */ React7.createElement(Text, { style: [styles3.formButtonText, styles3.formButtonTextCancel] }, strings.cancel)
+  ), /* @__PURE__ */ React7.createElement(
+    TouchableOpacity,
+    {
+      style: [styles3.formButton, styles3.formButtonSubmit],
+      onPress: handleSubmit,
+      disabled: saving
+    },
+    /* @__PURE__ */ React7.createElement(Text, { style: [styles3.formButtonText, styles3.formButtonTextSubmit] }, saving ? strings.saving : isEdit ? strings.save : strings.add)
+  )))));
+}
+var { colors } = theme;
+var styles3 = StyleSheet.create({
+  formOverlay: {
     flex: 1,
-    width: "100%",
-    backgroundColor: colors.background
-  },
-  content: {
-    flex: 1
+    backgroundColor: colors.overlayBackdrop,
+    justifyContent: "flex-end",
+    alignItems: "center"
   },
-  scroll: {
-    flex: 1
+  formModal: {
+    width: "100%",
+    maxWidth: LAYOUT.screenWidth,
+    backgroundColor: colors.background,
+    borderTopLeftRadius: LAYOUT.modalRadius,
+    borderTopRightRadius: LAYOUT.modalRadius,
+    padding: LAYOUT.padding,
+    paddingBottom: LAYOUT.padding + 34
   },
-  header: {
-    height: LAYOUT.headerHeight,
+  formHeader: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
-    paddingHorizontal: LAYOUT.padding,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: colors.border,
-    backgroundColor: colors.background
-  },
-  headerLeft: {
-    minWidth: 44,
-    alignItems: "flex-start"
-  },
-  headerCenter: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  headerRight: {
-    minWidth: 44,
-    alignItems: "flex-end"
-  },
-  sectionHeaderLabelWrap: {
-    flex: 1
+    marginBottom: LAYOUT.padding
   },
-  headerTitle: {
+  formTitle: {
     fontSize: 17,
     fontWeight: "600",
-    color: colors.text
+    color: colors.text,
+    flex: 1
   },
-  headerButton: {
+  formCloseButton: {
     width: 44,
     height: 44,
-    alignItems: "center",
+    alignItems: "flex-end",
     justifyContent: "center"
   },
-  scrollContent: {
-    flexGrow: 1,
-    paddingBottom: LAYOUT.fabSize + LAYOUT.padding + 20,
-    paddingTop: LAYOUT.padding
-  },
-  sectionHeader: {
-    height: LAYOUT.sectionHeaderHeight,
-    flexDirection: "row",
-    alignItems: "center",
-    paddingHorizontal: LAYOUT.padding,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: colors.border,
-    backgroundColor: colors.backgroundSecondary,
-    marginTop: LAYOUT.padding,
-    marginHorizontal: LAYOUT.padding,
-    borderRadius: LAYOUT.sectionRadius
+  formStorageType: {
+    fontSize: 13,
+    color: colors.textSecondary,
+    marginBottom: 12
   },
-  sectionHeaderLabel: {
-    fontSize: 15,
+  formLabel: {
+    fontSize: 12,
     fontWeight: "600",
-    color: colors.text
-  },
-  sectionHeaderCount: {
     color: colors.textSecondary,
-    fontWeight: "400"
+    marginBottom: 6
   },
-  storageRowActions: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: LAYOUT.iconGap
+  formInput: {
+    borderWidth: 1,
+    borderColor: colors.border,
+    borderRadius: 10,
+    padding: 12,
+    fontSize: LAYOUT.fontSize,
+    marginBottom: LAYOUT.padding,
+    color: colors.text,
+    backgroundColor: colors.background
   },
-  iconButton: {
-    width: LAYOUT.iconButtonSize,
-    height: LAYOUT.iconButtonSize,
-    alignItems: "center",
-    justifyContent: "center"
+  formInputDisabled: {
+    backgroundColor: colors.backgroundSecondary,
+    color: colors.textSecondary
   },
-  iconSlot: {
-    width: LAYOUT.iconButtonSize,
-    height: LAYOUT.iconButtonSize,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  itemRow: {
-    minHeight: LAYOUT.rowMinHeight,
-    paddingHorizontal: LAYOUT.padding,
-    paddingVertical: 12,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: colors.borderLight,
-    backgroundColor: colors.background,
-    marginHorizontal: LAYOUT.padding,
-    marginBottom: 4
-  },
-  itemRowCollapsed: {
-    flexDirection: "row",
-    alignItems: "center",
-    alignSelf: "stretch"
-  },
-  itemKey: {
-    flex: 1,
-    fontSize: LAYOUT.fontSize,
-    fontWeight: "500",
-    color: colors.text
-  },
-  itemChars: {
-    fontSize: 12,
-    color: colors.textSecondary,
-    marginTop: 2
-  },
-  itemRowActions: {
-    flexDirection: "row",
-    alignItems: "center",
-    marginLeft: LAYOUT.iconGap,
-    gap: LAYOUT.iconGap
-  },
-  itemRowExpanded: {
-    paddingTop: 4
-  },
-  valueBox: {
-    backgroundColor: colors.backgroundSecondary,
-    borderRadius: 8,
-    padding: 12,
-    marginTop: 8,
-    marginBottom: 8,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: colors.border
-  },
-  valueBoxLabel: {
-    fontSize: 11,
-    fontWeight: "600",
-    color: colors.textSecondary,
-    marginBottom: 4,
-    textTransform: "uppercase"
-  },
-  valueBoxText: {
-    fontSize: LAYOUT.fontSize,
-    color: colors.text
-  },
-  empty: {
-    padding: LAYOUT.padding * 2,
-    alignItems: "center",
-    marginHorizontal: LAYOUT.padding
-  },
-  emptyText: {
-    fontSize: LAYOUT.fontSize,
-    color: colors.textMuted
-  },
-  loading: {
-    padding: LAYOUT.padding * 2,
-    alignItems: "center",
-    marginHorizontal: LAYOUT.padding
-  },
-  loadingText: {
-    fontSize: LAYOUT.fontSize,
-    color: colors.textSecondary
-  },
-  error: {
-    padding: LAYOUT.padding,
-    backgroundColor: colors.backgroundTertiary,
-    marginHorizontal: LAYOUT.padding,
-    marginVertical: 8,
-    borderRadius: 8
-  },
-  errorText: {
-    fontSize: LAYOUT.fontSize,
-    color: colors.text
-  },
-  keychainHint: {
-    padding: LAYOUT.padding,
-    marginHorizontal: LAYOUT.padding,
-    marginTop: 8,
-    marginBottom: 4,
-    backgroundColor: colors.backgroundSecondary,
-    borderRadius: 8
-  },
-  keychainHintText: {
-    fontSize: LAYOUT.fontSize - 1,
-    color: colors.textSecondary
-  },
-  list: {
-    flex: 1
-  },
-  listContent: {
-    flexGrow: 1,
-    paddingBottom: LAYOUT.fabSize + LAYOUT.padding + 20
-  },
-  row: {
-    flexDirection: "row",
-    alignItems: "center",
-    minHeight: LAYOUT.rowMinHeight,
-    paddingHorizontal: LAYOUT.padding,
-    paddingVertical: 12,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: colors.borderLight,
-    backgroundColor: colors.background,
-    marginHorizontal: LAYOUT.padding
-  },
-  rowKey: {
-    flex: 1,
-    fontSize: LAYOUT.fontSize,
-    fontWeight: "500",
-    color: colors.text
-  },
-  rowValue: {
-    fontSize: LAYOUT.fontSize - 1,
-    color: colors.textSecondary
-  },
-  rowActions: {
-    flexDirection: "row",
-    alignItems: "center",
-    marginLeft: LAYOUT.iconGap,
-    gap: LAYOUT.iconGap
-  },
-  rowButton: {
-    paddingVertical: 8,
-    paddingHorizontal: 12
-  },
-  rowButtonText: {
-    fontSize: 14,
-    fontWeight: "600",
-    color: colors.text
-  },
-  rowButtonDanger: {
-    color: colors.text
-  },
-  addButton: {
-    position: "absolute",
-    bottom: LAYOUT.padding + 16,
-    right: LAYOUT.padding + 16,
-    width: LAYOUT.fabSize,
-    height: LAYOUT.fabSize,
-    borderRadius: LAYOUT.fabSize / 2,
-    backgroundColor: colors.text,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  addButtonText: {
-    fontSize: 16,
-    fontWeight: "600",
-    color: colors.inverted
-  },
-  fab: {
-    position: "absolute",
-    bottom: LAYOUT.padding + 16,
-    right: LAYOUT.padding + 16,
-    width: LAYOUT.fabSize,
-    height: LAYOUT.fabSize,
-    borderRadius: LAYOUT.fabSize / 2,
-    backgroundColor: colors.text,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  formOverlay: {
-    flex: 1,
-    backgroundColor: "rgba(0,0,0,0.5)",
-    justifyContent: "flex-end",
-    alignItems: "center"
-  },
-  formModal: {
-    width: "100%",
-    maxWidth: LAYOUT.screenWidth,
-    backgroundColor: colors.background,
-    borderTopLeftRadius: LAYOUT.modalRadius,
-    borderTopRightRadius: LAYOUT.modalRadius,
-    padding: LAYOUT.padding,
-    paddingBottom: LAYOUT.padding + 34
-  },
-  formHeader: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    marginBottom: LAYOUT.padding
-  },
-  formTitle: {
-    fontSize: 17,
-    fontWeight: "600",
-    color: colors.text,
-    flex: 1
-  },
-  formCloseButton: {
-    width: 44,
-    height: 44,
-    alignItems: "flex-end",
-    justifyContent: "center"
-  },
-  formStorageType: {
-    fontSize: 13,
-    color: colors.textSecondary,
-    marginBottom: 12
-  },
-  formLabel: {
-    fontSize: 12,
-    fontWeight: "600",
-    color: colors.textSecondary,
-    marginBottom: 6
-  },
-  formInput: {
-    borderWidth: 1,
-    borderColor: colors.border,
-    borderRadius: 10,
-    padding: 12,
-    fontSize: LAYOUT.fontSize,
-    marginBottom: LAYOUT.padding,
-    color: colors.text,
-    backgroundColor: colors.background
-  },
-  formInputDisabled: {
-    backgroundColor: colors.backgroundSecondary,
-    color: colors.textSecondary
-  },
-  formActions: {
-    flexDirection: "row",
-    justifyContent: "flex-end",
-    gap: 12,
-    marginTop: 8
+  formActions: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    gap: 12,
+    marginTop: 8
   },
   formButton: {
     paddingVertical: 12,
@@ -641,16 +568,79 @@ var styles2 = StyleSheet.create({
   formButtonTextSubmit: {
     color: colors.inverted
   },
+  errorText: {
+    fontSize: LAYOUT.fontSize,
+    color: colors.text
+  }
+});
+function ConfirmModal(props) {
+  const {
+    visible,
+    title,
+    message,
+    confirmLabel = strings.confirmDelete,
+    cancelLabel = strings.cancelKeep,
+    danger = true,
+    onConfirm,
+    onCancel
+  } = props;
+  return /* @__PURE__ */ React7.createElement(Modal, { visible, transparent: true, animationType: "slide", onRequestClose: onCancel }, /* @__PURE__ */ React7.createElement(View, { style: styles4.confirmOverlay }, /* @__PURE__ */ React7.createElement(
+    TouchableOpacity,
+    {
+      style: { flex: 1, width: "100%" },
+      activeOpacity: 1,
+      onPress: onCancel
+    }
+  ), /* @__PURE__ */ React7.createElement(View, { style: styles4.confirmModal }, /* @__PURE__ */ React7.createElement(View, { style: styles4.confirmHeader }, /* @__PURE__ */ React7.createElement(Text, { style: styles4.confirmTitle }, title), /* @__PURE__ */ React7.createElement(
+    IconButton,
+    {
+      name: "close",
+      onPress: onCancel,
+      size: 24,
+      tintColor: theme.colors.textSecondary,
+      style: styles4.formCloseButton,
+      hitSlop: LAYOUT.hitSlopLarge
+    }
+  )), /* @__PURE__ */ React7.createElement(Text, { style: styles4.confirmMessage }, message), /* @__PURE__ */ React7.createElement(View, { style: styles4.confirmActions }, /* @__PURE__ */ React7.createElement(
+    TouchableOpacity,
+    {
+      style: [styles4.confirmButton, styles4.confirmButtonSecondary],
+      onPress: onCancel
+    },
+    /* @__PURE__ */ React7.createElement(Text, { style: [styles4.confirmButtonText, styles4.confirmButtonTextSecondary] }, cancelLabel)
+  ), /* @__PURE__ */ React7.createElement(
+    TouchableOpacity,
+    {
+      style: [
+        styles4.confirmButton,
+        danger ? styles4.confirmButtonDanger : styles4.formButtonSubmit
+      ],
+      onPress: onConfirm
+    },
+    /* @__PURE__ */ React7.createElement(
+      Text,
+      {
+        style: [
+          styles4.confirmButtonText,
+          danger ? styles4.confirmButtonTextDanger : styles4.formButtonTextSubmit
+        ]
+      },
+      confirmLabel
+    )
+  )))));
+}
+var { colors: colors2 } = theme;
+var styles4 = StyleSheet.create({
   confirmOverlay: {
     flex: 1,
-    backgroundColor: "rgba(0,0,0,0.5)",
+    backgroundColor: colors2.overlayBackdrop,
     justifyContent: "flex-end",
     alignItems: "center"
   },
   confirmModal: {
     width: "100%",
     maxWidth: LAYOUT.screenWidth,
-    backgroundColor: colors.background,
+    backgroundColor: colors2.background,
     borderTopLeftRadius: LAYOUT.modalRadius,
     borderTopRightRadius: LAYOUT.modalRadius,
     padding: LAYOUT.padding,
@@ -665,12 +655,18 @@ var styles2 = StyleSheet.create({
   confirmTitle: {
     fontSize: 17,
     fontWeight: "600",
-    color: colors.text,
+    color: colors2.text,
     flex: 1
   },
+  formCloseButton: {
+    width: 44,
+    height: 44,
+    alignItems: "flex-end",
+    justifyContent: "center"
+  },
   confirmMessage: {
     fontSize: 15,
-    color: colors.textSecondary,
+    color: colors2.textSecondary,
     lineHeight: 22,
     marginBottom: 20
   },
@@ -686,278 +682,171 @@ var styles2 = StyleSheet.create({
   },
   confirmButtonSecondary: {
     backgroundColor: "transparent",
-    borderWidth: 1,
-    borderColor: colors.text
-  },
-  confirmButtonDanger: {
-    backgroundColor: colors.text
-  },
-  confirmButtonText: {
-    fontSize: 16,
-    fontWeight: "600"
-  },
-  confirmButtonTextSecondary: {
-    color: colors.text
-  },
-  confirmButtonTextDanger: {
-    color: colors.inverted
-  }
-});
-
-// src/components/IconButton.tsx
-function IconButton({
-  name,
-  onPress,
-  size = LAYOUT.iconSize,
-  tintColor = theme.colors.text,
-  disabled = false,
-  hitSlop = LAYOUT.hitSlop,
-  style,
-  activeOpacity = 0.6
-}) {
-  return /* @__PURE__ */ React6.createElement(
-    TouchableOpacity,
-    {
-      style: [styles2.iconButton, style],
-      onPress,
-      disabled,
-      hitSlop,
-      activeOpacity
-    },
-    /* @__PURE__ */ React6.createElement(
-      Icon,
-      {
-        name,
-        size,
-        tintColor: disabled ? theme.colors.textMuted : tintColor
-      }
-    )
-  );
-}
-
-// src/strings.ts
-var strings = {
-  // StorageInspector
-  noAdapterAvailable: "No storage adapter available. Install at least one of: react-native-mmkv, @react-native-async-storage/async-storage, react-native-keychain, expo-secure-store",
-  // StorageSection
-  keychainHint: "No generic password items yet. Add a key using + above, or pass keychainKeys for internet credentials.",
-  secureStoreHint: "Secure Store has no list API. Pass secureStoreKeys prop with known keys, or add a key using + above.",
-  loading: "Loading\u2026",
-  noItems: "No items",
-  valueLabel: "Value",
-  emptyValue: "(empty)",
-  charCount: (n) => n === 1 ? "1 char" : `${n} chars`,
-  deleteItemTitle: (key) => `Delete ${key}?`,
-  deleteItemMessage: (key) => `This will permanently delete the ${key} storage item. Do you wish to continue?`,
-  clearAllTitle: (name) => `Clear All ${name}?`,
-  clearAllMessage: (count, name) => `This will permanently delete all ${count} ${name} items. Do you wish to continue?`,
-  // StorageList
-  storageNotAvailable: "This storage is not available.",
-  keychainHintShort: "No items yet. Add a key below, or pass keychainKeys for internet credentials.",
-  edit: "Edit",
-  delete: "Delete",
-  addItem: "Add item",
-  // ItemForm
-  keyRequired: "Key is required",
-  saveFailed: "Save failed",
-  editItemTitle: (key) => `Edit ${key}`,
-  addItemTitle: (storageName) => `Add ${storageName} Item`,
-  storageTypeLabel: (name) => `Storage Type: ${name}`,
-  keyLabel: "Key",
-  enterKeyPlaceholder: "Enter key",
-  enterValuePlaceholder: "Enter value",
-  cancel: "Cancel",
-  saving: "Saving\u2026",
-  save: "Save",
-  add: "Add",
-  // ConfirmModal defaults
-  confirmDelete: "Yes, delete",
-  cancelKeep: "No, keep it"
-};
-
-// src/components/ItemForm.tsx
-function ItemForm({
-  visible,
-  storageName,
-  editingItem,
-  onSave,
-  onCancel
-}) {
-  const [key, setKey] = useState("");
-  const [value, setValue] = useState("");
-  const [saving, setSaving] = useState(false);
-  const [error, setError] = useState(null);
-  const isEdit = editingItem !== null;
-  useEffect(() => {
-    if (visible) {
-      setKey(editingItem?.key ?? "");
-      setValue(editingItem?.value ?? "");
-      setError(null);
-    }
-  }, [visible, editingItem]);
-  const handleSubmit = async () => {
-    const k = key.trim();
-    if (!k) {
-      setError(strings.keyRequired);
-      return;
-    }
-    setSaving(true);
-    setError(null);
-    try {
-      await onSave(k, value);
-      onCancel();
-    } catch (e) {
-      setError(e instanceof Error ? e.message : strings.saveFailed);
-    } finally {
-      setSaving(false);
-    }
-  };
-  const title = isEdit ? strings.editItemTitle(editingItem?.key ?? "") : strings.addItemTitle(storageName);
-  return /* @__PURE__ */ React6.createElement(Modal, { visible, transparent: true, animationType: "slide", onRequestClose: onCancel }, /* @__PURE__ */ React6.createElement(View, { style: styles2.formOverlay }, /* @__PURE__ */ React6.createElement(
-    TouchableOpacity,
-    {
-      style: { flex: 1, width: "100%" },
-      activeOpacity: 1,
-      onPress: onCancel
-    }
-  ), /* @__PURE__ */ React6.createElement(View, { style: styles2.formModal }, /* @__PURE__ */ React6.createElement(View, { style: styles2.formHeader }, /* @__PURE__ */ React6.createElement(Text, { style: styles2.formTitle, numberOfLines: 1 }, title), /* @__PURE__ */ React6.createElement(
-    IconButton,
-    {
-      name: "close",
-      onPress: onCancel,
-      size: 24,
-      tintColor: theme.colors.textSecondary,
-      style: styles2.formCloseButton,
-      hitSlop: LAYOUT.hitSlopLarge
-    }
-  )), /* @__PURE__ */ React6.createElement(Text, { style: styles2.formStorageType }, strings.storageTypeLabel(storageName)), /* @__PURE__ */ React6.createElement(Text, { style: styles2.formLabel }, strings.keyLabel), /* @__PURE__ */ React6.createElement(
-    TextInput,
-    {
-      style: [styles2.formInput, isEdit && styles2.formInputDisabled],
-      value: key,
-      onChangeText: setKey,
-      placeholder: strings.enterKeyPlaceholder,
-      placeholderTextColor: theme.colors.textMuted,
-      editable: !isEdit,
-      autoCapitalize: "none",
-      multiline: true
-    }
-  ), /* @__PURE__ */ React6.createElement(Text, { style: styles2.formLabel }, strings.valueLabel), /* @__PURE__ */ React6.createElement(
-    TextInput,
+    borderWidth: 1,
+    borderColor: colors2.text
+  },
+  confirmButtonDanger: {
+    backgroundColor: colors2.text
+  },
+  formButtonSubmit: {
+    backgroundColor: colors2.text
+  },
+  confirmButtonText: {
+    fontSize: 16,
+    fontWeight: "600"
+  },
+  confirmButtonTextSecondary: {
+    color: colors2.text
+  },
+  confirmButtonTextDanger: {
+    color: colors2.inverted
+  },
+  formButtonTextSubmit: {
+    color: colors2.inverted
+  }
+});
+function ItemRowActions(props) {
+  const {
+    item,
+    onCopy,
+    onEdit,
+    onDelete,
+    showChevron = false,
+    chevronDirection = "down"
+  } = props;
+  return /* @__PURE__ */ React7.createElement(View, { style: styles5.itemRowActions }, /* @__PURE__ */ React7.createElement(IconButton, { name: "copy", onPress: () => onCopy(item) }), /* @__PURE__ */ React7.createElement(IconButton, { name: "edit", onPress: () => onEdit(item) }), /* @__PURE__ */ React7.createElement(IconButton, { name: "trash", onPress: () => onDelete(item) }), showChevron && /* @__PURE__ */ React7.createElement(View, { style: styles5.iconSlot }, /* @__PURE__ */ React7.createElement(
+    Icon,
     {
-      style: styles2.formInput,
-      value,
-      onChangeText: setValue,
-      placeholder: strings.enterValuePlaceholder,
-      placeholderTextColor: theme.colors.textMuted,
-      multiline: true,
-      numberOfLines: 3
+      name: chevronDirection === "up" ? "chevronUp" : "chevronDown",
+      size: LAYOUT.chevronSize,
+      tintColor: theme.colors.text
     }
-  ), error ? /* @__PURE__ */ React6.createElement(Text, { style: [styles2.errorText, { marginBottom: 12 }] }, error) : null, /* @__PURE__ */ React6.createElement(View, { style: styles2.formActions }, /* @__PURE__ */ React6.createElement(
-    TouchableOpacity,
-    {
-      style: [styles2.formButton, styles2.formButtonCancel],
-      onPress: onCancel,
-      disabled: saving
-    },
-    /* @__PURE__ */ React6.createElement(Text, { style: [styles2.formButtonText, styles2.formButtonTextCancel] }, strings.cancel)
-  ), /* @__PURE__ */ React6.createElement(
-    TouchableOpacity,
-    {
-      style: [styles2.formButton, styles2.formButtonSubmit],
-      onPress: handleSubmit,
-      disabled: saving
-    },
-    /* @__PURE__ */ React6.createElement(Text, { style: [styles2.formButtonText, styles2.formButtonTextSubmit] }, saving ? strings.saving : isEdit ? strings.save : strings.add)
-  )))));
+  )));
 }
-function ConfirmModal({
-  visible,
-  title,
-  message,
-  confirmLabel = strings.confirmDelete,
-  cancelLabel = strings.cancelKeep,
-  danger = true,
-  onConfirm,
-  onCancel
-}) {
-  const handleConfirm = () => {
-    void Promise.resolve(onConfirm());
+var styles5 = StyleSheet.create({
+  itemRowActions: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginLeft: LAYOUT.iconGap,
+    gap: LAYOUT.iconGap
+  },
+  iconSlot: {
+    width: LAYOUT.iconButtonSize,
+    height: LAYOUT.iconButtonSize,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+
+// src/components/StorageList.tsx
+function StorageList(props) {
+  const { item, onCopy, onEdit, onDelete } = props;
+  const [expandedKeys, setExpandedKeys] = useState(/* @__PURE__ */ new Set());
+  const charCount = item.value.length;
+  const handleToggleExpanded = () => {
+    setExpandedKeys((prev) => {
+      const next = new Set(prev);
+      if (next.has(item.key)) next.delete(item.key);
+      else next.add(item.key);
+      return next;
+    });
   };
-  return /* @__PURE__ */ React6.createElement(Modal, { visible, transparent: true, animationType: "slide", onRequestClose: onCancel }, /* @__PURE__ */ React6.createElement(View, { style: styles2.confirmOverlay }, /* @__PURE__ */ React6.createElement(
-    TouchableOpacity,
-    {
-      style: { flex: 1, width: "100%" },
-      activeOpacity: 1,
-      onPress: onCancel
-    }
-  ), /* @__PURE__ */ React6.createElement(View, { style: styles2.confirmModal }, /* @__PURE__ */ React6.createElement(View, { style: styles2.confirmHeader }, /* @__PURE__ */ React6.createElement(Text, { style: styles2.confirmTitle }, title), /* @__PURE__ */ React6.createElement(
-    IconButton,
+  const isExpanded = expandedKeys.has(item.key);
+  return /* @__PURE__ */ React7.createElement(View, { style: styles6.itemRow }, /* @__PURE__ */ React7.createElement(TouchableOpacity, { onPress: handleToggleExpanded, activeOpacity: 0.7 }, /* @__PURE__ */ React7.createElement(View, { style: styles6.itemRowCollapsed }, /* @__PURE__ */ React7.createElement(View, { style: { flex: 1 } }, /* @__PURE__ */ React7.createElement(Text, { style: styles6.itemKey, numberOfLines: 1 }, item.key), /* @__PURE__ */ React7.createElement(Text, { style: styles6.itemChars }, strings.charCount(charCount))), !isExpanded ? /* @__PURE__ */ React7.createElement(
+    ItemRowActions,
     {
-      name: "close",
-      onPress: onCancel,
-      size: 24,
-      tintColor: theme.colors.textSecondary,
-      style: styles2.formCloseButton,
-      hitSlop: LAYOUT.hitSlopLarge
+      item,
+      onCopy,
+      onEdit,
+      onDelete,
+      showChevron: true,
+      chevronDirection: "down"
     }
-  )), /* @__PURE__ */ React6.createElement(Text, { style: styles2.confirmMessage }, message), /* @__PURE__ */ React6.createElement(View, { style: styles2.confirmActions }, /* @__PURE__ */ React6.createElement(
-    TouchableOpacity,
-    {
-      style: [styles2.confirmButton, styles2.confirmButtonSecondary],
-      onPress: onCancel
-    },
-    /* @__PURE__ */ React6.createElement(Text, { style: [styles2.confirmButtonText, styles2.confirmButtonTextSecondary] }, cancelLabel)
-  ), /* @__PURE__ */ React6.createElement(
-    TouchableOpacity,
-    {
-      style: [
-        styles2.confirmButton,
-        danger ? styles2.confirmButtonDanger : styles2.formButtonSubmit
-      ],
-      onPress: handleConfirm
-    },
-    /* @__PURE__ */ React6.createElement(
-      Text,
-      {
-        style: [
-          styles2.confirmButtonText,
-          danger ? styles2.confirmButtonTextDanger : styles2.formButtonTextSubmit
-        ]
-      },
-      confirmLabel
-    )
-  )))));
-}
-function ItemRowActions({
-  item,
-  onCopy,
-  onEdit,
-  onDelete,
-  showChevron = false,
-  chevronDirection = "down"
-}) {
-  return /* @__PURE__ */ React6.createElement(View, { style: styles2.itemRowActions }, /* @__PURE__ */ React6.createElement(IconButton, { name: "copy", onPress: () => onCopy(item) }), /* @__PURE__ */ React6.createElement(IconButton, { name: "edit", onPress: () => onEdit(item) }), /* @__PURE__ */ React6.createElement(IconButton, { name: "trash", onPress: () => onDelete(item) }), showChevron && /* @__PURE__ */ React6.createElement(View, { style: styles2.iconSlot }, /* @__PURE__ */ React6.createElement(
+  ) : /* @__PURE__ */ React7.createElement(View, { style: styles6.iconSlot }, /* @__PURE__ */ React7.createElement(
     Icon,
     {
-      name: chevronDirection === "up" ? "chevronUp" : "chevronDown",
+      name: "chevronUp",
       size: LAYOUT.chevronSize,
       tintColor: theme.colors.text
     }
+  )))), isExpanded && /* @__PURE__ */ React7.createElement(View, { style: styles6.itemRowExpanded }, /* @__PURE__ */ React7.createElement(TouchableOpacity, { onPress: () => onEdit(item), style: styles6.valueBox }, /* @__PURE__ */ React7.createElement(Text, { style: styles6.valueBoxLabel }, strings.valueLabel), /* @__PURE__ */ React7.createElement(Text, { style: styles6.valueBoxText, selectable: true }, item.value)), /* @__PURE__ */ React7.createElement(
+    ItemRowActions,
+    {
+      item,
+      onCopy,
+      onEdit,
+      onDelete
+    }
   )));
 }
+var { colors: colors3 } = theme;
+var styles6 = StyleSheet.create({
+  itemRow: {
+    minHeight: LAYOUT.rowMinHeight,
+    paddingHorizontal: LAYOUT.padding,
+    paddingVertical: 12,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: colors3.borderLight,
+    backgroundColor: colors3.background,
+    marginHorizontal: LAYOUT.padding,
+    marginBottom: 4
+  },
+  itemRowCollapsed: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "stretch"
+  },
+  itemKey: {
+    flex: 1,
+    fontSize: LAYOUT.fontSize,
+    fontWeight: "500",
+    color: colors3.text
+  },
+  itemChars: {
+    fontSize: 12,
+    color: colors3.textSecondary,
+    marginTop: 2
+  },
+  iconSlot: {
+    width: LAYOUT.iconButtonSize,
+    height: LAYOUT.iconButtonSize,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  itemRowExpanded: {
+    paddingTop: 4
+  },
+  valueBox: {
+    backgroundColor: colors3.backgroundSecondary,
+    borderRadius: 8,
+    padding: 12,
+    marginTop: 8,
+    marginBottom: 8,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: colors3.border
+  },
+  valueBoxLabel: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: colors3.textSecondary,
+    marginBottom: 4,
+    textTransform: "uppercase"
+  },
+  valueBoxText: {
+    fontSize: LAYOUT.fontSize,
+    color: colors3.text
+  }
+});
 
 // src/components/StorageSection.tsx
-function StorageSection({
-  adapter,
-  keychainKeys,
-  onKeychainKeyAdded,
-  onSecureStoreKeyAdded,
-  defaultExpanded = true,
-  expanded: expandedProp,
-  onToggleExpanded,
-  refreshTrigger
-}) {
+function StorageSection(props) {
+  const {
+    adapter,
+    defaultExpanded = true,
+    expanded: expandedProp,
+    onToggleExpanded,
+    refreshTrigger
+  } = props;
   const { items, loading, error, refresh } = useStorageItems(adapter);
   const [expandedInternal, setExpandedInternal] = useState(defaultExpanded);
   const expanded = expandedProp !== void 0 ? expandedProp : expandedInternal;
@@ -968,7 +857,6 @@ function StorageSection({
   useEffect(() => {
     if (refreshTrigger !== void 0) refresh();
   }, [refreshTrigger, refresh]);
-  const [expandedKeys, setExpandedKeys] = useState(/* @__PURE__ */ new Set());
   const [formVisible, setFormVisible] = useState(false);
   const [editingItem, setEditingItem] = useState(null);
   const [deleteItem, setDeleteItem] = useState(null);
@@ -982,14 +870,7 @@ function StorageSection({
     setFormVisible(true);
   };
   const handleSave = async (key, value) => {
-    const isNewKey = !editingItem || editingItem.key !== key;
     await adapter.setItem(key, value);
-    if (adapter.type === "keychain" && isNewKey) {
-      onKeychainKeyAdded?.(key);
-    }
-    if (adapter.type === "expo-secure-store" && isNewKey) {
-      onSecureStoreKeyAdded?.(key);
-    }
     await refresh();
   };
   const handleDeleteItem = async () => {
@@ -1017,25 +898,25 @@ function StorageSection({
   };
   const isKeychain = adapter.type === "keychain";
   const isSecureStore = adapter.type === "expo-secure-store";
-  const showKeychainHint = isKeychain && items.length === 0 && (keychainKeys?.length ?? 0) === 0;
+  const showKeychainHint = isKeychain && items.length === 0;
   const showSecureStoreHint = isSecureStore && items.length === 0;
   if (!adapter.isAvailable()) return null;
-  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(
     TouchableOpacity,
     {
-      style: styles2.sectionHeader,
+      style: styles7.sectionHeader,
       onPress: handleToggleExpanded,
       activeOpacity: 0.7
     },
-    /* @__PURE__ */ React6.createElement(View, { style: styles2.sectionHeaderLabelWrap }, /* @__PURE__ */ React6.createElement(Text, { style: styles2.sectionHeaderLabel }, adapter.name, /* @__PURE__ */ React6.createElement(Text, { style: styles2.sectionHeaderCount }, " (", items.length, ")"))),
-    /* @__PURE__ */ React6.createElement(View, { style: styles2.storageRowActions }, /* @__PURE__ */ React6.createElement(IconButton, { name: "plus", onPress: handleAdd }), /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React7.createElement(View, { style: styles7.sectionHeaderLabelWrap }, /* @__PURE__ */ React7.createElement(Text, { style: styles7.sectionHeaderLabel }, adapter.name, /* @__PURE__ */ React7.createElement(Text, { style: styles7.sectionHeaderCount }, " (", items.length, ")"))),
+    /* @__PURE__ */ React7.createElement(View, { style: styles7.storageRowActions }, /* @__PURE__ */ React7.createElement(IconButton, { name: "plus", onPress: handleAdd }), /* @__PURE__ */ React7.createElement(
       IconButton,
       {
         name: "trash",
         onPress: () => items.length > 0 && setClearAllVisible(true),
         disabled: items.length === 0
       }
-    ), /* @__PURE__ */ React6.createElement(View, { style: styles2.iconSlot }, /* @__PURE__ */ React6.createElement(
+    ), /* @__PURE__ */ React7.createElement(View, { style: styles7.iconSlot }, /* @__PURE__ */ React7.createElement(
       Icon,
       {
         name: expanded ? "chevronUp" : "chevronDown",
@@ -1043,60 +924,16 @@ function StorageSection({
         tintColor: theme.colors.text
       }
     )))
-  ), expanded && /* @__PURE__ */ React6.createElement(React6.Fragment, null, showKeychainHint ? /* @__PURE__ */ React6.createElement(View, { style: styles2.keychainHint }, /* @__PURE__ */ React6.createElement(Text, { style: styles2.keychainHintText }, strings.keychainHint)) : null, showSecureStoreHint ? /* @__PURE__ */ React6.createElement(View, { style: styles2.keychainHint }, /* @__PURE__ */ React6.createElement(Text, { style: styles2.keychainHintText }, strings.secureStoreHint)) : null, error ? /* @__PURE__ */ React6.createElement(View, { style: styles2.error }, /* @__PURE__ */ React6.createElement(Text, { style: styles2.errorText }, error)) : null, loading ? /* @__PURE__ */ React6.createElement(View, { style: styles2.loading }, /* @__PURE__ */ React6.createElement(Text, { style: styles2.loadingText }, strings.loading)) : items.map((item) => {
-    const isItemExpanded = expandedKeys.has(item.key);
-    const charCount = item.value.length;
-    const toggleItemExpanded = () => {
-      setExpandedKeys((prev) => {
-        const next = new Set(prev);
-        if (next.has(item.key)) next.delete(item.key);
-        else next.add(item.key);
-        return next;
-      });
-    };
-    return /* @__PURE__ */ React6.createElement(View, { key: item.key, style: styles2.itemRow }, /* @__PURE__ */ React6.createElement(
-      TouchableOpacity,
-      {
-        key: item.key,
-        onPress: toggleItemExpanded,
-        activeOpacity: 0.7
-      },
-      /* @__PURE__ */ React6.createElement(View, { style: styles2.itemRowCollapsed }, /* @__PURE__ */ React6.createElement(View, { style: { flex: 1 } }, /* @__PURE__ */ React6.createElement(Text, { style: styles2.itemKey, numberOfLines: 1 }, item.key), /* @__PURE__ */ React6.createElement(Text, { style: styles2.itemChars }, strings.charCount(charCount))), !isItemExpanded ? /* @__PURE__ */ React6.createElement(
-        ItemRowActions,
-        {
-          item,
-          onCopy: handleCopy,
-          onEdit: handleEdit,
-          onDelete: setDeleteItem,
-          showChevron: true,
-          chevronDirection: "down"
-        }
-      ) : /* @__PURE__ */ React6.createElement(View, { style: styles2.iconSlot }, /* @__PURE__ */ React6.createElement(
-        Icon,
-        {
-          name: "chevronUp",
-          size: LAYOUT.chevronSize,
-          tintColor: theme.colors.text
-        }
-      )))
-    ), isItemExpanded && /* @__PURE__ */ React6.createElement(View, { style: styles2.itemRowExpanded }, /* @__PURE__ */ React6.createElement(
-      TouchableOpacity,
-      {
-        onPress: () => handleEdit(item),
-        style: styles2.valueBox
-      },
-      /* @__PURE__ */ React6.createElement(Text, { style: styles2.valueBoxLabel }, strings.valueLabel),
-      /* @__PURE__ */ React6.createElement(Text, { style: styles2.valueBoxText, selectable: true }, item.value || strings.emptyValue)
-    ), /* @__PURE__ */ React6.createElement(
-      ItemRowActions,
-      {
-        item,
-        onCopy: handleCopy,
-        onEdit: handleEdit,
-        onDelete: setDeleteItem
-      }
-    )));
-  }), !loading && items.length === 0 && !showKeychainHint && !showSecureStoreHint ? /* @__PURE__ */ React6.createElement(View, { style: styles2.empty }, /* @__PURE__ */ React6.createElement(Text, { style: styles2.emptyText }, strings.noItems)) : null), /* @__PURE__ */ React6.createElement(
+  ), expanded && /* @__PURE__ */ React7.createElement(React7.Fragment, null, showKeychainHint ? /* @__PURE__ */ React7.createElement(View, { style: styles7.keychainHint }, /* @__PURE__ */ React7.createElement(Text, { style: styles7.keychainHintText }, strings.keychainHint)) : null, showSecureStoreHint ? /* @__PURE__ */ React7.createElement(View, { style: styles7.keychainHint }, /* @__PURE__ */ React7.createElement(Text, { style: styles7.keychainHintText }, strings.secureStoreHint)) : null, error ? /* @__PURE__ */ React7.createElement(View, { style: styles7.error }, /* @__PURE__ */ React7.createElement(Text, { style: styles7.errorText }, error)) : null, loading ? /* @__PURE__ */ React7.createElement(View, { style: styles7.loading }, /* @__PURE__ */ React7.createElement(Text, { style: styles7.loadingText }, strings.loading)) : items.map((item) => /* @__PURE__ */ React7.createElement(
+    StorageList,
+    {
+      key: item.key,
+      item,
+      onCopy: handleCopy,
+      onEdit: handleEdit,
+      onDelete: setDeleteItem
+    }
+  )), !loading && items.length === 0 && !showKeychainHint && !showSecureStoreHint ? /* @__PURE__ */ React7.createElement(View, { style: styles7.empty }, /* @__PURE__ */ React7.createElement(Text, { style: styles7.emptyText }, strings.noItems)) : null), /* @__PURE__ */ React7.createElement(
     ItemForm,
     {
       visible: formVisible,
@@ -1108,7 +945,7 @@ function StorageSection({
         setEditingItem(null);
       }
     }
-  ), /* @__PURE__ */ React6.createElement(
+  ), /* @__PURE__ */ React7.createElement(
     ConfirmModal,
     {
       visible: deleteItem !== null,
@@ -1117,7 +954,7 @@ function StorageSection({
       onConfirm: handleDeleteItem,
       onCancel: () => setDeleteItem(null)
     }
-  ), /* @__PURE__ */ React6.createElement(
+  ), /* @__PURE__ */ React7.createElement(
     ConfirmModal,
     {
       visible: clearAllVisible,
@@ -1128,30 +965,92 @@ function StorageSection({
     }
   ));
 }
+var { colors: colors4 } = theme;
+var styles7 = StyleSheet.create({
+  sectionHeader: {
+    height: LAYOUT.sectionHeaderHeight,
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: LAYOUT.padding,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: colors4.border,
+    backgroundColor: colors4.backgroundSecondary,
+    marginTop: LAYOUT.padding,
+    marginHorizontal: LAYOUT.padding,
+    borderRadius: LAYOUT.sectionRadius
+  },
+  sectionHeaderLabelWrap: {
+    flex: 1
+  },
+  sectionHeaderLabel: {
+    fontSize: 15,
+    fontWeight: "600",
+    color: colors4.text
+  },
+  sectionHeaderCount: {
+    color: colors4.textSecondary,
+    fontWeight: "400"
+  },
+  storageRowActions: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: LAYOUT.iconGap
+  },
+  iconSlot: {
+    width: LAYOUT.iconButtonSize,
+    height: LAYOUT.iconButtonSize,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  keychainHint: {
+    padding: LAYOUT.padding,
+    marginHorizontal: LAYOUT.padding,
+    marginTop: 8,
+    marginBottom: 4,
+    backgroundColor: colors4.backgroundSecondary,
+    borderRadius: 8
+  },
+  keychainHintText: {
+    fontSize: LAYOUT.fontSize - 1,
+    color: colors4.textSecondary
+  },
+  error: {
+    padding: LAYOUT.padding,
+    backgroundColor: colors4.backgroundTertiary,
+    marginHorizontal: LAYOUT.padding,
+    marginVertical: 8,
+    borderRadius: 8
+  },
+  errorText: {
+    fontSize: LAYOUT.fontSize,
+    color: colors4.text
+  },
+  loading: {
+    padding: LAYOUT.padding * 2,
+    alignItems: "center",
+    marginHorizontal: LAYOUT.padding
+  },
+  loadingText: {
+    fontSize: LAYOUT.fontSize,
+    color: colors4.textSecondary
+  },
+  empty: {
+    padding: LAYOUT.padding * 2,
+    alignItems: "center",
+    marginHorizontal: LAYOUT.padding
+  },
+  emptyText: {
+    fontSize: LAYOUT.fontSize,
+    color: colors4.textMuted
+  }
+});
 
 // src/components/StorageInspector.tsx
-function StorageInspector({
-  mmkvInstances = [],
-  asyncStorageInstance,
-  keychainKeys: keychainKeysProp,
-  keychainInstance,
-  secureStoreKeys: secureStoreKeysProp,
-  secureStoreInstance,
-  customAdapters = []
-}) {
-  const [keychainKeysAdded, setKeychainKeysAdded] = useState([]);
-  const [secureStoreKeysAdded, setSecureStoreKeysAdded] = useState([]);
+function StorageInspector(props) {
+  const { mmkvInstances = [], secureStoreKeys, customAdapters = [] } = props;
   const [refreshKey, setRefreshKey] = useState(0);
   const [refreshing, setRefreshing] = useState(false);
   const [expandedIndices, setExpandedIndices] = useState(() => /* @__PURE__ */ new Set([0]));
-  const keychainKeys = useMemo(
-    () => [...keychainKeysProp ?? [], ...keychainKeysAdded],
-    [keychainKeysProp, keychainKeysAdded]
-  );
-  const secureStoreKeys = useMemo(
-    () => [...secureStoreKeysProp ?? [], ...secureStoreKeysAdded],
-    [secureStoreKeysProp, secureStoreKeysAdded]
-  );
   const adapters = useMemo(() => {
     const list = [];
     mmkvInstances.forEach((inst, i) => {
@@ -1159,58 +1058,34 @@ function StorageInspector({
         createMMKVAdapter(inst, mmkvInstances.length > 1 ? `MMKV ${i + 1}` : "MMKV")
       );
     });
-    const asyncAdapter = createAsyncStorageAdapter(asyncStorageInstance);
+    const asyncAdapter = createAsyncStorageAdapter();
     if (asyncAdapter.isAvailable()) list.push(asyncAdapter);
-    const keychainAdapter = createKeychainAdapter(keychainKeys, keychainInstance);
+    const keychainAdapter = createKeychainAdapter();
     if (keychainAdapter.isAvailable()) list.push(keychainAdapter);
-    const secureStoreAdapter = createSecureStoreAdapter(
-      secureStoreKeys,
-      secureStoreInstance
-    );
+    const secureStoreAdapter = createSecureStoreAdapter(secureStoreKeys ?? []);
     if (secureStoreAdapter.isAvailable()) list.push(secureStoreAdapter);
     list.push(...customAdapters);
-    return list;
-  }, [
-    mmkvInstances,
-    asyncStorageInstance,
-    keychainKeys,
-    keychainInstance,
-    secureStoreKeys,
-    secureStoreInstance,
-    customAdapters
-  ]);
-  const handleKeychainKeyAdded = (key) => {
-    setKeychainKeysAdded(
-      (prev) => prev.includes(key) ? prev : [...prev, key]
-    );
-  };
-  const handleSecureStoreKeyAdded = (key) => {
-    setSecureStoreKeysAdded(
-      (prev) => prev.includes(key) ? prev : [...prev, key]
-    );
-  };
+    return list.sort((a, b) => a.name.localeCompare(b.name));
+  }, [mmkvInstances, secureStoreKeys, customAdapters]);
   const handleRefresh = () => {
     setRefreshing(true);
     setRefreshKey((k) => k + 1);
     setTimeout(() => setRefreshing(false), 400);
   };
-  return /* @__PURE__ */ React6.createElement(View, { style: styles2.container }, /* @__PURE__ */ React6.createElement(View, { style: styles2.content }, adapters.length > 0 ? /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement(View, { style: styles8.container }, /* @__PURE__ */ React7.createElement(View, { style: styles8.content }, adapters.length > 0 ? /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(
     ScrollView,
     {
-      style: styles2.scroll,
-      contentContainerStyle: styles2.scrollContent,
+      style: styles8.scroll,
+      contentContainerStyle: styles8.scrollContent,
       keyboardShouldPersistTaps: "handled",
       showsVerticalScrollIndicator: true,
-      refreshControl: /* @__PURE__ */ React6.createElement(RefreshControl, { refreshing, onRefresh: handleRefresh })
+      refreshControl: /* @__PURE__ */ React7.createElement(RefreshControl, { refreshing, onRefresh: handleRefresh })
     },
-    adapters.map((adapter, index) => /* @__PURE__ */ React6.createElement(
+    adapters.map((adapter, index) => /* @__PURE__ */ React7.createElement(
       StorageSection,
       {
         key: `${adapter.type}-${index}`,
         adapter,
-        keychainKeys: keychainKeysProp,
-        onKeychainKeyAdded: handleKeychainKeyAdded,
-        onSecureStoreKeyAdded: handleSecureStoreKeyAdded,
         expanded: expandedIndices.has(index),
         onToggleExpanded: () => {
           setExpandedIndices((prev) => {
@@ -1223,18 +1098,57 @@ function StorageInspector({
         refreshTrigger: refreshKey
       }
     ))
-  ), /* @__PURE__ */ React6.createElement(
+  ), /* @__PURE__ */ React7.createElement(
     IconButton,
     {
       name: "refresh",
       onPress: handleRefresh,
       size: 24,
       tintColor: theme.colors.inverted,
-      style: styles2.fab,
+      style: styles8.fab,
       activeOpacity: 0.85
     }
-  )) : /* @__PURE__ */ React6.createElement(View, { style: styles2.empty }, /* @__PURE__ */ React6.createElement(Text, { style: styles2.emptyText }, strings.noAdapterAvailable))));
+  )) : /* @__PURE__ */ React7.createElement(View, { style: styles8.empty }, /* @__PURE__ */ React7.createElement(Text, { style: styles8.emptyText }, strings.noAdapterAvailable))));
 }
+var { colors: colors5 } = theme;
+var styles8 = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: "100%",
+    backgroundColor: colors5.background
+  },
+  content: {
+    flex: 1
+  },
+  scroll: {
+    flex: 1
+  },
+  scrollContent: {
+    flexGrow: 1,
+    paddingBottom: LAYOUT.fabSize + LAYOUT.padding + 20,
+    paddingTop: LAYOUT.padding
+  },
+  fab: {
+    position: "absolute",
+    bottom: LAYOUT.padding + 16,
+    right: LAYOUT.padding + 16,
+    width: LAYOUT.fabSize,
+    height: LAYOUT.fabSize,
+    borderRadius: LAYOUT.fabSize / 2,
+    backgroundColor: colors5.text,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  empty: {
+    padding: LAYOUT.padding * 2,
+    alignItems: "center",
+    marginHorizontal: LAYOUT.padding
+  },
+  emptyText: {
+    fontSize: LAYOUT.fontSize,
+    color: colors5.textMuted
+  }
+});
 
 export { StorageInspector, createAsyncStorageAdapter, createKeychainAdapter, createMMKVAdapter, createSecureStoreAdapter, strings, theme };
 //# sourceMappingURL=index.mjs.map