@buoy-gg/storage 7.0.4 → 7.0.6

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

@@ -9,6 +9,7 @@ var _react = require("react");
 var _reactNative = require("react-native");
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _StorageKeySection = require("./StorageKeySection");
+var _StorageKeyEditorScreen = require("./StorageKeyEditorScreen");
 var _StorageFilterCards = require("./StorageFilterCards");
 var _useAsyncStorageKeys = require("../hooks/useAsyncStorageKeys");
 var _AsyncStorageListener = require("../utils/AsyncStorageListener");
@@ -18,6 +19,8 @@ var _useMMKVInstances = require("../hooks/useMMKVInstances");
 var _StorageActionButtons = require("./StorageActionButtons");
 var _SelectionActionBar = require("./SelectionActionBar");
 var _MMKVListener = require("../utils/MMKVListener");
+var _storageBrowserRefresh = require("../utils/storageBrowserRefresh");
+var _setStorageValue = require("../utils/setStorageValue");
 var _license = require("@buoy-gg/license");
 var _jsxRuntime = require("react/jsx-runtime");
 // Pure JS (no react-native-mmkv dependency) — works with any registered
@@ -59,10 +62,17 @@ function GameUIStorageBrowser({
   searchQuery = "",
   storageDataRef,
   eventCountByKey,
+  lastWriteByKey,
   onViewHistory,
   enabledStorageTypes,
+  statusFilter,
+  onStatusFilterChange,
+  onStatusCountsChange,
   pinnedKeys,
-  onTogglePin
+  onTogglePin,
+  storageTypeFilter,
+  onStorageTypeFilterChange,
+  applySafeAreaInset
 }) {
   const isPro = (0, _license.useIsPro)();
   const [showUpgradeModal, setShowUpgradeModal] = (0, _react.useState)(false);
@@ -73,10 +83,29 @@ function GameUIStorageBrowser({
       setShowUpgradeModal(false);
     }
   }, [showUpgradeModal, isPro]);
-  const [activeFilter, setActiveFilter] = (0, _react.useState)("all");
-  const [activeStorageType, setActiveStorageType] = (0, _react.useState)("all");
+  const [internalFilter, setInternalFilter] = (0, _react.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] = (0, _react.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] = (0, _react.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] = (0, _react.useState)(null);
+
   // Selection mode state
   const [isSelectMode, setIsSelectMode] = (0, _react.useState)(false);
   const [selectedKeyIds, setSelectedKeyIds] = (0, _react.useState)(new Set());
