@buoy-gg/storage 7.0.4 → 7.0.5

package/lib/module/storage/components/GameUIStorageBrowser.js

@@ -1,11 +1,12 @@
 "use strict";
 
 import { useMemo, useCallback, useState, useEffect } from "react";
-import { StyleSheet, Text, View, TouchableOpacity, ScrollView } from "react-native";
+import { StyleSheet, Text, View, TouchableOpacity, ScrollView, Alert } from "react-native";
 import { absoluteFill } from "@buoy-gg/shared-ui";
 import { Database, Zap, ProBadge, ProUpgradeModal } from "@buoy-gg/shared-ui";
 import { isDevToolsStorageKey } from "@buoy-gg/shared-ui";
 import { StorageKeySection } from "./StorageKeySection";
+import { StorageKeyEditorScreen } from "./StorageKeyEditorScreen";
 import { StorageFilterCards } from "./StorageFilterCards";
 import { useAsyncStorageKeys } from "../hooks/useAsyncStorageKeys";
 import { addListener } from "../utils/AsyncStorageListener";
@@ -17,13 +18,15 @@ import { SelectionActionBar } from "./SelectionActionBar";
 // Pure JS (no react-native-mmkv dependency) — works with any registered
 // instance, including remote-backed wrappers on the desktop dashboard.
 import { addMMKVListener } from "../utils/MMKVListener";
+import { onStorageBrowserRefresh } from "../utils/storageBrowserRefresh";
+import { setStorageValue, storageEditBlockedReason } from "../utils/setStorageValue";
 
 // Import shared Game UI components
