@buoy-gg/storage 3.0.2 → 4.0.1

package/README.md

@@ -570,7 +570,7 @@ Required storage keys can be validated for:
 ## Dependencies
 
 - `@buoy/shared-ui` - Common UI components and utilities
-- `@react-native-async-storage/async-storage` - AsyncStorage implementation (peer dependency)
+- `@react-native-async-storage/async-storage` - AsyncStorage implementation (peer dependency; supports v2 and v3 — `^2.0.0 || ^3.1.0`. Avoid 3.0.x, which has an Android build issue fixed upstream in 3.1.0.)
 - `react-native-mmkv` - MMKV storage implementation (optional peer dependency)
 - React and React Native (peer dependencies)
 

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

@@ -63,7 +63,9 @@ function GameUIStorageBrowser({
   storageDataRef,
   eventCountByKey,
   onViewHistory,
-  enabledStorageTypes
+  enabledStorageTypes,
+  pinnedKeys,
+  onTogglePin
 }) {
   const isPro = (0, _license.useIsPro)();
   const [showUpgradeModal, setShowUpgradeModal] = (0, _react.useState)(false);
@@ -173,6 +175,15 @@ function GameUIStorageBrowser({
     refresh();
   }, [refresh]);
 
+  // Hide the selected keys by adding each to the ignored-pattern filter store,
+  // then exit selection mode. Non-destructive — keys can be unhidden from the
+  // filters UI.
+  const handleHideKeys = (0, _react.useCallback)(keys => {
+    keys.forEach(k => onAddPattern?.(k.key));
+    setSelectedKeyIds(new Set());
+    setIsSelectMode(false);
+  }, [onAddPattern]);
+
   // Memoized export data for copy functionality
   const copyExportData = (0, _react.useMemo)(() => {
     const allKeys = allStorageKeys;
@@ -395,8 +406,14 @@ function GameUIStorageBrowser({
     // NOTE: MMKV instance filtering is now handled in mmkvStorageKeys memo (line 128)
     // No need to filter again here
 
+    // Float pinned keys to the top (stable — preserves existing order otherwise)
+    if (pinnedKeys && pinnedKeys.size > 0) {
+      const pinned = keys.filter(k => pinnedKeys.has(k.key));
+      const rest = keys.filter(k => !pinnedKeys.has(k.key));
+      keys = [...pinned, ...rest];
+    }
     return keys;
-  }, [sortedKeys, activeFilter, activeStorageType, ignoredPatterns, searchQuery, selectedMMKVInstance, enabledStorageTypes]);
+  }, [sortedKeys, activeFilter, activeStorageType, ignoredPatterns, searchQuery, selectedMMKVInstance, enabledStorageTypes, pinnedKeys]);
 
   // For free users, limit visible keys to FREE_TIER_KEY_LIMIT
   const visibleKeys = (0, _react.useMemo)(() => {
@@ -618,6 +635,7 @@ function GameUIStorageBrowser({
           instance: inst.instance
         })),
         onDeleteComplete: handleDeleteComplete,
+        onHideKeys: handleHideKeys,
         onSelectAll: handleSelectAll,
         onClearSelection: handleClearSelection,
         totalVisibleKeys: visibleKeys.length
@@ -630,7 +648,10 @@ function GameUIStorageBrowser({
         selectedKeys: selectedKeyIds,
         onSelectionChange: handleSelectionChange,
         eventCountByKey: eventCountByKey,
-        onViewHistory: onViewHistory
+        onViewHistory: onViewHistory,
+        onHideKey: key => handleHideKeys([key]),
+        pinnedKeys: pinnedKeys,
+        onTogglePin: onTogglePin
       }), hasLockedKeys && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
         style: styles.limitBanner,
         onPress: () => setShowUpgradeModal(true),

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

@@ -8,13 +8,13 @@ var _react = require("react");
 var _reactNative = require("react-native");
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _license = require("@buoy-gg/license");
-var _asyncStorage = _interopRequireDefault(require("@react-native-async-storage/async-storage"));
+var _asyncStorageCompat = require("../utils/asyncStorageCompat");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function SelectionActionBar({
   selectedKeys,
   mmkvInstances,
   onDeleteComplete,
+  onHideKeys,
   onSelectAll,
   onClearSelection,
   totalVisibleKeys
@@ -45,6 +45,12 @@ function SelectionActionBar({
     };
   };
 
+  // Hide selected keys (adds them to the filter store; non-destructive)
+  const handleHideSelected = () => {
+    if (selectedCount === 0) return;
+    onHideKeys?.(selectedKeys);
+  };
+
   // Handle delete selected keys
   const handleDeleteSelected = () => {
     if (selectedCount === 0) return;
@@ -68,7 +74,7 @@ function SelectionActionBar({
 
           // Delete AsyncStorage keys
           if (asyncKeys.length > 0) {
-            await _asyncStorage.default.multiRemove(asyncKeys.map(k => k.key));
+            await (0, _asyncStorageCompat.removeMany)(asyncKeys.map(k => k.key));
           }
 
           // Delete MMKV keys
@@ -131,6 +137,13 @@ function SelectionActionBar({
           success: _sharedUi.macOSColors.semantic.success,
           error: _sharedUi.macOSColors.semantic.error
         }
+      }), onHideKeys && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        style: styles.actionButton,
+        onPress: handleHideSelected,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.EyeOff, {
+          size: 14,
+          color: _sharedUi.macOSColors.semantic.warning
+        })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
         style: styles.actionButton,
         onPress: handleDeleteSelected,

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

@@ -20,7 +20,9 @@ function StorageBrowserMode({
   storageDataRef,
   eventCountByKey,
   onViewHistory,
-  enabledStorageTypes
+  enabledStorageTypes,
+  pinnedKeys,
+  onTogglePin
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GameUIStorageBrowser.GameUIStorageBrowser, {
     requiredStorageKeys: requiredStorageKeys,
@@ -32,6 +34,8 @@ function StorageBrowserMode({
     storageDataRef: storageDataRef,
     eventCountByKey: eventCountByKey,
     onViewHistory: onViewHistory,
-    enabledStorageTypes: enabledStorageTypes
+    enabledStorageTypes: enabledStorageTypes,
+    pinnedKeys: pinnedKeys,
+    onTogglePin: onTogglePin
   });
 }

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

@@ -81,11 +81,18 @@ function StorageKeyRow({
   isSelected = false,
   onSelectionChange,
   eventCount,
-  onViewHistory
+  onViewHistory,
+  onHideKey,
+  isPinned = false,
+  onTogglePin
 }) {
   const config = getStatusConfig(storageKey.status);
   const hasValue = storageKey.value !== undefined && storageKey.value !== null;
 
+  // Booleans get a dedicated colored badge instead of an inline text preview so
+  // their value is scannable at a glance.
+  const isBoolean = hasValue && typeof storageKey.value === "boolean";
+
   // Format primary text - show the key
   const primaryText = storageKey.key;
 
@@ -198,6 +205,45 @@ function StorageKeyRow({
         style: styles.expandedDescription,
         children: storageKey.description
       })]
+    }) : null, onTogglePin || onHideKey ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.actionRow,
+      children: [onTogglePin ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+        style: [styles.actionChip, isPinned && styles.actionChipActive],
+        onPress: () => onTogglePin(storageKey.key),
+        hitSlop: {
+          top: 6,
+          bottom: 6,
+          left: 6,
+          right: 6
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Pin, {
+          size: 12,
+          color: _sharedUi.macOSColors.semantic.info
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.actionChipText, {
+            color: _sharedUi.macOSColors.semantic.info
+          }],
+          children: isPinned ? "Unpin" : "Pin to top"
+        })]
+      }) : null, onHideKey ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+        style: styles.actionChip,
+        onPress: () => onHideKey(storageKey),
+        hitSlop: {
+          top: 6,
+          bottom: 6,
+          left: 6,
+          right: 6
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.EyeOff, {
+          size: 12,
+          color: _sharedUi.macOSColors.semantic.warning
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.actionChipText, {
+            color: _sharedUi.macOSColors.semantic.warning
+          }],
+          children: "Hide from list"
+        })]
+      }) : null]
     }) : null]
   });
 
