@buoy-gg/storage 3.0.2 → 4.0.1

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

@@ -62,7 +62,9 @@ export function GameUIStorageBrowser({
   storageDataRef,
   eventCountByKey,
   onViewHistory,
-  enabledStorageTypes
+  enabledStorageTypes,
+  pinnedKeys,
+  onTogglePin
 }) {
   const isPro = useIsPro();
   const [showUpgradeModal, setShowUpgradeModal] = useState(false);
@@ -172,6 +174,15 @@ export 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 = useCallback(keys => {
+    keys.forEach(k => onAddPattern?.(k.key));
+    setSelectedKeyIds(new Set());
+    setIsSelectMode(false);
+  }, [onAddPattern]);
+
   // Memoized export data for copy functionality
   const copyExportData = useMemo(() => {
     const allKeys = allStorageKeys;
@@ -394,8 +405,14 @@ export 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 = useMemo(() => {
@@ -617,6 +634,7 @@ export function GameUIStorageBrowser({
           instance: inst.instance
         })),
         onDeleteComplete: handleDeleteComplete,
+        onHideKeys: handleHideKeys,
         onSelectAll: handleSelectAll,
         onClearSelection: handleClearSelection,
         totalVisibleKeys: visibleKeys.length
@@ -629,7 +647,10 @@ export function GameUIStorageBrowser({
         selectedKeys: selectedKeyIds,
         onSelectionChange: handleSelectionChange,
         eventCountByKey: eventCountByKey,
-        onViewHistory: onViewHistory
+        onViewHistory: onViewHistory,
+        onHideKey: key => handleHideKeys([key]),
+        pinnedKeys: pinnedKeys,
+        onTogglePin: onTogglePin
       }), hasLockedKeys && /*#__PURE__*/_jsxs(TouchableOpacity, {
         style: styles.limitBanner,
         onPress: () => setShowUpgradeModal(true),

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

@@ -2,15 +2,16 @@
 
 import { useState, useEffect } from "react";
 import { View, Text, StyleSheet, TouchableOpacity, Alert } from "react-native";
-import { Trash2, CopyButton, CheckSquare, ProUpgradeModal } from "@buoy-gg/shared-ui";
+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 AsyncStorage from "@react-native-async-storage/async-storage";
+import { removeMany } from "../utils/asyncStorageCompat";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function SelectionActionBar({
   selectedKeys,
   mmkvInstances,
   onDeleteComplete,
+  onHideKeys,
   onSelectAll,
   onClearSelection,
   totalVisibleKeys
@@ -41,6 +42,12 @@ export 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;
@@ -64,7 +71,7 @@ export function SelectionActionBar({
 
           // Delete AsyncStorage keys
           if (asyncKeys.length > 0) {
-            await AsyncStorage.multiRemove(asyncKeys.map(k => k.key));
+            await removeMany(asyncKeys.map(k => k.key));
           }
 
           // Delete MMKV keys
@@ -127,6 +134,13 @@ export function SelectionActionBar({
           success: macOSColors.semantic.success,
           error: macOSColors.semantic.error
         }
+      }), onHideKeys && /*#__PURE__*/_jsx(TouchableOpacity, {
+        style: styles.actionButton,
+        onPress: handleHideSelected,
+        children: /*#__PURE__*/_jsx(EyeOff, {
+          size: 14,
+          color: macOSColors.semantic.warning
+        })
       }), /*#__PURE__*/_jsx(TouchableOpacity, {
         style: styles.actionButton,
         onPress: handleDeleteSelected,

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

@@ -16,7 +16,9 @@ export function StorageBrowserMode({
   storageDataRef,
   eventCountByKey,
   onViewHistory,
-  enabledStorageTypes
+  enabledStorageTypes,
+  pinnedKeys,
+  onTogglePin
 }) {
   return /*#__PURE__*/_jsx(GameUIStorageBrowser, {
     requiredStorageKeys: requiredStorageKeys,
@@ -28,6 +30,8 @@ export function StorageBrowserMode({
     storageDataRef: storageDataRef,
     eventCountByKey: eventCountByKey,
     onViewHistory: onViewHistory,
-    enabledStorageTypes: enabledStorageTypes
+    enabledStorageTypes: enabledStorageTypes,
+    pinnedKeys: pinnedKeys,
+    onTogglePin: onTogglePin
   });
 }

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

@@ -1,9 +1,9 @@
 "use strict";
 
 import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
-import { macOSColors, CompactRow, TypeBadge, HardDrive, Square, CheckSquare, ExpandedInfoRow, PillBadge } from "@buoy-gg/shared-ui";
+import { macOSColors, CompactRow, TypeBadge, HardDrive, Square, CheckSquare, EyeOff, Pin, ExpandedInfoRow, PillBadge } from "@buoy-gg/shared-ui";
 import { getStorageTypeLabel } from "../utils/storageQueryUtils";
-import { getValueTypeLabel } from "../utils/valueType";
+import { getValueTypeLabel, getValueTypeWithPreview } from "../utils/valueType";
 import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
 
 // MMKV Instance color palette - consistent colors per instance
@@ -78,11 +78,18 @@ export 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;
 
@@ -195,6 +202,45 @@ export function StorageKeyRow({
         style: styles.expandedDescription,
         children: storageKey.description
       })]
+    }) : null, onTogglePin || onHideKey ? /*#__PURE__*/_jsxs(View, {
+      style: styles.actionRow,
+      children: [onTogglePin ? /*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: [styles.actionChip, isPinned && styles.actionChipActive],
+        onPress: () => onTogglePin(storageKey.key),
+        hitSlop: {
+          top: 6,
+          bottom: 6,
+          left: 6,
+          right: 6
+        },
+        children: [/*#__PURE__*/_jsx(Pin, {
+          size: 12,
+          color: macOSColors.semantic.info
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.actionChipText, {
+            color: macOSColors.semantic.info
+          }],
+          children: isPinned ? "Unpin" : "Pin to top"
+        })]
+      }) : null, onHideKey ? /*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: styles.actionChip,
+        onPress: () => onHideKey(storageKey),
+        hitSlop: {
+          top: 6,
+          bottom: 6,
+          left: 6,
+          right: 6
+        },
+        children: [/*#__PURE__*/_jsx(EyeOff, {
+          size: 12,
+          color: macOSColors.semantic.warning
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.actionChipText, {
+            color: macOSColors.semantic.warning
+          }],
+          children: "Hide from list"
+        })]
+      }) : null]
     }) : null]
   });
 
