@buoy-gg/storage 7.0.32 → 7.0.34

package/lib/commonjs/preset.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createStorageTool = createStorageTool;
-exports.storageToolPreset = void 0;
+exports.storageToolPreset = exports.createStorageTool = void 0;
 var _floatingToolsCore = require("@buoy-gg/floating-tools-core");
+var _sharedUi = require("@buoy-gg/shared-ui");
 var _StorageModalWithTabs = require("./storage/components/StorageModalWithTabs");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
@@ -33,7 +33,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  * - Live storage event monitoring
  * - Required key validation
  */
-const storageToolPreset = exports.storageToolPreset = {
+const storageToolPreset = exports.storageToolPreset = (0, _sharedUi.defineToolPreset)({
   id: "storage",
   name: "STORAGE",
   description: "AsyncStorage browser",
@@ -48,7 +48,7 @@ const storageToolPreset = exports.storageToolPreset = {
     requiredStorageKeys: [],
     enableSharedModalDimensions: false
   }
-};
+});
 
 /**
  * Create a custom AsyncStorage browser tool configuration.
@@ -74,21 +74,7 @@ const storageToolPreset = exports.storageToolPreset = {
  * });
  * ```
  */
-function createStorageTool(options) {
-  return {
-    id: options?.id || "storage",
-    name: options?.name || "STORAGE",
-    description: options?.description || "AsyncStorage browser",
-    slot: "both",
-    icon: ({
-      size
-    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.StorageIcon, {
-      size: size
-    }),
-    component: _StorageModalWithTabs.StorageModalWithTabs,
-    props: {
-      requiredStorageKeys: options?.requiredStorageKeys || [],
-      enableSharedModalDimensions: options?.enableSharedModalDimensions !== undefined ? options.enableSharedModalDimensions : false
-    }
-  };
-}
+const createStorageTool = exports.createStorageTool = (0, _sharedUi.createToolFactory)(storageToolPreset, options => ({
+  requiredStorageKeys: options.requiredStorageKeys || [],
+  enableSharedModalDimensions: options.enableSharedModalDimensions ?? false
+}));

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

@@ -861,19 +861,60 @@ function GameUIStorageBrowser({
       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.night.color.textTertiary
-    }), /*#__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 emptyStateNode = (() => {
+    // Short-circuits on the first real key, so this costs nothing.
+    const hasAnyKeys = allStorageKeys.some(k => !(0, _sharedUi.isDevToolsStorageKey)(k.key));
+
+    // Three causes here are unlike any other tool's: an empty MISSING or
+    // ISSUES list is a PASS, not a failure, and an empty VALID list means
+    // everything is broken. Those skip the shared resolver and say so.
+    let content;
+    if (searchQuery || !hasAnyKeys) {
+      content = (0, _sharedUi.resolveListEmptyState)({
+        subject: "keys",
+        verb: "registered",
+        search: searchQuery,
+        total: hasAnyKeys ? 1 : 0,
+        waiting: {
+          // Previously this fell into the "all" branch and claimed every key
+          // had an issue — of the zero keys that exist.
+          otto: "empty",
+          title: "No storage keys",
+          message: "Nothing is registered for this tool to read."
+        }
+      });
+      if (searchQuery && hasAnyKeys) {
+        // No count: the pre-search total would mean re-running the whole key
+        // pipeline a second time for a number the sentence does not need.
+        content = {
+          ...content,
+          message: "No keys match. Clear the search to see them."
+        };
+      }
+    } else if (activeFilter === "missing") {
+      content = {
+        otto: "thumbsup",
+        title: "No missing keys",
+        message: "All required keys are present"
+      };
+    } else if (activeFilter === "issues") {
+      content = {
+        otto: "cool",
+        title: "No issues found",
+        message: "All storage keys are correctly configured"
+      };
+    } else {
+      content = {
+        otto: "broken",
+        title: "No valid keys found",
+        message: "All keys have issues or are missing"
+      };
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolEmptyState, {
+      ...content,
+      testID: "buoy-storage-keys-empty"
+    });
+  })();
   const upgradeModalNode = /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ProUpgradeModal, {
     visible: showUpgradeModal,
     onClose: () => setShowUpgradeModal(false),

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

@@ -29,6 +29,41 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * because it is part of the package's public exports.
  */
 const FREE_TIER_EVENT_LIMIT = exports.FREE_TIER_EVENT_LIMIT = _sharedUi.TIER_LIMITS["storage.events"].free;
+/**
+ * Persistence recipes. These keys were always written straight to
+ * AsyncStorage (not the FileSystem-first persistentStorage), so they keep
+ * that backend — a user's saved tab, filters and pins survive the upgrade.
+ */
+const ASYNC_STORAGE_BACKEND = {
+  getItem: key => _asyncStorage.default.getItem(key),
+  setItem: (key, value) => _asyncStorage.default.setItem(key, value)
+};
+const TAB_PERSISTENCE = {
+  storage: ASYNC_STORAGE_BACKEND,
+  // Stored as the bare tab name, not JSON.
+  parse: raw => raw === "browser" || raw === "events" ? raw : undefined,
+  serialize: tab => tab
+};
+const BOOLEAN_PERSISTENCE = {
+  storage: ASYNC_STORAGE_BACKEND,
+  // Stored as "true" / "false".
+  parse: raw => raw === "true",
+  serialize: value => value.toString()
+};
+const STRING_SET_PERSISTENCE = {
+  storage: ASYNC_STORAGE_BACKEND,
+  parse: raw => new Set(JSON.parse(raw)),
+  serialize: set => JSON.stringify(Array.from(set))
+};
+const IGNORED_PATTERNS_PERSISTENCE = {
+  ...STRING_SET_PERSISTENCE,
+  parse: raw => {
+    const filters = JSON.parse(raw);
+    // Always ensure @react_buoy is included to hide dev tool keys
+    if (!filters.includes("@react_buoy")) filters.push("@react_buoy");
+    return new Set(filters);
+  }
+};
 function StorageModalWithTabs({
   visible,
   onClose,
@@ -43,7 +78,7 @@ function StorageModalWithTabs({
 }) {
   const isPro = (0, _license.useIsPro)();
   const eventLimit = (0, _sharedUi.useLimit)("storage.events");
-  const [activeTab, setActiveTab] = (0, _react.useState)("browser");
+  const [activeTab, setActiveTab] = (0, _sharedUi.usePersistedState)(_sharedUi.devToolsStorageKeys.storage.activeTab(), "browser", TAB_PERSISTENCE);
   (0, _react.useEffect)(() => {
     onTabChange?.(activeTab);
   }, [activeTab, onTabChange]);
@@ -59,7 +94,7 @@ function StorageModalWithTabs({
   const [isSearchActive, setIsSearchActive] = (0, _react.useState)(false);
 
   // Local state to control subscription (true = subscribed, false = unsubscribed)
-  const [isListeningEnabled, setIsListeningEnabled] = (0, _react.useState)(true);
+  const [isListeningEnabled, setIsListeningEnabled] = (0, _sharedUi.usePersistedState)(_sharedUi.devToolsStorageKeys.storage.isMonitoring(), true, BOOLEAN_PERSISTENCE);
 
   // Event Listener state - using centralized store via hook
   // Pass enabled option to control subscription - this allows events tool to
@@ -76,8 +111,9 @@ function StorageModalWithTabs({
   const [selectedHistoryEventIndex, setSelectedHistoryEventIndex] = (0, _react.useState)(null);
   const [selectedEventIndex, setSelectedEventIndex] = (0, _react.useState)(0);
   const [showFilters, setShowFilters] = (0, _react.useState)(false);
-  const [ignoredPatterns, setIgnoredPatterns] = (0, _react.useState)(new Set(["@react_buoy", "@RNAsyncStorage", "redux-persist", "persist:"]) // Auto-hide dev tool keys by default
-  );
+  const [ignoredPatterns, setIgnoredPatterns] = (0, _sharedUi.usePersistedState)(_sharedUi.devToolsStorageKeys.storage.eventFilters(),
+  // Auto-hide dev tool keys by default
+  new Set(["@react_buoy", "@RNAsyncStorage", "redux-persist", "persist:"]), IGNORED_PATTERNS_PERSISTENCE);
   /**
    * Which backend both tabs are looking at.
    *
@@ -93,12 +129,8 @@ function StorageModalWithTabs({
   const [storageTypeFilter, setStorageTypeFilter] = (0, _react.useState)("all");
   const [enabledStorageTypes, setEnabledStorageTypes] = (0, _react.useState)(new Set(['async', 'mmkv', 'secure']) // All enabled by default
   );
-  const [pinnedKeys, setPinnedKeys] = (0, _react.useState)(new Set());
+  const [pinnedKeys, setPinnedKeys] = (0, _sharedUi.usePersistedState)(_sharedUi.devToolsStorageKeys.storage.pinnedKeys(), new Set(), STRING_SET_PERSISTENCE);
   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);
 
   // isListening = enabled and capturing (has subscribers)
   const isListening = isListeningEnabled && isCapturing;
@@ -113,140 +145,6 @@ function StorageModalWithTabs({
 
   // Timer removed - using useTickEveryMinute hook instead
 
-  // Load persisted tab state on mount
-  (0, _react.useEffect)(() => {
-    if (!visible || hasLoadedTabState.current) return;
-    const loadTabState = async () => {
-      try {
-        const storedTab = await _asyncStorage.default.getItem(_sharedUi.devToolsStorageKeys.storage.activeTab());
-        if (storedTab && (storedTab === "browser" || storedTab === "events")) {
-          setActiveTab(storedTab);
-        }
-        hasLoadedTabState.current = true;
-      } catch (error) {
-        // Failed to load tab state
-      }
-    };
-    loadTabState();
-  }, [visible]);
-
-  // Load persisted monitoring state on mount
-  (0, _react.useEffect)(() => {
-    if (!visible || hasLoadedMonitoringState.current) return;
-    const loadMonitoringState = async () => {
-      try {
-        const storedMonitoring = await _asyncStorage.default.getItem(_sharedUi.devToolsStorageKeys.storage.isMonitoring());
-        if (storedMonitoring !== null) {
-          const shouldMonitor = storedMonitoring === "true";
-          setIsListeningEnabled(shouldMonitor);
-        }
-        hasLoadedMonitoringState.current = true;
-      } catch (error) {
-        // Failed to load monitoring state
-      }
-    };
-    loadMonitoringState();
-  }, [visible]);
-
-  // Note: Conversations will appear when storage events are triggered
-  // Click on any conversation to see the unified view with toggle cards
-
-  // Save tab state when it changes
-  (0, _react.useEffect)(() => {
-    if (!hasLoadedTabState.current) return; // Don't save on initial load
-
-    const saveTabState = async () => {
-      try {
-        await _asyncStorage.default.setItem(_sharedUi.devToolsStorageKeys.storage.activeTab(), activeTab);
-      } catch (error) {
-        // Failed to save tab state
-      }
-    };
-    saveTabState();
-  }, [activeTab]);
-
-  // Save monitoring state when it changes
-  (0, _react.useEffect)(() => {
-    if (!hasLoadedMonitoringState.current) return; // Don't save on initial load
-
-    const saveMonitoringState = async () => {
-      try {
-        await _asyncStorage.default.setItem(_sharedUi.devToolsStorageKeys.storage.isMonitoring(), isListening.toString());
-      } catch (error) {
-        // Failed to save monitoring state
-      }
-    };
-    saveMonitoringState();
-  }, [isListening]);
-
-  // Load persisted filters on mount
-  (0, _react.useEffect)(() => {
-    if (!visible || hasLoadedFilters.current) return;
-    const loadFilters = async () => {
-      try {
-        const storedFilters = await _asyncStorage.default.getItem(_sharedUi.devToolsStorageKeys.storage.eventFilters());
-        if (storedFilters) {
-          const filters = JSON.parse(storedFilters);
-          // Always ensure @react_buoy is included to hide dev tool keys
-          if (!filters.includes("@react_buoy")) {
-            filters.push("@react_buoy");
-          }
-          setIgnoredPatterns(new Set(filters));
-        }
-        hasLoadedFilters.current = true;
-      } catch (error) {
-        // Failed to load filters
-      }
-    };
-    loadFilters();
-  }, [visible]);
-
-  // Save filters when they change
-  (0, _react.useEffect)(() => {
-    if (!hasLoadedFilters.current) return; // Don't save on initial load
-
-    const saveFilters = async () => {
-      try {
-        const filters = Array.from(ignoredPatterns);
-        await _asyncStorage.default.setItem(_sharedUi.devToolsStorageKeys.storage.eventFilters(), JSON.stringify(filters));
-      } catch (error) {
-        // Failed to save filters
-      }
-    };
-    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
 
@@ -676,18 +574,26 @@ function StorageModalWithTabs({
       const filtered = storageTypeFilter !== "all";
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.flexFill,
-        children: [eventTypeFilterBar, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.emptyState,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Database, {
-            size: 48,
-            color: _sharedUi.night.color.textTertiary
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.emptyTitle,
-            children: !isListening ? "Event listener is paused" : filtered ? `No ${storageTypeFilter} events` : "No storage events yet"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.emptySubtitle,
-            children: !isListening ? "Press play to start monitoring" : filtered ? "Other backends have events — pick All Types to see them" : "Storage operations will appear here"
-          })]
+        children: [eventTypeFilterBar, /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolEmptyState, {
+          testID: "buoy-storage-events-empty"
+          // Three literal causes, no search on this tab — so it renders
+          // through the shared shell without the shared resolver. The
+          // backend pills need their own sentence naming the pill that
+          // undoes them, which the generic "Filtered Out" would drop.
+          ,
+          ...(!isListening ? {
+            otto: "paused",
+            title: "Event listener is paused",
+            message: "Press play to start monitoring"
+          } : filtered ? {
+            otto: "filtering",
+            title: `No ${storageTypeFilter} events`,
+            message: "Other backends have events — pick All Types to see them"
+          } : {
+            otto: "listening",
+            title: "No storage events yet",
+            message: "Storage operations will appear here"
+          })
         })]
       });
     }

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useStorageEvents = useStorageEvents;
 var _react = require("react");
+var _sharedUi = require("@buoy-gg/shared-ui");
 var _storageEventStore = require("../stores/storageEventStore");
 /**
  * useStorageEvents Hook
@@ -39,60 +40,22 @@ function useStorageEvents(options = {}) {
     maxEvents = 500,
     enabled = true
   } = options;
-  const [events, setEvents] = (0, _react.useState)([]);
-  // Track capturing state locally so it updates reactively with the subscription
-  const [isCapturing, setIsCapturing] = (0, _react.useState)(enabled);
-
-  // Subscribe to store - this automatically starts/stops the storage listener
-  // based on subscriber count (Subscribable pattern from TanStack Query)
-  // Only subscribe when enabled is true
-  (0, _react.useEffect)(() => {
-    if (!enabled) {
-      setIsCapturing(false);
-      return;
-    }
-
-    // Frame-coalesced (same pattern as network's useNetworkEventList):
-    // bursts of storage writes land as ONE commit per frame instead of
-    // one per emission — the dominant live-churn cost measured on the
-    // network tool (tool-bench 2026-07-06).
-    let rafId = null;
-    let pending = null;
-    const unsubscribe = _storageEventStore.storageEventStore.subscribeToEvents(allEvents => {
-      pending = allEvents;
-      if (rafId != null) return;
-      rafId = requestAnimationFrame(() => {
-        rafId = null;
-        if (!pending) return;
-        // Filter by storage type if specified
-        let filtered = pending;
-        pending = null;
-        if (storageType !== "all") {
-          filtered = filtered.filter(e => e.storageType === storageType);
-        }
-        // Limit events
-        if (filtered.length > maxEvents) {
-          filtered = filtered.slice(0, maxEvents);
-        }
-        setEvents(filtered);
-      });
-    });
-
-    // Mark as capturing after successful subscription
-    setIsCapturing(true);
-    return () => {
-      unsubscribe();
-      if (rafId != null) cancelAnimationFrame(rafId);
-      // Note: Don't set isCapturing=false here because we might be
-      // re-subscribing due to dependency change, not actually stopping
-    };
-  }, [storageType, maxEvents, enabled]);
-  const clearEvents = (0, _react.useCallback)(() => {
-    _storageEventStore.storageEventStore.clearEvents();
-  }, []);
+  // Stable per storageType so the shared hook doesn't resubscribe every render.
+  const select = (0, _react.useMemo)(() => storageType === "all" ? undefined : events => events.filter(e => e.storageType === storageType), [storageType]);
+  // Subscribing auto-starts the storage listener (Subscribable pattern), and
+  // the shared hook frame-coalesces write bursts into one commit.
+  const {
+    events,
+    clearEvents,
+    isActive
+  } = (0, _sharedUi.useEventStoreEvents)(_storageEventStore.storageEventStore, {
+    maxEvents,
+    enabled,
+    select
+  });
   return {
     events,
     clearEvents,
-    isCapturing
+    isCapturing: isActive
   };
 }