react-native-storage-inspector 1.0.1 → 1.0.3

package/dist/index.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var React6 = require('react');
+var React7 = require('react');
 var reactNative = require('react-native');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React6__default = /*#__PURE__*/_interopDefault(React6);
+var React7__default = /*#__PURE__*/_interopDefault(React7);
 
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
   get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
@@ -41,7 +41,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");
@@ -50,8 +49,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",
@@ -82,7 +81,6 @@ function createAsyncStorageAdapter(instance) {
 }
 
 // src/adapters/keychain.ts
-var keychain = null;
 function getKeychainFromRequire() {
   try {
     return require("react-native-keychain");
@@ -90,14 +88,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 {
@@ -106,42 +104,32 @@ function createKeychainAdapter(knownKeys = [], instance) {
         } catch {
         }
       }
-      const merged = /* @__PURE__ */ new Set([...genericServices, ...knownKeys]);
-      return Array.from(merged);
+      return 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;
@@ -149,8 +137,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");
@@ -158,13 +158,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();
@@ -175,11 +179,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;
@@ -187,10 +206,10 @@ function createSecureStoreAdapter(knownKeys = [], instance) {
   };
 }
 function useStorageItems(adapter) {
-  const [items, setItems] = React6.useState([]);
-  const [loading, setLoading] = React6.useState(true);
-  const [error, setError] = React6.useState(null);
-  const refresh = React6.useCallback(async () => {
+  const [items, setItems] = React7.useState([]);
+  const [loading, setLoading] = React7.useState(true);
+  const [error, setError] = React7.useState(null);
+  const refresh = React7.useCallback(async () => {
     if (!adapter || !adapter.isAvailable()) {
       setItems([]);
       setLoading(false);
@@ -203,7 +222,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) {
@@ -213,7 +233,7 @@ function useStorageItems(adapter) {
       setLoading(false);
     }
   }, [adapter]);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     refresh();
   }, [refresh]);
   return { items, loading, error, refresh };
@@ -230,7 +250,8 @@ var theme = {
     text: "#000000",
     textSecondary: "#666666",
     textMuted: "#999999",
-    inverted: "#ffffff"
+    inverted: "#ffffff",
+    overlayBackdrop: "rgba(0,0,0,0.5)"
   }
 };
 
@@ -251,15 +272,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__default.default.createElement(
+  return /* @__PURE__ */ React7__default.default.createElement(
     reactNative.Text,
     {
       style: [
@@ -282,7 +299,6 @@ var { width: SCREEN_WIDTH } = reactNative.Dimensions.get("window");
 var LAYOUT = {
   padding: 16,
   fontSize: 14,
-  headerHeight: 52,
   rowMinHeight: 48,
   sectionHeaderHeight: 48,
   iconSize: 20,
@@ -296,432 +312,20 @@ var LAYOUT = {
   sectionRadius: 4,
   screenWidth: SCREEN_WIDTH
 };
-var { colors } = theme;
-var styles2 = reactNative.StyleSheet.create({
-  container: {
-    flex: 1,
-    width: "100%",
-    backgroundColor: colors.background
-  },
-  content: {
-    flex: 1
-  },
-  scroll: {
-    flex: 1
-  },
-  header: {
-    height: LAYOUT.headerHeight,
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingHorizontal: LAYOUT.padding,
-    borderBottomWidth: reactNative.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
-  },
-  headerTitle: {
-    fontSize: 17,
-    fontWeight: "600",
-    color: colors.text
-  },
-  headerButton: {
-    width: 44,
-    height: 44,
-    alignItems: "center",
-    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: reactNative.StyleSheet.hairlineWidth,
-    borderBottomColor: colors.border,
-    backgroundColor: colors.backgroundSecondary,
-    marginTop: LAYOUT.padding,
-    marginHorizontal: LAYOUT.padding,
-    borderRadius: LAYOUT.sectionRadius
-  },
-  sectionHeaderLabel: {
-    fontSize: 15,
-    fontWeight: "600",
-    color: colors.text
-  },
-  sectionHeaderCount: {
-    color: colors.textSecondary,
-    fontWeight: "400"
-  },
-  storageRowActions: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: LAYOUT.iconGap
-  },
-  iconButton: {
-    width: LAYOUT.iconButtonSize,
-    height: LAYOUT.iconButtonSize,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  iconSlot: {
-    width: LAYOUT.iconButtonSize,
-    height: LAYOUT.iconButtonSize,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  itemRow: {
-    minHeight: LAYOUT.rowMinHeight,
-    paddingHorizontal: LAYOUT.padding,
-    paddingVertical: 12,
-    borderBottomWidth: reactNative.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: reactNative.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: reactNative.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
-  },
-  formButton: {
-    paddingVertical: 12,
-    paddingHorizontal: 20,
-    borderRadius: 10,
-    minWidth: 100,
-    alignItems: "center"
-  },
-  formButtonCancel: {
-    backgroundColor: "transparent",
-    borderWidth: 1,
-    borderColor: colors.text
-  },
-  formButtonSubmit: {
-    backgroundColor: colors.text
-  },
-  formButtonText: {
-    fontSize: 16,
-    fontWeight: "600"
-  },
-  formButtonTextCancel: {
-    color: colors.text
-  },
-  formButtonTextSubmit: {
-    color: colors.inverted
-  },
-  confirmOverlay: {
-    flex: 1,
-    backgroundColor: "rgba(0,0,0,0.5)",
-    justifyContent: "flex-end",
-    alignItems: "center"
-  },
-  confirmModal: {
-    width: "100%",
-    maxWidth: LAYOUT.screenWidth,
-    backgroundColor: colors.background,
-    borderTopLeftRadius: LAYOUT.modalRadius,
-    borderTopRightRadius: LAYOUT.modalRadius,
-    padding: LAYOUT.padding,
-    paddingBottom: LAYOUT.padding + 34
-  },
-  confirmHeader: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    marginBottom: 12
-  },
-  confirmTitle: {
-    fontSize: 17,
-    fontWeight: "600",
-    color: colors.text,
-    flex: 1
-  },
-  confirmMessage: {
-    fontSize: 15,
-    color: colors.textSecondary,
-    lineHeight: 22,
-    marginBottom: 20
-  },
-  confirmActions: {
-    flexDirection: "row",
-    gap: 12
-  },
-  confirmButton: {
-    flex: 1,
-    paddingVertical: 14,
-    borderRadius: 10,
-    alignItems: "center"
-  },
-  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__default.default.createElement(
+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__default.default.createElement(
     reactNative.TouchableOpacity,
     {
       style: [styles2.iconButton, style],
@@ -730,7 +334,7 @@ function IconButton({
       hitSlop,
       activeOpacity
     },
-    /* @__PURE__ */ React6__default.default.createElement(
+    /* @__PURE__ */ React7__default.default.createElement(
       Icon,
       {
         name,
@@ -740,18 +344,25 @@ function IconButton({
     )
   );
 }
+var styles2 = reactNative.StyleSheet.create({
+  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, or pass keychainKeys for internet credentials.",
+  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",
-  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?`,
@@ -759,7 +370,7 @@ var strings = {
   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.",
+  keychainHintShort: "No items yet. Add a key below.",
   edit: "Edit",
   delete: "Delete",
   addItem: "Add item",
@@ -782,19 +393,14 @@ var strings = {
 };
 
 // src/components/ItemForm.tsx
-function ItemForm({
-  visible,
-  storageName,
-  editingItem,
-  onSave,
-  onCancel
-}) {
-  const [key, setKey] = React6.useState("");
-  const [value, setValue] = React6.useState("");
-  const [saving, setSaving] = React6.useState(false);
-  const [error, setError] = React6.useState(null);
+function ItemForm(props) {
+  const { visible, storageName, editingItem, onSave, onCancel } = props;
+  const [key, setKey] = React7.useState("");
+  const [value, setValue] = React7.useState("");
+  const [saving, setSaving] = React7.useState(false);
+  const [error, setError] = React7.useState(null);
   const isEdit = editingItem !== null;
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     if (visible) {
       setKey(editingItem?.key ?? "");
       setValue(editingItem?.value ?? "");
@@ -819,27 +425,27 @@ function ItemForm({
     }
   };
   const title = isEdit ? strings.editItemTitle(editingItem?.key ?? "") : strings.addItemTitle(storageName);
-  return /* @__PURE__ */ React6__default.default.createElement(reactNative.Modal, { visible, transparent: true, animationType: "slide", onRequestClose: onCancel }, /* @__PURE__ */ React6__default.default.createElement(reactNative.View, { style: styles2.formOverlay }, /* @__PURE__ */ React6__default.default.createElement(
+  return /* @__PURE__ */ React7__default.default.createElement(reactNative.Modal, { visible, transparent: true, animationType: "slide", onRequestClose: onCancel }, /* @__PURE__ */ React7__default.default.createElement(reactNative.View, { style: styles3.formOverlay }, /* @__PURE__ */ React7__default.default.createElement(
     reactNative.TouchableOpacity,
     {
       style: { flex: 1, width: "100%" },
       activeOpacity: 1,
       onPress: onCancel
     }
-  ), /* @__PURE__ */ React6__default.default.createElement(reactNative.View, { style: styles2.formModal }, /* @__PURE__ */ React6__default.default.createElement(reactNative.View, { style: styles2.formHeader }, /* @__PURE__ */ React6__default.default.createElement(reactNative.Text, { style: styles2.formTitle, numberOfLines: 1 }, title), /* @__PURE__ */ React6__default.default.createElement(
+  ), /* @__PURE__ */ React7__default.default.createElement(reactNative.View, { style: styles3.formModal }, /* @__PURE__ */ React7__default.default.createElement(reactNative.View, { style: styles3.formHeader }, /* @__PURE__ */ React7__default.default.createElement(reactNative.Text, { style: styles3.formTitle, numberOfLines: 1 }, title), /* @__PURE__ */ React7__default.default.createElement(
     IconButton,
     {
       name: "close",
       onPress: onCancel,
       size: 24,
       tintColor: theme.colors.textSecondary,
-      style: styles2.formCloseButton,
+      style: styles3.formCloseButton,
       hitSlop: LAYOUT.hitSlopLarge
     }
-  )), /* @__PURE__ */ React6__default.default.createElement(reactNative.Text, { style: styles2.formStorageType }, strings.storageTypeLabel(storageName)), /* @__PURE__ */ React6__default.default.createElement(reactNative.Text, { style: styles2.formLabel }, strings.keyLabel), /* @__PURE__ */ React6__default.default.createElement(
+  )), /* @__PURE__ */ React7__default.default.createElement(reactNative.Text, { style: styles3.formStorageType }, strings.storageTypeLabel(storageName)), /* @__PURE__ */ React7__default.default.createElement(reactNative.Text, { style: styles3.formLabel }, strings.keyLabel), /* @__PURE__ */ React7__default.default.createElement(
     reactNative.TextInput,
     {
-      style: [styles2.formInput, isEdit && styles2.formInputDisabled],
+      style: [styles3.formInput, isEdit && styles3.formInputDisabled],
       value: key,
       onChangeText: setKey,
       placeholder: strings.enterKeyPlaceholder,
@@ -848,10 +454,10 @@ function ItemForm({
       autoCapitalize: "none",
       multiline: true
     }
-  ), /* @__PURE__ */ React6__default.default.createElement(reactNative.Text, { style: styles2.formLabel }, strings.valueLabel), /* @__PURE__ */ React6__default.default.createElement(
+  ), /* @__PURE__ */ React7__default.default.createElement(reactNative.Text, { style: styles3.formLabel }, strings.valueLabel), /* @__PURE__ */ React7__default.default.createElement(
     reactNative.TextInput,
     {
-      style: styles2.formInput,
+      style: styles3.formInput,
       value,
       onChangeText: setValue,
       placeholder: strings.enterValuePlaceholder,
@@ -859,91 +465,262 @@ function ItemForm({
       multiline: true,
       numberOfLines: 3
     }
-  ), error ? /* @__PURE__ */ React6__default.default.createElement(reactNative.Text, { style: [styles2.errorText, { marginBottom: 12 }] }, error) : null, /* @__PURE__ */ React6__default.default.createElement(reactNative.View, { style: styles2.formActions }, /* @__PURE__ */ React6__default.default.createElement(
+  ), error ? /* @__PURE__ */ React7__default.default.createElement(reactNative.Text, { style: [styles3.errorText, { marginBottom: 12 }] }, error) : null, /* @__PURE__ */ React7__default.default.createElement(reactNative.View, { style: styles3.formActions }, /* @__PURE__ */ React7__default.default.createElement(
     reactNative.TouchableOpacity,
     {
-      style: [styles2.formButton, styles2.formButtonCancel],
+      style: [styles3.formButton, styles3.formButtonCancel],
       onPress: onCancel,
       disabled: saving
     },
-    /* @__PURE__ */ React6__default.default.createElement(reactNative.Text, { style: [styles2.formButtonText, styles2.formButtonTextCancel] }, strings.cancel)
-  ), /* @__PURE__ */ React6__default.default.createElement(
+    /* @__PURE__ */ React7__default.default.createElement(reactNative.Text, { style: [styles3.formButtonText, styles3.formButtonTextCancel] }, strings.cancel)
+  ), /* @__PURE__ */ React7__default.default.createElement(
     reactNative.TouchableOpacity,
     {
-      style: [styles2.formButton, styles2.formButtonSubmit],
+      style: [styles3.formButton, styles3.formButtonSubmit],
       onPress: handleSubmit,
       disabled: saving
     },
-    /* @__PURE__ */ React6__default.default.createElement(reactNative.Text, { style: [styles2.formButtonText, styles2.formButtonTextSubmit] }, saving ? strings.saving : isEdit ? strings.save : strings.add)
+    /* @__PURE__ */ React7__default.default.createElement(reactNative.Text, { style: [styles3.formButtonText, styles3.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());
-  };
-  return /* @__PURE__ */ React6__default.default.createElement(reactNative.Modal, { visible, transparent: true, animationType: "slide", onRequestClose: onCancel }, /* @__PURE__ */ React6__default.default.createElement(reactNative.View, { style: styles2.confirmOverlay }, /* @__PURE__ */ React6__default.default.createElement(
+var { colors } = theme;
+var styles3 = reactNative.StyleSheet.create({
+  formOverlay: {
+    flex: 1,
+    backgroundColor: colors.overlayBackdrop,
+    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
+  },
+  formButton: {
+    paddingVertical: 12,
+    paddingHorizontal: 20,
+    borderRadius: 10,
+    minWidth: 100,
+    alignItems: "center"
+  },
+  formButtonCancel: {
+    backgroundColor: "transparent",
+    borderWidth: 1,
+    borderColor: colors.text
+  },
+  formButtonSubmit: {
+    backgroundColor: colors.text
+  },
+  formButtonText: {
+    fontSize: 16,
+    fontWeight: "600"
+  },
+  formButtonTextCancel: {
+    color: colors.text
+  },
+  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__default.default.createElement(reactNative.Modal, { visible, transparent: true, animationType: "slide", onRequestClose: onCancel }, /* @__PURE__ */ React7__default.default.createElement(reactNative.View, { style: styles4.confirmOverlay }, /* @__PURE__ */ React7__default.default.createElement(
     reactNative.TouchableOpacity,
     {
       style: { flex: 1, width: "100%" },
       activeOpacity: 1,
       onPress: onCancel
     }
-  ), /* @__PURE__ */ React6__default.default.createElement(reactNative.View, { style: styles2.confirmModal }, /* @__PURE__ */ React6__default.default.createElement(reactNative.View, { style: styles2.confirmHeader }, /* @__PURE__ */ React6__default.default.createElement(reactNative.Text, { style: styles2.confirmTitle }, title), /* @__PURE__ */ React6__default.default.createElement(
+  ), /* @__PURE__ */ React7__default.default.createElement(reactNative.View, { style: styles4.confirmModal }, /* @__PURE__ */ React7__default.default.createElement(reactNative.View, { style: styles4.confirmHeader }, /* @__PURE__ */ React7__default.default.createElement(reactNative.Text, { style: styles4.confirmTitle }, title), /* @__PURE__ */ React7__default.default.createElement(
     IconButton,
     {
       name: "close",
       onPress: onCancel,
       size: 24,
       tintColor: theme.colors.textSecondary,
-      style: styles2.formCloseButton,
+      style: styles4.formCloseButton,
       hitSlop: LAYOUT.hitSlopLarge
     }
-  )), /* @__PURE__ */ React6__default.default.createElement(reactNative.Text, { style: styles2.confirmMessage }, message), /* @__PURE__ */ React6__default.default.createElement(reactNative.View, { style: styles2.confirmActions }, /* @__PURE__ */ React6__default.default.createElement(
+  )), /* @__PURE__ */ React7__default.default.createElement(reactNative.Text, { style: styles4.confirmMessage }, message), /* @__PURE__ */ React7__default.default.createElement(reactNative.View, { style: styles4.confirmActions }, /* @__PURE__ */ React7__default.default.createElement(
     reactNative.TouchableOpacity,
     {
-      style: [styles2.confirmButton, styles2.confirmButtonSecondary],
+      style: [styles4.confirmButton, styles4.confirmButtonSecondary],
       onPress: onCancel
     },
-    /* @__PURE__ */ React6__default.default.createElement(reactNative.Text, { style: [styles2.confirmButtonText, styles2.confirmButtonTextSecondary] }, cancelLabel)
-  ), /* @__PURE__ */ React6__default.default.createElement(
+    /* @__PURE__ */ React7__default.default.createElement(reactNative.Text, { style: [styles4.confirmButtonText, styles4.confirmButtonTextSecondary] }, cancelLabel)
+  ), /* @__PURE__ */ React7__default.default.createElement(
     reactNative.TouchableOpacity,
     {
       style: [
-        styles2.confirmButton,
-        danger ? styles2.confirmButtonDanger : styles2.formButtonSubmit
+        styles4.confirmButton,
+        danger ? styles4.confirmButtonDanger : styles4.formButtonSubmit
       ],
-      onPress: handleConfirm
+      onPress: onConfirm
     },
-    /* @__PURE__ */ React6__default.default.createElement(
+    /* @__PURE__ */ React7__default.default.createElement(
       reactNative.Text,
       {
         style: [
-          styles2.confirmButtonText,
-          danger ? styles2.confirmButtonTextDanger : styles2.formButtonTextSubmit
+          styles4.confirmButtonText,
+          danger ? styles4.confirmButtonTextDanger : styles4.formButtonTextSubmit
         ]
       },
       confirmLabel
     )
   )))));
 }
-function ItemRowActions({
-  item,
-  onCopy,
-  onEdit,
-  onDelete,
-  showChevron = false,
-  chevronDirection = "down"
-}) {
-  return /* @__PURE__ */ React6__default.default.createElement(reactNative.View, { style: styles2.itemRowActions }, /* @__PURE__ */ React6__default.default.createElement(IconButton, { name: "copy", onPress: () => onCopy(item) }), /* @__PURE__ */ React6__default.default.createElement(IconButton, { name: "edit", onPress: () => onEdit(item) }), /* @__PURE__ */ React6__default.default.createElement(IconButton, { name: "trash", onPress: () => onDelete(item) }), showChevron && /* @__PURE__ */ React6__default.default.createElement(reactNative.View, { style: styles2.iconSlot }, /* @__PURE__ */ React6__default.default.createElement(
+var { colors: colors2 } = theme;
+var styles4 = reactNative.StyleSheet.create({
+  confirmOverlay: {
+    flex: 1,
+    backgroundColor: colors2.overlayBackdrop,
+    justifyContent: "flex-end",
+    alignItems: "center"
+  },
+  confirmModal: {
+    width: "100%",
+    maxWidth: LAYOUT.screenWidth,
+    backgroundColor: colors2.background,
+    borderTopLeftRadius: LAYOUT.modalRadius,
+    borderTopRightRadius: LAYOUT.modalRadius,
+    padding: LAYOUT.padding,
+    paddingBottom: LAYOUT.padding + 34
+  },
+  confirmHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: 12
+  },
+  confirmTitle: {
+    fontSize: 17,
+    fontWeight: "600",
+    color: colors2.text,
+    flex: 1
+  },
+  formCloseButton: {
+    width: 44,
+    height: 44,
+    alignItems: "flex-end",
+    justifyContent: "center"
+  },
+  confirmMessage: {
+    fontSize: 15,
+    color: colors2.textSecondary,
+    lineHeight: 22,
+    marginBottom: 20
+  },
+  confirmActions: {
+    flexDirection: "row",
+    gap: 12
+  },
+  confirmButton: {
+    flex: 1,
+    paddingVertical: 14,
+    borderRadius: 10,
+    alignItems: "center"
+  },
+  confirmButtonSecondary: {
+    backgroundColor: "transparent",
+    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__default.default.createElement(reactNative.View, { style: styles5.itemRowActions }, /* @__PURE__ */ React7__default.default.createElement(IconButton, { name: "copy", onPress: () => onCopy(item) }), /* @__PURE__ */ React7__default.default.createElement(IconButton, { name: "edit", onPress: () => onEdit(item) }), /* @__PURE__ */ React7__default.default.createElement(IconButton, { name: "trash", onPress: () => onDelete(item) }), showChevron && /* @__PURE__ */ React7__default.default.createElement(reactNative.View, { style: styles5.iconSlot }, /* @__PURE__ */ React7__default.default.createElement(
     Icon,
     {
       name: chevronDirection === "up" ? "chevronUp" : "chevronDown",
@@ -952,33 +729,144 @@ function ItemRowActions({
     }
   )));
 }
+var styles5 = reactNative.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] = React7.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;
+    });
+  };
+  const isExpanded = expandedKeys.has(item.key);
+  return /* @__PURE__ */ React7__default.default.createElement(reactNative.View, { style: styles6.itemRow }, /* @__PURE__ */ React7__default.default.createElement(reactNative.TouchableOpacity, { onPress: handleToggleExpanded, activeOpacity: 0.7 }, /* @__PURE__ */ React7__default.default.createElement(reactNative.View, { style: styles6.itemRowCollapsed }, /* @__PURE__ */ React7__default.default.createElement(reactNative.View, { style: { flex: 1 } }, /* @__PURE__ */ React7__default.default.createElement(reactNative.Text, { style: styles6.itemKey, numberOfLines: 1 }, item.key), /* @__PURE__ */ React7__default.default.createElement(reactNative.Text, { style: styles6.itemChars }, strings.charCount(charCount))), !isExpanded ? /* @__PURE__ */ React7__default.default.createElement(
+    ItemRowActions,
+    {
+      item,
+      onCopy,
+      onEdit,
+      onDelete,
+      showChevron: true,
+      chevronDirection: "down"
+    }
+  ) : /* @__PURE__ */ React7__default.default.createElement(reactNative.View, { style: styles6.iconSlot }, /* @__PURE__ */ React7__default.default.createElement(
+    Icon,
+    {
+      name: "chevronUp",
+      size: LAYOUT.chevronSize,
+      tintColor: theme.colors.text
+    }
+  )))), isExpanded && /* @__PURE__ */ React7__default.default.createElement(reactNative.View, { style: styles6.itemRowExpanded }, /* @__PURE__ */ React7__default.default.createElement(reactNative.TouchableOpacity, { onPress: () => onEdit(item), style: styles6.valueBox }, /* @__PURE__ */ React7__default.default.createElement(reactNative.Text, { style: styles6.valueBoxLabel }, strings.valueLabel), /* @__PURE__ */ React7__default.default.createElement(reactNative.Text, { style: styles6.valueBoxText, selectable: true }, item.value)), /* @__PURE__ */ React7__default.default.createElement(
+    ItemRowActions,
+    {
+      item,
+      onCopy,
+      onEdit,
+      onDelete
+    }
+  )));
+}
+var { colors: colors3 } = theme;
+var styles6 = reactNative.StyleSheet.create({
+  itemRow: {
+    minHeight: LAYOUT.rowMinHeight,
+    paddingHorizontal: LAYOUT.padding,
+    paddingVertical: 12,
+    borderBottomWidth: reactNative.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: reactNative.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] = React6.useState(defaultExpanded);
+  const [expandedInternal, setExpandedInternal] = React7.useState(defaultExpanded);
   const expanded = expandedProp !== void 0 ? expandedProp : expandedInternal;
   const handleToggleExpanded = () => {
     if (onToggleExpanded) onToggleExpanded();
     else setExpandedInternal((p) => !p);
   };
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     if (refreshTrigger !== void 0) refresh();
   }, [refreshTrigger, refresh]);
-  const [expandedKeys, setExpandedKeys] = React6.useState(/* @__PURE__ */ new Set());
-  const [formVisible, setFormVisible] = React6.useState(false);
-  const [editingItem, setEditingItem] = React6.useState(null);
-  const [deleteItem, setDeleteItem] = React6.useState(null);
-  const [clearAllVisible, setClearAllVisible] = React6.useState(false);
+  const [formVisible, setFormVisible] = React7.useState(false);
+  const [editingItem, setEditingItem] = React7.useState(null);
+  const [deleteItem, setDeleteItem] = React7.useState(null);
+  const [clearAllVisible, setClearAllVisible] = React7.useState(false);
   const handleAdd = () => {
     setEditingItem(null);
     setFormVisible(true);
@@ -988,14 +876,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 () => {
@@ -1023,25 +904,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__default.default.createElement(React6__default.default.Fragment, null, /* @__PURE__ */ React6__default.default.createElement(
+  return /* @__PURE__ */ React7__default.default.createElement(React7__default.default.Fragment, null, /* @__PURE__ */ React7__default.default.createElement(
     reactNative.TouchableOpacity,
     {
-      style: styles2.sectionHeader,
+      style: styles7.sectionHeader,
       onPress: handleToggleExpanded,
       activeOpacity: 0.7
     },
-    /* @__PURE__ */ React6__default.default.createElement(reactNative.View, { style: styles2.sectionHeaderLabelWrap }, /* @__PURE__ */ React6__default.default.createElement(reactNative.Text, { style: styles2.sectionHeaderLabel }, adapter.name, /* @__PURE__ */ React6__default.default.createElement(reactNative.Text, { style: styles2.sectionHeaderCount }, " (", items.length, ")"))),
-    /* @__PURE__ */ React6__default.default.createElement(reactNative.View, { style: styles2.storageRowActions }, /* @__PURE__ */ React6__default.default.createElement(IconButton, { name: "plus", onPress: handleAdd }), /* @__PURE__ */ React6__default.default.createElement(
+    /* @__PURE__ */ React7__default.default.createElement(reactNative.View, { style: styles7.sectionHeaderLabelWrap }, /* @__PURE__ */ React7__default.default.createElement(reactNative.Text, { style: styles7.sectionHeaderLabel }, adapter.name, /* @__PURE__ */ React7__default.default.createElement(reactNative.Text, { style: styles7.sectionHeaderCount }, " (", items.length, ")"))),
+    /* @__PURE__ */ React7__default.default.createElement(reactNative.View, { style: styles7.storageRowActions }, /* @__PURE__ */ React7__default.default.createElement(IconButton, { name: "plus", onPress: handleAdd }), /* @__PURE__ */ React7__default.default.createElement(
       IconButton,
       {
         name: "trash",
         onPress: () => items.length > 0 && setClearAllVisible(true),
         disabled: items.length === 0
       }
-    ), /* @__PURE__ */ React6__default.default.createElement(reactNative.View, { style: styles2.iconSlot }, /* @__PURE__ */ React6__default.default.createElement(
+    ), /* @__PURE__ */ React7__default.default.createElement(reactNative.View, { style: styles7.iconSlot }, /* @__PURE__ */ React7__default.default.createElement(
       Icon,
       {
         name: expanded ? "chevronUp" : "chevronDown",
@@ -1049,54 +930,16 @@ function StorageSection({
         tintColor: theme.colors.text
       }
     )))
-  ), expanded && /* @__PURE__ */ React6__default.default.createElement(React6__default.default.Fragment, null, showKeychainHint ? /* @__PURE__ */ React6__default.default.createElement(reactNative.View, { style: styles2.keychainHint }, /* @__PURE__ */ React6__default.default.createElement(reactNative.Text, { style: styles2.keychainHintText }, strings.keychainHint)) : null, showSecureStoreHint ? /* @__PURE__ */ React6__default.default.createElement(reactNative.View, { style: styles2.keychainHint }, /* @__PURE__ */ React6__default.default.createElement(reactNative.Text, { style: styles2.keychainHintText }, strings.secureStoreHint)) : null, error ? /* @__PURE__ */ React6__default.default.createElement(reactNative.View, { style: styles2.error }, /* @__PURE__ */ React6__default.default.createElement(reactNative.Text, { style: styles2.errorText }, error)) : null, loading ? /* @__PURE__ */ React6__default.default.createElement(reactNative.View, { style: styles2.loading }, /* @__PURE__ */ React6__default.default.createElement(reactNative.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__default.default.createElement(
-      reactNative.TouchableOpacity,
-      {
-        key: item.key,
-        style: styles2.itemRow,
-        onPress: toggleItemExpanded,
-        activeOpacity: 0.7
-      },
-      /* @__PURE__ */ React6__default.default.createElement(reactNative.View, { style: styles2.itemRowCollapsed }, /* @__PURE__ */ React6__default.default.createElement(reactNative.View, { style: { flex: 1 } }, /* @__PURE__ */ React6__default.default.createElement(reactNative.Text, { style: styles2.itemKey, numberOfLines: 1 }, item.key), /* @__PURE__ */ React6__default.default.createElement(reactNative.Text, { style: styles2.itemChars }, strings.charCount(charCount))), !isItemExpanded ? /* @__PURE__ */ React6__default.default.createElement(
-        ItemRowActions,
-        {
-          item,
-          onCopy: handleCopy,
-          onEdit: handleEdit,
-          onDelete: setDeleteItem,
-          showChevron: true,
-          chevronDirection: "down"
-        }
-      ) : /* @__PURE__ */ React6__default.default.createElement(reactNative.View, { style: styles2.iconSlot }, /* @__PURE__ */ React6__default.default.createElement(
-        Icon,
-        {
-          name: "chevronUp",
-          size: LAYOUT.chevronSize,
-          tintColor: theme.colors.text
-        }
-      ))),
-      isItemExpanded && /* @__PURE__ */ React6__default.default.createElement(reactNative.View, { style: styles2.itemRowExpanded }, /* @__PURE__ */ React6__default.default.createElement(reactNative.View, { style: styles2.valueBox }, /* @__PURE__ */ React6__default.default.createElement(reactNative.Text, { style: styles2.valueBoxLabel }, strings.valueLabel), /* @__PURE__ */ React6__default.default.createElement(reactNative.Text, { style: styles2.valueBoxText, selectable: true }, item.value || strings.emptyValue)), /* @__PURE__ */ React6__default.default.createElement(
-        ItemRowActions,
-        {
-          item,
-          onCopy: handleCopy,
-          onEdit: handleEdit,
-          onDelete: setDeleteItem
-        }
-      ))
-    );
-  }), !loading && items.length === 0 && !showKeychainHint && !showSecureStoreHint ? /* @__PURE__ */ React6__default.default.createElement(reactNative.View, { style: styles2.empty }, /* @__PURE__ */ React6__default.default.createElement(reactNative.Text, { style: styles2.emptyText }, strings.noItems)) : null), /* @__PURE__ */ React6__default.default.createElement(
+  ), expanded && /* @__PURE__ */ React7__default.default.createElement(React7__default.default.Fragment, null, showKeychainHint ? /* @__PURE__ */ React7__default.default.createElement(reactNative.View, { style: styles7.keychainHint }, /* @__PURE__ */ React7__default.default.createElement(reactNative.Text, { style: styles7.keychainHintText }, strings.keychainHint)) : null, showSecureStoreHint ? /* @__PURE__ */ React7__default.default.createElement(reactNative.View, { style: styles7.keychainHint }, /* @__PURE__ */ React7__default.default.createElement(reactNative.Text, { style: styles7.keychainHintText }, strings.secureStoreHint)) : null, error ? /* @__PURE__ */ React7__default.default.createElement(reactNative.View, { style: styles7.error }, /* @__PURE__ */ React7__default.default.createElement(reactNative.Text, { style: styles7.errorText }, error)) : null, loading ? /* @__PURE__ */ React7__default.default.createElement(reactNative.View, { style: styles7.loading }, /* @__PURE__ */ React7__default.default.createElement(reactNative.Text, { style: styles7.loadingText }, strings.loading)) : items.map((item) => /* @__PURE__ */ React7__default.default.createElement(
+    StorageList,
+    {
+      key: item.key,
+      item,
+      onCopy: handleCopy,
+      onEdit: handleEdit,
+      onDelete: setDeleteItem
+    }
+  )), !loading && items.length === 0 && !showKeychainHint && !showSecureStoreHint ? /* @__PURE__ */ React7__default.default.createElement(reactNative.View, { style: styles7.empty }, /* @__PURE__ */ React7__default.default.createElement(reactNative.Text, { style: styles7.emptyText }, strings.noItems)) : null), /* @__PURE__ */ React7__default.default.createElement(
     ItemForm,
     {
       visible: formVisible,
@@ -1108,7 +951,7 @@ function StorageSection({
         setEditingItem(null);
       }
     }
-  ), /* @__PURE__ */ React6__default.default.createElement(
+  ), /* @__PURE__ */ React7__default.default.createElement(
     ConfirmModal,
     {
       visible: deleteItem !== null,
@@ -1117,7 +960,7 @@ function StorageSection({
       onConfirm: handleDeleteItem,
       onCancel: () => setDeleteItem(null)
     }
-  ), /* @__PURE__ */ React6__default.default.createElement(
+  ), /* @__PURE__ */ React7__default.default.createElement(
     ConfirmModal,
     {
       visible: clearAllVisible,
@@ -1128,89 +971,127 @@ function StorageSection({
     }
   ));
 }
+var { colors: colors4 } = theme;
+var styles7 = reactNative.StyleSheet.create({
+  sectionHeader: {
+    height: LAYOUT.sectionHeaderHeight,
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: LAYOUT.padding,
+    borderBottomWidth: reactNative.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] = React6.useState([]);
-  const [secureStoreKeysAdded, setSecureStoreKeysAdded] = React6.useState([]);
-  const [refreshKey, setRefreshKey] = React6.useState(0);
-  const [refreshing, setRefreshing] = React6.useState(false);
-  const [expandedIndices, setExpandedIndices] = React6.useState(() => /* @__PURE__ */ new Set([0]));
-  const keychainKeys = React6.useMemo(
-    () => [...keychainKeysProp ?? [], ...keychainKeysAdded],
-    [keychainKeysProp, keychainKeysAdded]
-  );
-  const secureStoreKeys = React6.useMemo(
-    () => [...secureStoreKeysProp ?? [], ...secureStoreKeysAdded],
-    [secureStoreKeysProp, secureStoreKeysAdded]
-  );
-  const adapters = React6.useMemo(() => {
+function StorageInspector(props) {
+  const { mmkvInstances = [], secureStoreKeys, customAdapters = [] } = props;
+  const [refreshKey, setRefreshKey] = React7.useState(0);
+  const [refreshing, setRefreshing] = React7.useState(false);
+  const [expandedIndices, setExpandedIndices] = React7.useState(() => /* @__PURE__ */ new Set([0]));
+  const adapters = React7.useMemo(() => {
     const list = [];
     mmkvInstances.forEach((inst, i) => {
       list.push(
         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]
-    );
-  };
+  }, [mmkvInstances, secureStoreKeys, customAdapters]);
   const handleRefresh = () => {
     setRefreshing(true);
     setRefreshKey((k) => k + 1);
     setTimeout(() => setRefreshing(false), 400);
   };
-  return /* @__PURE__ */ React6__default.default.createElement(reactNative.View, { style: styles2.container }, /* @__PURE__ */ React6__default.default.createElement(reactNative.View, { style: styles2.content }, adapters.length > 0 ? /* @__PURE__ */ React6__default.default.createElement(React6__default.default.Fragment, null, /* @__PURE__ */ React6__default.default.createElement(
+  return /* @__PURE__ */ React7__default.default.createElement(reactNative.View, { style: styles8.container }, /* @__PURE__ */ React7__default.default.createElement(reactNative.View, { style: styles8.content }, adapters.length > 0 ? /* @__PURE__ */ React7__default.default.createElement(React7__default.default.Fragment, null, /* @__PURE__ */ React7__default.default.createElement(
     reactNative.ScrollView,
     {
-      style: styles2.scroll,
-      contentContainerStyle: styles2.scrollContent,
+      style: styles8.scroll,
+      contentContainerStyle: styles8.scrollContent,
       keyboardShouldPersistTaps: "handled",
       showsVerticalScrollIndicator: true,
-      refreshControl: /* @__PURE__ */ React6__default.default.createElement(reactNative.RefreshControl, { refreshing, onRefresh: handleRefresh })
+      refreshControl: /* @__PURE__ */ React7__default.default.createElement(reactNative.RefreshControl, { refreshing, onRefresh: handleRefresh })
     },
-    adapters.map((adapter, index) => /* @__PURE__ */ React6__default.default.createElement(
+    adapters.map((adapter, index) => /* @__PURE__ */ React7__default.default.createElement(
       StorageSection,
       {
         key: `${adapter.type}-${index}`,
         adapter,
-        keychainKeys: keychainKeysProp,
-        onKeychainKeyAdded: handleKeychainKeyAdded,
-        onSecureStoreKeyAdded: handleSecureStoreKeyAdded,
         expanded: expandedIndices.has(index),
         onToggleExpanded: () => {
           setExpandedIndices((prev) => {
@@ -1223,18 +1104,57 @@ function StorageInspector({
         refreshTrigger: refreshKey
       }
     ))
-  ), /* @__PURE__ */ React6__default.default.createElement(
+  ), /* @__PURE__ */ React7__default.default.createElement(
     IconButton,
     {
       name: "refresh",
       onPress: handleRefresh,
       size: 24,
       tintColor: theme.colors.inverted,
-      style: styles2.fab,
+      style: styles8.fab,
       activeOpacity: 0.85
     }
-  )) : /* @__PURE__ */ React6__default.default.createElement(reactNative.View, { style: styles2.empty }, /* @__PURE__ */ React6__default.default.createElement(reactNative.Text, { style: styles2.emptyText }, strings.noAdapterAvailable))));
+  )) : /* @__PURE__ */ React7__default.default.createElement(reactNative.View, { style: styles8.empty }, /* @__PURE__ */ React7__default.default.createElement(reactNative.Text, { style: styles8.emptyText }, strings.noAdapterAvailable))));
 }
+var { colors: colors5 } = theme;
+var styles8 = reactNative.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
+  }
+});
 
 exports.StorageInspector = StorageInspector;
 exports.createAsyncStorageAdapter = createAsyncStorageAdapter;