-import { gameUIColors, macOSColors, HardDrive } from "@buoy-gg/shared-ui";
+import { gameUIColors, macOSColors, buoyColors, HardDrive } from "@buoy-gg/shared-ui";
 import { useIsPro } from "@buoy-gg/license";
 
 // MMKV Instance color palette - consistent colors per instance
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const INSTANCE_COLORS = [macOSColors.semantic.info,
 // Blue
 macOSColors.semantic.success,
@@ -57,10 +60,17 @@ export function GameUIStorageBrowser({
   searchQuery = "",
   storageDataRef,
   eventCountByKey,
+  lastWriteByKey,
   onViewHistory,
   enabledStorageTypes,
+  statusFilter,
+  onStatusFilterChange,
+  onStatusCountsChange,
   pinnedKeys,
-  onTogglePin
+  onTogglePin,
+  storageTypeFilter,
+  onStorageTypeFilterChange,
+  applySafeAreaInset
 }) {
   const isPro = useIsPro();
   const [showUpgradeModal, setShowUpgradeModal] = useState(false);
@@ -71,10 +81,29 @@ export function GameUIStorageBrowser({
       setShowUpgradeModal(false);
     }
   }, [showUpgradeModal, isPro]);
-  const [activeFilter, setActiveFilter] = useState("all");
-  const [activeStorageType, setActiveStorageType] = useState("all");
+  const [internalFilter, setInternalFilter] = useState("all");
+  // Controlled when the host supplies both halves; uncontrolled otherwise.
+  const isFilterControlled = statusFilter != null && onStatusFilterChange != null;
+  const activeFilter = isFilterControlled ? statusFilter : internalFilter;
+  const setActiveFilter = isFilterControlled ? onStatusFilterChange : setInternalFilter;
+  const [internalStorageType, setInternalStorageType] = useState("all");
+  // Controlled when the host supplies both halves — the modal does, so the
+  // Events tab shows the same backend you picked here.
+  const isStorageTypeControlled = storageTypeFilter != null && onStorageTypeFilterChange != null;
+  const activeStorageType = isStorageTypeControlled ? storageTypeFilter : internalStorageType;
+  const setActiveStorageType = isStorageTypeControlled ? onStorageTypeFilterChange : setInternalStorageType;
   const [selectedMMKVInstance, setSelectedMMKVInstance] = useState(null);
 
+  /**
+   * The key the full-screen editor is open on, if any.
+   *
+   * Held here rather than in the row because the editor covers the whole
+   * browser, and because the write it eventually performs is `handleSaveValue`
+   * — which needs the MMKV instance registry and the refresh fan-out that live
+   * at this level.
+   */
+  const [editingKey, setEditingKey] = useState(null);
+
   // Selection mode state
   const [isSelectMode, setIsSelectMode] = useState(false);
   const [selectedKeyIds, setSelectedKeyIds] = useState(new Set());
@@ -188,6 +217,40 @@ export function GameUIStorageBrowser({
     setIsSelectMode(false);
   }, [onAddPattern]);
 
+  /**
+   * Write an edited value back to the device.
+   *
+   * Pro is checked here rather than on the Edit button because the technical
+   * blocks (`storageEditBlockedReason`) and the licence are different kinds of
+   * "no": the former means this key can never be edited and the row says so
+   * permanently, the latter is an upsell. Throwing lets the editor keep the
+   * draft on screen instead of discarding what was typed.
+   */
+  const handleSaveValue = useCallback(async (storageKey, raw) => {
+    if (!isPro) {
+      setShowUpgradeModal(true);
+      throw new Error("Editing storage values is a Pro feature.");
+    }
+    await setStorageValue(storageKey, raw, mmkvInstances);
+    refresh();
+  }, [isPro, mmkvInstances, refresh]);
+
+  /**
+   * Flip a boolean key straight from its card.
+   *
+   * Goes through `handleSaveValue` like every other write, so the Pro gate and
+   * the type preservation are the same ones the editor uses — this is only a
+   * shortcut past the UI, not past the rules.
+   */
+  const handleToggleKey = useCallback(storageKey => {
+    void handleSaveValue(storageKey, JSON.stringify(!storageKey.value)).catch(e => {
+      Alert.alert("Couldn't save", e instanceof Error ? e.message : String(e));
+    });
+  }, [handleSaveValue]);
+
+  /** Permanent, per-key reasons a value can't be edited (never the licence). */
+  const editBlockedFor = useCallback(storageKey => storageEditBlockedReason(storageKey, mmkvInstances), [mmkvInstances]);
+
   // Memoized export data for copy functionality
   const copyExportData = useMemo(() => {
     const allKeys = allStorageKeys;
@@ -253,12 +316,34 @@ export function GameUIStorageBrowser({
     };
   }, [refreshAsync]);
 
+  // Auto-refresh when something outside this component knows the underlying
+  // storage changed. On device the listeners above cover it; in remote-mirror
+  // mode (desktop dashboard) local capture is suppressed and they never fire,
+  // so the dashboard signals each incoming device snapshot this way — without
+  // it the browse tab is frozen at whatever it read on mount.
+  useEffect(() => {
+    let timeoutId;
+    const unsubscribe = onStorageBrowserRefresh(() => {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(refresh, 100);
+    });
+    return () => {
+      clearTimeout(timeoutId);
+      unsubscribe();
+    };
+  }, [refresh]);
+
   // Auto-refresh on MMKV storage events
   useEffect(() => {
     let timeoutId;
     const unsubscribe = addMMKVListener(event => {
-      // Only refresh if event is for the selected instance
-      if (event.instanceId === selectedMMKVInstance) {
+      // Refresh when the changed instance is one we're actually showing.
+      // `selectedMMKVInstance` is null by default ("All instances"), so
+      // comparing it to event.instanceId directly was never true for the view
+      // every user starts on — MMKV values sat stale in the browse list until
+      // it remounted, even though the write was recorded in Events.
+      const affectsView = selectedMMKVInstance === null || event.instanceId === selectedMMKVInstance;
+      if (affectsView) {
         clearTimeout(timeoutId);
         timeoutId = setTimeout(() => {
           refreshMMKV(); // Auto-refresh MMKV when it changes
@@ -343,6 +428,15 @@ export function GameUIStorageBrowser({
     };
   }, [allStorageKeys, activeFilter, activeStorageType]);
 
+  // Push the status counts to a host toolbar that renders them (desktop).
+  useEffect(() => {
+    onStatusCountsChange?.({
+      validCount: tabStats.validCount,
+      missingCount: tabStats.missingCount,
+      issuesCount: tabStats.issuesCount
+    });
+  }, [onStatusCountsChange, tabStats.validCount, tabStats.missingCount, tabStats.issuesCount]);
+
   // Sort all keys by priority (issues first)
   const sortedKeys = useMemo(() => {
     // Sort by status priority: errors first, then warnings, then valid
@@ -464,6 +558,11 @@ export function GameUIStorageBrowser({
     setSelectedKeyIds(new Set());
   }, []);
 
+  /**
+   * Serialized size of everything in storage, for the table's footer summary.
+   * Keyed on `allStorageKeys` rather than the filtered set: it answers "how much
+   * is in here", which a filter should not change.
+   */
   // Calculate health percentage
   const healthPercentage = stats.requiredCount > 0 ? Math.round(stats.presentRequiredCount / stats.requiredCount * 100) : stats.totalCount > 0 ? 100 : 0;
   const healthStatus = healthPercentage >= 90 ? "OPTIMAL" : healthPercentage >= 70 ? "WARNING" : "CRITICAL";
@@ -501,23 +600,15 @@ export function GameUIStorageBrowser({
       })]
     });
   }
-  return /*#__PURE__*/_jsxs(ScrollView, {
-    style: styles.scrollContainer,
-    contentContainerStyle: styles.container,
-    showsVerticalScrollIndicator: false,
-    children: [/*#__PURE__*/_jsx(View, {
-      style: styles.backgroundGrid
-    }), /*#__PURE__*/_jsx(StorageFilterCards, {
-      stats: stats,
-      tabStats: tabStats,
-      healthPercentage: healthPercentage,
-      healthStatus: healthStatus,
-      healthColor: healthColor,
-      activeFilter: activeFilter,
-      onFilterChange: setActiveFilter,
-      activeStorageType: activeStorageType,
-      onStorageTypeChange: setActiveStorageType
-    }), activeStorageType === "mmkv" && mmkvInstances.length === 0 && /*#__PURE__*/_jsxs(View, {
+
+  /* ---------------------------------------------------------------- *
+   * Subtrees the card list composes. Extracted rather than inlined so Pro
+   * gating and MMKV
+   * instance selection or the empty-state copy.
+   * ---------------------------------------------------------------- */
+
+  const mmkvSection = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [activeStorageType === "mmkv" && mmkvInstances.length === 0 && /*#__PURE__*/_jsxs(View, {
       style: styles.emptyMMKVState,
       children: [/*#__PURE__*/_jsx(Text, {
         style: styles.emptyMMKVTitle,
@@ -601,102 +692,159 @@ export function GameUIStorageBrowser({
           }, inst.id);
         })]
       })]
-    }), filteredKeys.length > 0 ? /*#__PURE__*/_jsxs(View, {
-      style: styles.keysSection,
+    })]
+  });
+  const actionButtonsNode = /*#__PURE__*/_jsx(StorageActionButtons, {
+    copyValue: copyExportData,
+    mmkvInstances: mmkvInstances.map(inst => ({
+      id: inst.id,
+      instance: inst.instance
+    })),
+    activeStorageType: activeStorageType,
+    onClearComplete: refresh,
+    isSelectMode: isSelectMode,
+    onToggleSelectMode: handleToggleSelectMode,
+    selectedCount: selectedKeyIds.size
+  });
+
+  /* Selection Action Bar - Only show in select mode with selections */
+  const selectionBarNode = isSelectMode ? /*#__PURE__*/_jsx(SelectionActionBar, {
+    selectedKeys: selectedKeysInfo,
+    mmkvInstances: mmkvInstances.map(inst => ({
+      id: inst.id,
+      instance: inst.instance
+    })),
+    onDeleteComplete: handleDeleteComplete,
+    onHideKeys: handleHideKeys,
+    onSelectAll: handleSelectAll,
+    onClearSelection: handleClearSelection,
+    totalVisibleKeys: visibleKeys.length
+  }) : null;
+  const lockedBannerNode = hasLockedKeys ? /*#__PURE__*/_jsxs(TouchableOpacity, {
+    style: styles.limitBanner,
+    onPress: () => setShowUpgradeModal(true),
+    activeOpacity: 0.8,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.limitBannerContent,
       children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.sectionHeader,
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: styles.sectionHeaderLeft,
-          children: [/*#__PURE__*/_jsxs(Text, {
-            style: styles.sectionTitle,
-            children: [activeFilter === "all" ? "KEYS" : activeFilter === "missing" ? "MISSING KEYS" : "ISSUES TO FIX", activeStorageType !== "all" && ` (${activeStorageType.toUpperCase()})`]
-          }), /*#__PURE__*/_jsx(View, {
-            style: styles.countBadge,
-            children: /*#__PURE__*/_jsx(Text, {
-              style: styles.countText,
-              children: visibleKeys.length
-            })
-          })]
-        }), /*#__PURE__*/_jsx(StorageActionButtons, {
-          copyValue: copyExportData,
-          mmkvInstances: mmkvInstances.map(inst => ({
-            id: inst.id,
-            instance: inst.instance
-          })),
-          activeStorageType: activeStorageType,
-          onClearComplete: refresh,
-          isSelectMode: isSelectMode,
-          onToggleSelectMode: handleToggleSelectMode,
-          selectedCount: selectedKeyIds.size
-        })]
-      }), isSelectMode && /*#__PURE__*/_jsx(SelectionActionBar, {
-        selectedKeys: selectedKeysInfo,
-        mmkvInstances: mmkvInstances.map(inst => ({
-          id: inst.id,
-          instance: inst.instance
-        })),
-        onDeleteComplete: handleDeleteComplete,
-        onHideKeys: handleHideKeys,
-        onSelectAll: handleSelectAll,
-        onClearSelection: handleClearSelection,
-        totalVisibleKeys: visibleKeys.length
-      }), /*#__PURE__*/_jsx(StorageKeySection, {
-        title: "",
-        count: -1,
-        keys: visibleKeys,
-        emptyMessage: "",
-        isSelectMode: isSelectMode,
-        selectedKeys: selectedKeyIds,
-        onSelectionChange: handleSelectionChange,
-        eventCountByKey: eventCountByKey,
-        onViewHistory: onViewHistory,
-        onHideKey: key => handleHideKeys([key]),
-        pinnedKeys: pinnedKeys,
-        onTogglePin: onTogglePin
-      }), hasLockedKeys && /*#__PURE__*/_jsxs(TouchableOpacity, {
-        style: styles.limitBanner,
-        onPress: () => setShowUpgradeModal(true),
-        activeOpacity: 0.8,
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: styles.limitBannerContent,
-          children: [/*#__PURE__*/_jsxs(View, {
-            style: styles.limitBannerLeft,
-            children: [/*#__PURE__*/_jsx(Zap, {
-              size: 16,
-              color: "#20C997"
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.limitBannerText,
-              children: searchQuery ? `${lockedKeyCount} matching ${lockedKeyCount === 1 ? 'key' : 'keys'} in locked storage` : `${lockedKeyCount} keys locked`
-            })]
-          }), /*#__PURE__*/_jsx(ProBadge, {})]
+        style: styles.limitBannerLeft,
+        children: [/*#__PURE__*/_jsx(Zap, {
+          size: 16,
+          color: buoyColors.primary
         }), /*#__PURE__*/_jsx(Text, {
-          style: styles.limitBannerSubtext,
-          children: searchQuery ? "Upgrade to Pro to search your full storage" : "Upgrade to Pro to unlock full storage access"
+          style: styles.limitBannerText,
+          children: searchQuery ? `${lockedKeyCount} matching ${lockedKeyCount === 1 ? 'key' : 'keys'} in locked storage` : `${lockedKeyCount} keys locked`
         })]
-      })]
-    }) : /*#__PURE__*/_jsxs(View, {
-      style: styles.emptyState,
-      children: [/*#__PURE__*/_jsx(Database, {
-        size: 32,
-        color: macOSColors.text.muted
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.emptyTitle,
-        children: searchQuery ? "No results found" : activeFilter === "all" ? "No valid keys found" : activeFilter === "missing" ? "No missing keys" : "No issues found"
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.emptySubtitle,
-        children: searchQuery ? `No keys matching "${searchQuery}"` : activeFilter === "all" ? "All keys have issues or are missing" : activeFilter === "missing" ? "All required keys are present" : "All storage keys are correctly configured"
-      })]
+      }), /*#__PURE__*/_jsx(ProBadge, {})]
     }), /*#__PURE__*/_jsx(Text, {
-      style: styles.techFooter,
-      children: "ASYNC STORAGE | MMKV | SECURE STORAGE BACKENDS"
-    }), /*#__PURE__*/_jsx(ProUpgradeModal, {
-      visible: showUpgradeModal,
-      onClose: () => setShowUpgradeModal(false),
-      featureName: "Storage Keys"
+      style: styles.limitBannerSubtext,
+      children: searchQuery ? "Upgrade to Pro to search your full storage" : "Upgrade to Pro to unlock full storage access"
+    })]
+  }) : null;
+  const emptyStateNode = /*#__PURE__*/_jsxs(View, {
+    style: styles.emptyState,
+    children: [/*#__PURE__*/_jsx(Database, {
+      size: 32,
+      color: macOSColors.text.muted
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.emptyTitle,
+      children: searchQuery ? "No results found" : activeFilter === "all" ? "No valid keys found" : activeFilter === "missing" ? "No missing keys" : "No issues found"
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.emptySubtitle,
+      children: searchQuery ? `No keys matching "${searchQuery}"` : activeFilter === "all" ? "All keys have issues or are missing" : activeFilter === "missing" ? "All required keys are present" : "All storage keys are correctly configured"
     })]
   });