@@ -233,17 +279,28 @@ function StorageKeyRow({
         statusLabel: config.label,
         statusSublabel: config.sublabel,
         primaryText: primaryText,
-        secondaryText: hasValue ? (0, _valueType.getValueTypeLabel)(storageKey.value) : undefined,
+        secondaryText: hasValue ? isBoolean ? (0, _valueType.getValueTypeLabel)(storageKey.value) : (0, _valueType.getValueTypeWithPreview)(storageKey.value) : undefined,
+        secondaryAccessory: isBoolean ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PillBadge, {
+          size: "sm",
+          color: storageKey.value ? _sharedUi.macOSColors.semantic.success : _sharedUi.macOSColors.semantic.error,
+          children: storageKey.value ? "true" : "false"
+        }) : undefined,
         expandedContent: expandedContent,
         isExpanded: isExpanded,
         expandedGlowColor: config.color,
-        customBadge: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PillBadge, {
-          color: getStorageTypeColor(storageKey.storageType),
-          children: storageTypeLabel
+        customBadge: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.badgeRow,
+          children: [isPinned && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Pin, {
+            size: 12,
+            color: _sharedUi.macOSColors.semantic.info
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PillBadge, {
+            color: getStorageTypeColor(storageKey.storageType),
+            children: storageTypeLabel
+          })]
         }),
         showChevron: !isSelectMode,
         onPress: isSelectMode ? handleCheckboxPress : onPress ? () => onPress(storageKey) : undefined