@@ -190,6 +219,40 @@ 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 = (0, _react.useCallback)(async (storageKey, raw) => {
+    if (!isPro) {
+      setShowUpgradeModal(true);
+      throw new Error("Editing storage values is a Pro feature.");
+    }
+    await (0, _setStorageValue.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 = (0, _react.useCallback)(storageKey => {
+    void handleSaveValue(storageKey, JSON.stringify(!storageKey.value)).catch(e => {
+      _reactNative.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 = (0, _react.useCallback)(storageKey => (0, _setStorageValue.storageEditBlockedReason)(storageKey, mmkvInstances), [mmkvInstances]);
+
   // Memoized export data for copy functionality
   const copyExportData = (0, _react.useMemo)(() => {
     const allKeys = allStorageKeys;
@@ -255,12 +318,34 @@ 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.
+  (0, _react.useEffect)(() => {
+    let timeoutId;
+    const unsubscribe = (0, _storageBrowserRefresh.onStorageBrowserRefresh)(() => {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(refresh, 100);
+    });
+    return () => {
+      clearTimeout(timeoutId);
+      unsubscribe();
+    };
+  }, [refresh]);
+
   // Auto-refresh on MMKV storage events
   (0, _react.useEffect)(() => {
     let timeoutId;
     const unsubscribe = (0, _MMKVListener.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
@@ -345,6 +430,15 @@ function GameUIStorageBrowser({
     };
   }, [allStorageKeys, activeFilter, activeStorageType]);
 
+  // Push the status counts to a host toolbar that renders them (desktop).
+  (0, _react.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 = (0, _react.useMemo)(() => {
     // Sort by status priority: errors first, then warnings, then valid
@@ -466,6 +560,11 @@ 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";
@@ -503,23 +602,15 @@ function GameUIStorageBrowser({
       })]
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
-    style: styles.scrollContainer,
-    contentContainerStyle: styles.container,
-    showsVerticalScrollIndicator: false,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.backgroundGrid
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StorageFilterCards.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__*/(0, _jsxRuntime.jsxs)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [activeStorageType === "mmkv" && mmkvInstances.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.emptyMMKVState,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: styles.emptyMMKVTitle,
@@ -603,102 +694,159 @@ function GameUIStorageBrowser({
           }, inst.id);
         })]
       })]
-    }), filteredKeys.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.keysSection,
+    })]
+  });
+  const actionButtonsNode = /*#__PURE__*/(0, _jsxRuntime.jsx)(_StorageActionButtons.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__*/(0, _jsxRuntime.jsx)(_SelectionActionBar.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__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+    style: styles.limitBanner,
+    onPress: () => setShowUpgradeModal(true),
+    activeOpacity: 0.8,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.limitBannerContent,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.sectionHeader,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.sectionHeaderLeft,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-            style: styles.sectionTitle,
-            children: [activeFilter === "all" ? "KEYS" : activeFilter === "missing" ? "MISSING KEYS" : "ISSUES TO FIX", activeStorageType !== "all" && ` (${activeStorageType.toUpperCase()})`]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: styles.countBadge,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.countText,
-              children: visibleKeys.length
-            })
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StorageActionButtons.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__*/(0, _jsxRuntime.jsx)(_SelectionActionBar.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__*/(0, _jsxRuntime.jsx)(_StorageKeySection.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__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-        style: styles.limitBanner,
-        onPress: () => setShowUpgradeModal(true),
-        activeOpacity: 0.8,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.limitBannerContent,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.limitBannerLeft,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Zap, {
-              size: 16,
-              color: "#20C997"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.limitBannerText,
-              children: searchQuery ? `${lockedKeyCount} matching ${lockedKeyCount === 1 ? 'key' : 'keys'} in locked storage` : `${lockedKeyCount} keys locked`
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ProBadge, {})]
+        style: styles.limitBannerLeft,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Zap, {
+          size: 16,
+          color: _sharedUi.buoyColors.primary
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.emptyState,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Database, {
-        size: 32,
-        color: _sharedUi.macOSColors.text.muted
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.emptyTitle,
-        children: searchQuery ? "No results found" : activeFilter === "all" ? "No valid keys found" : activeFilter === "missing" ? "No missing keys" : "No issues found"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_sharedUi.ProBadge, {})]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: styles.techFooter,
-      children: "ASYNC STORAGE | MMKV | SECURE STORAGE BACKENDS"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.emptyState,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Database, {
+      size: 32,
+      color: _sharedUi.macOSColors.text.muted
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.emptyTitle,
+      children: searchQuery ? "No results found" : activeFilter === "all" ? "No valid keys found" : activeFilter === "missing" ? "No missing keys" : "No issues found"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_sharedUi.ProUpgradeModal, {
+    visible: showUpgradeModal,
+    onClose: () => setShowUpgradeModal(false),
+    featureName: "Storage Keys"
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.root,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+      style: styles.scrollContainer,
+      contentContainerStyle: styles.container,
+      showsVerticalScrollIndicator: false,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.backgroundGrid
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StorageFilterCards.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.keysSection,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.sectionHeader,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.sectionHeaderLeft,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+              style: styles.sectionTitle,
+              children: [activeFilter === "all" ? "KEYS" : activeFilter === "missing" ? "MISSING KEYS" : "ISSUES TO FIX", activeStorageType !== "all" && ` (${activeStorageType.toUpperCase()})`]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: styles.countBadge,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.countText,
+                children: visibleKeys.length
+              })
+            })]
+          }), actionButtonsNode]
+        }), selectionBarNode, /*#__PURE__*/(0, _jsxRuntime.jsx)(_StorageKeySection.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__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.techFooter,
+        children: "ASYNC STORAGE | MMKV | SECURE STORAGE BACKENDS"
+      }), upgradeModalNode]
+    }), editingKey ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.editorOverlay,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StorageKeyEditorScreen.StorageKeyEditorScreen, {
+        storageKey: editingKey,
+        onSave: raw => handleSaveValue(editingKey, raw),
+        onClose: () => setEditingKey(null),
+        applySafeAreaInset: applySafeAreaInset
+      })
+    }) : null]
+  });
 }
 const styles = _reactNative.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: {
+    ..._sharedUi.absoluteFill,
+    zIndex: 10
+  },
   scrollContainer: {
     flex: 1,
     backgroundColor: _sharedUi.gameUIColors.background
@@ -844,7 +992,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 9,
     fontWeight: '700',
     color: _sharedUi.macOSColors.text.muted,
-    textTransform: 'uppercase',
+    textTransform: "uppercase",
     letterSpacing: 1
   },
   instanceNavbarScroll: {
@@ -914,10 +1062,10 @@ const styles = _reactNative.StyleSheet.create({
   },
   // Free tier limit banner
   limitBanner: {
-    backgroundColor: "#1A1A1A",
+    backgroundColor: _sharedUi.buoyColors.card,
     borderRadius: 10,
     borderWidth: 1,
-    borderColor: "#20C997" + "40",
+    borderColor: _sharedUi.buoyColors.primary + "40",
     padding: 12,
     marginTop: 12
   },
@@ -933,12 +1081,12 @@ const styles = _reactNative.StyleSheet.create({
     gap: 8
   },
   limitBannerText: {
-    color: "#E0E0E0",
+    color: _sharedUi.buoyColors.text,
     fontSize: 13,
     fontWeight: "600"
   },
   limitBannerSubtext: {
-    color: "#888888",
+    color: _sharedUi.buoyColors.textMuted,
     fontSize: 11
   }
 });

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

@@ -431,7 +431,7 @@ const styles = _reactNative.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
@@ -502,7 +502,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   healthBarBg: {
     height: 6,
-    backgroundColor: "rgba(255, 255, 255, 0.05)",
+    backgroundColor: "rgba(128, 128, 128, 0.1)",
     borderRadius: 3,
     overflow: "hidden"
   },
@@ -520,7 +520,7 @@ const styles = _reactNative.StyleSheet.create({
     ..._sharedUi.absoluteFill,
     opacity: 0.1,
     borderWidth: 1,
-    borderColor: "rgba(255, 255, 255, 0.1)",
+    borderColor: "rgba(128, 128, 128, 0.2)",
     borderRadius: 3
   },
   // Stats grid
@@ -637,11 +637,11 @@ const styles = _reactNative.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,
@@ -684,7 +684,7 @@ const styles = _reactNative.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,
@@ -706,7 +706,7 @@ const styles = _reactNative.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/commonjs/storage/components/MMKVInstanceInfoPanel.js

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

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

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

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

@@ -8,8 +8,7 @@ var _react = require("react");
 var _reactNative = require("react-native");
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _license = require("@buoy-gg/license");
-var _asyncStorageCompat = require("../utils/asyncStorageCompat");
-var _SecureStoreRegistry = require("../utils/SecureStoreRegistry");
+var _deleteStorageKeys = require("../utils/deleteStorageKeys");
 var _jsxRuntime = require("react/jsx-runtime");
 function SelectionActionBar({
   selectedKeys,
@@ -69,40 +68,7 @@ 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 (0, _asyncStorageCompat.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.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 (0, _deleteStorageKeys.deleteStorageKeys)(selectedKeys, mmkvInstances);
           onDeleteComplete?.();
         } catch (error) {
           _reactNative.Alert.alert("Error", `Failed to delete keys: ${error}`);

package/lib/commonjs/storage/components/StorageActions.js

@@ -93,7 +93,7 @@ function StorageActions({
         accessibilityLabel: "Refresh storage",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.RefreshCw, {
           size: 16,
-          color: isRefreshing ? "#10B981" : "#9CA3AF"
+          color: isRefreshing ? "#10B981" : _sharedUi.buoyColors.textSecondary
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CopyButton, {
         value: storageKeys,
@@ -129,11 +129,11 @@ const styles = _reactNative.StyleSheet.create({
     justifyContent: "space-between",
     paddingHorizontal: 12,
     paddingVertical: 8,
-    backgroundColor: "rgba(255, 255, 255, 0.03)",
+    backgroundColor: "rgba(128, 128, 128, 0.06)",
     borderRadius: 8,
     marginBottom: 12,
     borderWidth: 1,
-    borderColor: "rgba(255, 255, 255, 0.08)"
+    borderColor: "rgba(128, 128, 128, 0.16)"
   },
   leftSection: {
     flexDirection: "row",
@@ -141,7 +141,7 @@ const styles = _reactNative.StyleSheet.create({
     gap: 8
   },
   keyCount: {
-    color: "#9CA3AF",
+    color: _sharedUi.buoyColors.textSecondary,
     fontSize: 12,
     fontWeight: "500"
   },
@@ -165,9 +165,9 @@ const styles = _reactNative.StyleSheet.create({
     width: 32,
     height: 32,
     borderRadius: 6,
-    backgroundColor: "rgba(255, 255, 255, 0.03)",
+    backgroundColor: "rgba(128, 128, 128, 0.06)",
     borderWidth: 1,
-    borderColor: "rgba(255, 255, 255, 0.08)",
+    borderColor: "rgba(128, 128, 128, 0.16)",
     alignItems: "center",
     justifyContent: "center"
   },