+  const upgradeModalNode = /*#__PURE__*/_jsx(ProUpgradeModal, {
+    visible: showUpgradeModal,
+    onClose: () => setShowUpgradeModal(false),
+    featureName: "Storage Keys"
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.root,
+    children: [/*#__PURE__*/_jsxs(ScrollView, {
+      style: styles.scrollContainer,
+      contentContainerStyle: styles.container,
+      showsVerticalScrollIndicator: false,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.backgroundGrid
+      }), /*#__PURE__*/_jsx(StorageFilterCards, {
+        stats: stats,
+        tabStats: tabStats,
+        healthPercentage: healthPercentage,
+        healthStatus: healthStatus,
+        healthColor: healthColor,
+        activeFilter: activeFilter,
+        onFilterChange: setActiveFilter,
+        activeStorageType: activeStorageType,
+        onStorageTypeChange: setActiveStorageType
+        // Same rule the wide bar follows: when a host toolbar owns the status
+        // filter it also renders the counters, so ours would be a second copy.
+        ,
+        showStatus: !isFilterControlled
+      }), mmkvSection, filteredKeys.length > 0 ? /*#__PURE__*/_jsxs(View, {
+        style: styles.keysSection,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.sectionHeader,
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.sectionHeaderLeft,
+            children: [/*#__PURE__*/_jsxs(Text, {
+              style: styles.sectionTitle,
+              children: [activeFilter === "all" ? "KEYS" : activeFilter === "missing" ? "MISSING KEYS" : "ISSUES TO FIX", activeStorageType !== "all" && ` (${activeStorageType.toUpperCase()})`]
+            }), /*#__PURE__*/_jsx(View, {
+              style: styles.countBadge,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.countText,
+                children: visibleKeys.length
+              })
+            })]
+          }), actionButtonsNode]
+        }), selectionBarNode, /*#__PURE__*/_jsx(StorageKeySection, {
+          title: "",
+          count: -1,
+          keys: visibleKeys,
+          emptyMessage: "",
+          isSelectMode: isSelectMode,
+          selectedKeys: selectedKeyIds,
+          onSelectionChange: handleSelectionChange,
+          eventCountByKey: eventCountByKey,
+          onViewHistory: onViewHistory,
+          onHideKey: key => handleHideKeys([key]),
+          onEditKey: setEditingKey,
+          onToggleKey: handleToggleKey,
+          editBlockedFor: editBlockedFor,
+          pinnedKeys: pinnedKeys,
+          onTogglePin: onTogglePin
+        }), lockedBannerNode]
+      }) : emptyStateNode, /*#__PURE__*/_jsx(Text, {
+        style: styles.techFooter,
+        children: "ASYNC STORAGE | MMKV | SECURE STORAGE BACKENDS"
+      }), upgradeModalNode]
+    }), editingKey ? /*#__PURE__*/_jsx(View, {
+      style: styles.editorOverlay,
+      children: /*#__PURE__*/_jsx(StorageKeyEditorScreen, {
+        storageKey: editingKey,
+        onSave: raw => handleSaveValue(editingKey, raw),
+        onClose: () => setEditingKey(null),
+        applySafeAreaInset: applySafeAreaInset
+      })
+    }) : null]
+  });
 }
 const styles = StyleSheet.create({
+  /** Measures the space the columns actually get; `flex: 1` so it fills the
+   * parent exactly as the bare ScrollView it wraps used to. */
+  root: {
+    flex: 1,
+    minHeight: 0
+  },
+  /**
+   * No background of its own: the tree editor paints an opaque screen, while a
+   * scalar key shows only a modal and wants the list visible behind its scrim.
+   */
+  editorOverlay: {
+    ...absoluteFill,
+    zIndex: 10
+  },
   scrollContainer: {
     flex: 1,
     backgroundColor: gameUIColors.background
@@ -842,7 +990,7 @@ const styles = StyleSheet.create({
     fontSize: 9,
     fontWeight: '700',
     color: macOSColors.text.muted,
-    textTransform: 'uppercase',
+    textTransform: "uppercase",
     letterSpacing: 1
   },
   instanceNavbarScroll: {
@@ -912,10 +1060,10 @@ const styles = StyleSheet.create({
   },
   // Free tier limit banner
   limitBanner: {
-    backgroundColor: "#1A1A1A",
+    backgroundColor: buoyColors.card,
     borderRadius: 10,
     borderWidth: 1,
-    borderColor: "#20C997" + "40",
+    borderColor: buoyColors.primary + "40",
     padding: 12,
     marginTop: 12
   },
@@ -931,12 +1079,12 @@ const styles = StyleSheet.create({
     gap: 8
   },
   limitBannerText: {
-    color: "#E0E0E0",
+    color: buoyColors.text,
     fontSize: 13,
     fontWeight: "600"
   },
   limitBannerSubtext: {
-    color: "#888888",
+    color: buoyColors.textMuted,
     fontSize: 11
   }
 });

package/lib/module/storage/components/GameUIStorageStats.js

@@ -428,7 +428,7 @@ const styles = StyleSheet.create({
     marginBottom: 20,
     paddingBottom: 12,
     borderBottomWidth: 1,
-    borderBottomColor: "rgba(255, 255, 255, 0.1)"
+    borderBottomColor: "rgba(128, 128, 128, 0.2)"
   },
   headerLeft: {
     gap: 2
@@ -499,7 +499,7 @@ const styles = StyleSheet.create({
   },
   healthBarBg: {
     height: 6,
-    backgroundColor: "rgba(255, 255, 255, 0.05)",
+    backgroundColor: "rgba(128, 128, 128, 0.1)",
     borderRadius: 3,
     overflow: "hidden"
   },
@@ -517,7 +517,7 @@ const styles = StyleSheet.create({
     ...absoluteFill,
     opacity: 0.1,
     borderWidth: 1,
-    borderColor: "rgba(255, 255, 255, 0.1)",
+    borderColor: "rgba(128, 128, 128, 0.2)",
     borderRadius: 3
   },
   // Stats grid
@@ -634,11 +634,11 @@ const styles = StyleSheet.create({
   backendItem: {
     flexDirection: "row",
     alignItems: "center",
-    backgroundColor: "rgba(255, 255, 255, 0.02)",
+    backgroundColor: "rgba(128, 128, 128, 0.04)",
     borderRadius: 8,
     padding: 10,
     borderWidth: 1,
-    borderColor: "rgba(255, 255, 255, 0.05)"
+    borderColor: "rgba(128, 128, 128, 0.1)"
   },
   backendIcon: {
     width: 24,
@@ -681,7 +681,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
     paddingTop: 12,
     borderTopWidth: 1,
-    borderTopColor: "rgba(255, 255, 255, 0.1)"
+    borderTopColor: "rgba(128, 128, 128, 0.2)"
   },
   bottomStats: {
     flex: 1,
@@ -703,7 +703,7 @@ const styles = StyleSheet.create({
   bottomDivider: {
     width: 1,
     height: 20,
-    backgroundColor: "rgba(255, 255, 255, 0.1)"
+    backgroundColor: "rgba(128, 128, 128, 0.2)"
   },
   // Empty state
   emptyState: {

package/lib/module/storage/components/MMKVInstanceInfoPanel.js

@@ -189,7 +189,7 @@ const styles = StyleSheet.create({
     fontSize: 11,
     fontWeight: '600',
     color: macOSColors.text.primary,
-    textTransform: 'uppercase',
+    textTransform: "uppercase",
     letterSpacing: 0.5
   },
   // Info grid

package/lib/module/storage/components/MMKVInstanceSelector.js

@@ -408,7 +408,7 @@ const styles = StyleSheet.create({
   keyCountLabel: {
     fontSize: 9,
     color: macOSColors.text.muted,
-    textTransform: 'uppercase',
+    textTransform: "uppercase",
     letterSpacing: 0.5
   }
 });

package/lib/module/storage/components/SelectionActionBar.js

@@ -5,8 +5,7 @@ import { View, Text, StyleSheet, TouchableOpacity, Alert } from "react-native";
 import { Trash2, CopyButton, CheckSquare, EyeOff, ProUpgradeModal } from "@buoy-gg/shared-ui";
 import { macOSColors } from "@buoy-gg/shared-ui";
 import { useIsPro } from "@buoy-gg/license";
-import { removeMany } from "../utils/asyncStorageCompat";
-import { secureStoreRegistry } from "../utils/SecureStoreRegistry";
+import { deleteStorageKeys } from "../utils/deleteStorageKeys";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function SelectionActionBar({
   selectedKeys,
@@ -66,40 +65,7 @@ export function SelectionActionBar({
       style: "destructive",
       onPress: async () => {
         try {
-          // Group keys by storage type
-          const asyncKeys = selectedKeys.filter(k => k.storageType === "async");
-          const mmkvKeys = selectedKeys.filter(k => k.storageType === "mmkv");
-          const secureKeys = selectedKeys.filter(k => k.storageType === "secure");
-
-          // Delete AsyncStorage keys
-          if (asyncKeys.length > 0) {
-            await removeMany(asyncKeys.map(k => k.key));
-          }
-
-          // Delete SecureStore keys (via the registry, which knows each
-          // key's keychainService options)
-          for (const k of secureKeys) {
-            await secureStoreRegistry.deleteValue(k.key);
-          }
-
-          // Delete MMKV keys
-          if (mmkvKeys.length > 0) {
-            // Group by instance
-            const byInstance = {};
-            mmkvKeys.forEach(k => {
-              const instanceId = k.instanceId || "default";
-              if (!byInstance[instanceId]) byInstance[instanceId] = [];
-              byInstance[instanceId].push(k.key);
-            });
-
-            // Delete from each instance
-            Object.entries(byInstance).forEach(([instanceId, keys]) => {
-              const inst = mmkvInstances.find(i => i.id === instanceId);
-              if (inst) {
-                keys.forEach(key => inst.instance.delete(key));
-              }
-            });
-          }
+          await deleteStorageKeys(selectedKeys, mmkvInstances);
           onDeleteComplete?.();
         } catch (error) {
           Alert.alert("Error", `Failed to delete keys: ${error}`);