-      }), eventCount != null && eventCount > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      }), eventCount != null && eventCount > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: [styles.absCountBadge, {
           backgroundColor: _sharedUi.macOSColors.semantic.warning + "22",
           borderColor: _sharedUi.macOSColors.semantic.warning + "55"
@@ -272,6 +329,11 @@ const getStorageTypeColor = storageType => {
   }
 };
 const styles = _reactNative.StyleSheet.create({
+  badgeRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
+  },
   expandedContainer: {
     gap: 8
   },
@@ -345,6 +407,33 @@ const styles = _reactNative.StyleSheet.create({
     fontWeight: "700",
     fontFamily: "monospace"
   },
+  actionRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    flexWrap: "wrap",
+    gap: 8,
+    marginTop: 4
+  },
+  actionChip: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingVertical: 6,
+    paddingHorizontal: 10,
+    borderRadius: 6,
+    backgroundColor: _sharedUi.macOSColors.background.card,
+    borderWidth: 1,
+    borderColor: _sharedUi.macOSColors.border.default
+  },
+  actionChipActive: {
+    backgroundColor: _sharedUi.macOSColors.semantic.info + "15",
+    borderColor: _sharedUi.macOSColors.semantic.info + "44"
+  },
+  actionChipText: {
+    fontSize: 11,
+    fontWeight: "600",
+    fontFamily: "monospace"
+  },
   viewHistoryButton: {
     marginLeft: 4
   },

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

@@ -27,7 +27,10 @@ function StorageKeySection({
   selectedKeys = new Set(),
   onSelectionChange,
   eventCountByKey,
-  onViewHistory
+  onViewHistory,
+  onHideKey,
+  pinnedKeys,
+  onTogglePin
 }) {
   const [expandedKey, setExpandedKey] = (0, _react.useState)(null);
   const handleKeyPress = (0, _react.useCallback)(storageKey => {
@@ -80,7 +83,10 @@ function StorageKeySection({
           isSelected: selectedKeys.has(uniqueKey),
           onSelectionChange: onSelectionChange,
           eventCount: eventCountByKey?.[storageKey.key],
-          onViewHistory: onViewHistory ? () => onViewHistory(storageKey.key) : undefined
+          onViewHistory: onViewHistory ? () => onViewHistory(storageKey.key) : undefined,
+          onHideKey: onHideKey,
+          isPinned: pinnedKeys?.has(storageKey.key),
+          onTogglePin: onTogglePin
         }, uniqueKey);
       })
     })]

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