@@ -230,17 +276,28 @@ export function StorageKeyRow({
         statusLabel: config.label,
         statusSublabel: config.sublabel,
         primaryText: primaryText,
-        secondaryText: hasValue ? getValueTypeLabel(storageKey.value) : undefined,
+        secondaryText: hasValue ? isBoolean ? getValueTypeLabel(storageKey.value) : getValueTypeWithPreview(storageKey.value) : undefined,
+        secondaryAccessory: isBoolean ? /*#__PURE__*/_jsx(PillBadge, {
+          size: "sm",
+          color: storageKey.value ? macOSColors.semantic.success : macOSColors.semantic.error,
+          children: storageKey.value ? "true" : "false"
+        }) : undefined,
         expandedContent: expandedContent,
         isExpanded: isExpanded,
         expandedGlowColor: config.color,
-        customBadge: /*#__PURE__*/_jsx(PillBadge, {
-          color: getStorageTypeColor(storageKey.storageType),
-          children: storageTypeLabel
+        customBadge: /*#__PURE__*/_jsxs(View, {
+          style: styles.badgeRow,
+          children: [isPinned && /*#__PURE__*/_jsx(Pin, {
+            size: 12,
+            color: macOSColors.semantic.info
+          }), /*#__PURE__*/_jsx(PillBadge, {
+            color: getStorageTypeColor(storageKey.storageType),
+            children: storageTypeLabel
+          })]
         }),
         showChevron: !isSelectMode,
         onPress: isSelectMode ? handleCheckboxPress : onPress ? () => onPress(storageKey) : undefined
-      }), eventCount != null && eventCount > 0 && /*#__PURE__*/_jsx(View, {
+      }), eventCount != null && eventCount > 1 && /*#__PURE__*/_jsx(View, {
         style: [styles.absCountBadge, {
           backgroundColor: macOSColors.semantic.warning + "22",
           borderColor: macOSColors.semantic.warning + "55"
@@ -269,6 +326,11 @@ const getStorageTypeColor = storageType => {
   }
 };
 const styles = StyleSheet.create({
+  badgeRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
+  },
   expandedContainer: {
     gap: 8
   },
@@ -342,6 +404,33 @@ const styles = 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: macOSColors.background.card,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default
+  },
+  actionChipActive: {
+    backgroundColor: macOSColors.semantic.info + "15",
+    borderColor: macOSColors.semantic.info + "44"
+  },
+  actionChipText: {
+    fontSize: 11,
+    fontWeight: "600",
+    fontFamily: "monospace"
+  },
   viewHistoryButton: {
     marginLeft: 4
   },

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

@@ -23,7 +23,10 @@ export function StorageKeySection({
   selectedKeys = new Set(),
   onSelectionChange,
   eventCountByKey,
-  onViewHistory
+  onViewHistory,
+  onHideKey,
+  pinnedKeys,
+  onTogglePin
 }) {
   const [expandedKey, setExpandedKey] = useState(null);
   const handleKeyPress = useCallback(storageKey => {
@@ -76,7 +79,10 @@ export 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/module/storage/components/StorageModalWithTabs.js

@@ -56,8 +56,10 @@ export function StorageModalWithTabs({
   );
   const [enabledStorageTypes, setEnabledStorageTypes] = useState(new Set(['async', 'mmkv', 'secure']) // All enabled by default
   );
+  const [pinnedKeys, setPinnedKeys] = useState(new Set());
   const lastEventRef = useRef(null);
   const hasLoadedFilters = useRef(false);
+  const hasLoadedPins = useRef(false);
   const hasLoadedTabState = useRef(false);
   const hasLoadedMonitoringState = useRef(false);
 
@@ -172,6 +174,37 @@ export function StorageModalWithTabs({
     saveFilters();
   }, [ignoredPatterns]);
 
+  // Load persisted pinned keys on mount
+  useEffect(() => {
+    if (!visible || hasLoadedPins.current) return;
+    const loadPins = async () => {
+      try {
+        const stored = await AsyncStorage.getItem(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
+  useEffect(() => {
+    if (!hasLoadedPins.current) return; // Don't save on initial load
+
+    const savePins = async () => {
+      try {
+        await AsyncStorage.setItem(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
 
@@ -206,6 +239,17 @@ export function StorageModalWithTabs({
   const handleAddPattern = useCallback(pattern => {
     setIgnoredPatterns(prev => new Set([...prev, pattern]));
   }, []);
+  const handleTogglePin = useCallback(key => {
+    setPinnedKeys(prev => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  }, []);
   const handleToggleFilters = useCallback(() => {
     setShowFilters(!showFilters);
   }, [showFilters]);
@@ -504,7 +548,9 @@ export function StorageModalWithTabs({
         storageDataRef: storageDataRef,
         eventCountByKey: eventCountByKey,
         onViewHistory: handleViewHistoryFromBrowser,
-        enabledStorageTypes: enabledStorageTypes
+        enabledStorageTypes: enabledStorageTypes,
+        pinnedKeys: pinnedKeys,
+        onTogglePin: handleTogglePin
       });
     }
 

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

@@ -2,6 +2,7 @@
 
 import { useState, useEffect, useCallback, useRef } from 'react';
 import AsyncStorage from '@react-native-async-storage/async-storage';
+import { readMany } from '../utils/asyncStorageCompat';
 export function useAsyncStorageKeys(requiredStorageKeys = []) {
   // State management
   const [storageKeys, setStorageKeys] = useState([]);
@@ -31,8 +32,8 @@ export function useAsyncStorageKeys(requiredStorageKeys = []) {
         return;
       }
 
-      // 2. Get all values using multiGet
-      const allKeyValuePairs = await AsyncStorage.multiGet(allKeys);
+      // 2. Get all values (compat helper normalizes v2 multiGet / v3 getMany)
+      const allKeyValuePairs = await readMany(allKeys);
 
       // 3. Process keys into StorageKeyInfo format
       const allStorageKeys = [];

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

@@ -111,11 +111,14 @@ class StorageEventStore extends 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/module/storage/sync/storageSyncAdapter.js

@@ -1,6 +1,7 @@
 "use strict";
 
 import AsyncStorage from "@react-native-async-storage/async-storage";
+import { readMany, writeMany, removeMany } from "../utils/asyncStorageCompat";
 import { storageEventStore } from "../stores/storageEventStore";
 import { clearAllAppStorage } from "../utils/clearAllStorage";
 /**
@@ -26,8 +27,11 @@ export const storageSyncAdapter = {
     /** Clears all app storage keys, preserving dev tools settings. */
     clearAppStorage: () => 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.getAllKeys(),
-    "async.multiGet": params => AsyncStorage.multiGet(params.keys),
+    "async.multiGet": params => readMany(params.keys),
     "async.getItem": params => AsyncStorage.getItem(params.key),
     "async.setItem": params => {
       const {
@@ -37,8 +41,8 @@ export const storageSyncAdapter = {
       return AsyncStorage.setItem(key, value);
     },
     "async.removeItem": params => AsyncStorage.removeItem(params.key),
-    "async.multiRemove": params => AsyncStorage.multiRemove(params.keys),
-    "async.multiSet": params => AsyncStorage.multiSet(params.pairs),
+    "async.multiRemove": params => removeMany(params.keys),
+    "async.multiSet": params => writeMany(params.pairs),
     "async.clear": () => AsyncStorage.clear()
   }
 };