@@ -60,8 +60,10 @@ function StorageModalWithTabs({
   );
   const [enabledStorageTypes, setEnabledStorageTypes] = (0, _react.useState)(new Set(['async', 'mmkv', 'secure']) // All enabled by default
   );
+  const [pinnedKeys, setPinnedKeys] = (0, _react.useState)(new Set());
   const lastEventRef = (0, _react.useRef)(null);
   const hasLoadedFilters = (0, _react.useRef)(false);
+  const hasLoadedPins = (0, _react.useRef)(false);
   const hasLoadedTabState = (0, _react.useRef)(false);
   const hasLoadedMonitoringState = (0, _react.useRef)(false);
 
@@ -176,6 +178,37 @@ function StorageModalWithTabs({
     saveFilters();
   }, [ignoredPatterns]);
 
+  // Load persisted pinned keys on mount
+  (0, _react.useEffect)(() => {
+    if (!visible || hasLoadedPins.current) return;
+    const loadPins = async () => {
+      try {
+        const stored = await _asyncStorage.default.getItem(_sharedUi.devToolsStorageKeys.storage.pinnedKeys());
+        if (stored) {
+          setPinnedKeys(new Set(JSON.parse(stored)));
+        }
+        hasLoadedPins.current = true;
+      } catch (error) {
+        // Failed to load pinned keys
+      }
+    };
+    loadPins();
+  }, [visible]);
+
+  // Save pinned keys when they change
+  (0, _react.useEffect)(() => {
+    if (!hasLoadedPins.current) return; // Don't save on initial load
+
+    const savePins = async () => {
+      try {
+        await _asyncStorage.default.setItem(_sharedUi.devToolsStorageKeys.storage.pinnedKeys(), JSON.stringify(Array.from(pinnedKeys)));
+      } catch (error) {
+        // Failed to save pinned keys
+      }
+    };
+    savePins();
+  }, [pinnedKeys]);
+
   // Event listener setup - now handled by useStorageEvents hook
   // The hook subscribes to the centralized storageEventStore
 
@@ -210,6 +243,17 @@ function StorageModalWithTabs({
   const handleAddPattern = (0, _react.useCallback)(pattern => {
     setIgnoredPatterns(prev => new Set([...prev, pattern]));
   }, []);
+  const handleTogglePin = (0, _react.useCallback)(key => {
+    setPinnedKeys(prev => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  }, []);
   const handleToggleFilters = (0, _react.useCallback)(() => {
     setShowFilters(!showFilters);
   }, [showFilters]);
@@ -508,7 +552,9 @@ function StorageModalWithTabs({
         storageDataRef: storageDataRef,
         eventCountByKey: eventCountByKey,
         onViewHistory: handleViewHistoryFromBrowser,
-        enabledStorageTypes: enabledStorageTypes
+        enabledStorageTypes: enabledStorageTypes,
+        pinnedKeys: pinnedKeys,
+        onTogglePin: handleTogglePin
       });
     }
 

package/lib/commonjs/storage/hooks/useAsyncStorageKeys.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useAsyncStorageKeys = useAsyncStorageKeys;
 var _react = require("react");
 var _asyncStorage = _interopRequireDefault(require("@react-native-async-storage/async-storage"));
+var _asyncStorageCompat = require("../utils/asyncStorageCompat");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function useAsyncStorageKeys(requiredStorageKeys = []) {
   // State management
@@ -36,8 +37,8 @@ function useAsyncStorageKeys(requiredStorageKeys = []) {
         return;
       }
 
-      // 2. Get all values using multiGet
-      const allKeyValuePairs = await _asyncStorage.default.multiGet(allKeys);
+      // 2. Get all values (compat helper normalizes v2 multiGet / v3 getMany)
+      const allKeyValuePairs = await (0, _asyncStorageCompat.readMany)(allKeys);
 
       // 3. Process keys into StorageKeyInfo format
       const allStorageKeys = [];

package/lib/commonjs/storage/stores/storageEventStore.js

@@ -114,11 +114,14 @@ class StorageEventStore extends _sharedUi.BaseEventStore {
 
     // ── AsyncStorage: async scan ──
     try {
-      const AsyncStorage = require("@react-native-async-storage/async-storage").default;
-      if (AsyncStorage) {
-        const allKeys = await AsyncStorage.getAllKeys();
+      const {
+        asyncStorage,
+        readMany
+      } = require("../utils/asyncStorageCompat");
+      if (asyncStorage) {
+        const allKeys = await asyncStorage.getAllKeys();
         if (allKeys.length > 0) {
-          const pairs = await AsyncStorage.multiGet(allKeys);
+          const pairs = await readMany(allKeys);
           for (const [key, rawValue] of pairs) {
             this.addEvent({
               action: "setItem",

package/lib/commonjs/storage/sync/storageSyncAdapter.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.storageSyncAdapter = void 0;
 var _asyncStorage = _interopRequireDefault(require("@react-native-async-storage/async-storage"));
+var _asyncStorageCompat = require("../utils/asyncStorageCompat");
 var _storageEventStore = require("../stores/storageEventStore");
 var _clearAllStorage = require("../utils/clearAllStorage");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -31,8 +32,11 @@ const storageSyncAdapter = exports.storageSyncAdapter = {
     /** Clears all app storage keys, preserving dev tools settings. */
     clearAppStorage: () => (0, _clearAllStorage.clearAllAppStorage)(),
     // ── Remote AsyncStorage proxy (desktop browse/edit mode) ──
+    // Single-item methods share the same signature across async-storage v2/v3;
+    // batch methods go through the compat helpers (which translate to v3's
+    // getMany/setMany/removeMany) and keep the v2 tuple/pairs shape on the wire.
     "async.getAllKeys": () => _asyncStorage.default.getAllKeys(),
-    "async.multiGet": params => _asyncStorage.default.multiGet(params.keys),
+    "async.multiGet": params => (0, _asyncStorageCompat.readMany)(params.keys),
     "async.getItem": params => _asyncStorage.default.getItem(params.key),
     "async.setItem": params => {
       const {
@@ -42,8 +46,8 @@ const storageSyncAdapter = exports.storageSyncAdapter = {
       return _asyncStorage.default.setItem(key, value);
     },
     "async.removeItem": params => _asyncStorage.default.removeItem(params.key),
-    "async.multiRemove": params => _asyncStorage.default.multiRemove(params.keys),
-    "async.multiSet": params => _asyncStorage.default.multiSet(params.pairs),
+    "async.multiRemove": params => (0, _asyncStorageCompat.removeMany)(params.keys),
+    "async.multiSet": params => (0, _asyncStorageCompat.writeMany)(params.pairs),
     "async.clear": () => _asyncStorage.default.clear()
   }
 };