@buoy-gg/zustand 7.0.29 → 7.0.31

package/lib/commonjs/zustand/components/ZustandActionButton.js

@@ -44,7 +44,8 @@ function ZustandActionButton({
   onPress,
   text,
   type,
-  disabled = false
+  disabled = false,
+  testID
 }) {
   const config = buttonConfigs[type];
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
@@ -56,6 +57,7 @@ function ZustandActionButton({
       opacity: disabled ? 0.5 : 1
     }],
     activeOpacity: 0.7,
+    testID: testID,
     accessibilityRole: "button",
     accessibilityLabel: text,
     accessibilityState: {

package/lib/commonjs/zustand/components/ZustandDetailViewToggle.js

@@ -53,6 +53,13 @@ const ZustandDetailViewToggle = exports.ZustandDetailViewToggle = /*#__PURE__*/(
         onPress: () => !isDisabled && onViewChange(config.key),
         activeOpacity: isDisabled ? 1 : 0.8,
         disabled: isDisabled,
+        testID: `buoy-zustand-view-${config.key}`,
+        accessibilityRole: "button",
+        accessibilityLabel: config.label,
+        accessibilityState: {
+          disabled: isDisabled,
+          selected: isActive
+        },
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           style: styles.cardContent,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {

package/lib/commonjs/zustand/components/ZustandEventFilterView.js

@@ -8,6 +8,7 @@ var _react = require("react");
 var _reactNative = require("react-native");
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _zustandStateStore = require("../utils/zustandStateStore");
+var _testIDs = require("../utils/testIDs");
 var _jsxRuntime = require("react/jsx-runtime");
 /** Returns the store color for a given pattern if it exactly matches a registered store name */
 function getStoreColorForPattern(pattern, stores) {
@@ -39,6 +40,7 @@ function ZustandEventFilterView({
     style: styles.container,
     contentContainerStyle: styles.scrollContent,
     showsVerticalScrollIndicator: false,
+    testID: `${_testIDs.ZUSTAND_TEST_ID}-filters-scroll`,
     children: [stores.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.section,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.SectionHeader, {
@@ -46,7 +48,8 @@ function ZustandEventFilterView({
           children: "REGISTERED STORES"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Badge, {
           count: stores.length,
-          color: _sharedUi.night.color.accent
+          color: _sharedUi.night.color.accent,
+          testID: `${_testIDs.ZUSTAND_TEST_ID}-filters-store-count`
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
         style: styles.storeList,
@@ -60,6 +63,12 @@ function ZustandEventFilterView({
             style: [styles.storeRow, filtered && styles.storeRowFiltered],
             onPress: () => onAddPattern(store.name),
             disabled: filtered,
+            testID: `${_testIDs.ZUSTAND_TEST_ID}-filters-store-${(0, _testIDs.slugForTestID)(store.name)}`,
+            accessibilityRole: "button",
+            accessibilityLabel: `Hide ${store.name}`,
+            accessibilityState: {
+              disabled: filtered
+            },
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
               style: [styles.storeDot, {
                 backgroundColor: filtered ? _sharedUi.night.color.textTertiary : storeColor
@@ -93,14 +102,16 @@ function ZustandEventFilterView({
           children: "STORE NAME FILTERS"
         }), ignoredPatterns.size > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Badge, {
           count: ignoredPatterns.size,
-          color: _sharedUi.night.color.accent
+          color: _sharedUi.night.color.accent,
+          testID: `${_testIDs.ZUSTAND_TEST_ID}-filters-count`
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: styles.addInputWrapper,
         children: !showAddInput ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.AddFilterButton, {
           onPress: () => setShowAddInput(true),
           color: _sharedUi.night.color.accent,
-          label: "Add store name pattern"
+          label: "Add store name pattern",
+          testID: `${_testIDs.ZUSTAND_TEST_ID}-filters-add-open`
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.AddFilterInput, {
           value: inputValue,
           onChange: setInputValue,
@@ -110,7 +121,8 @@ function ZustandEventFilterView({
             setInputValue("");
           },
           placeholder: "Enter store name pattern to hide...",
-          color: _sharedUi.night.color.accent
+          color: _sharedUi.night.color.accent,
+          testID: `${_testIDs.ZUSTAND_TEST_ID}-filters-add-input`
         })
       }), ignoredPatterns.size > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: styles.patternList,
@@ -120,6 +132,9 @@ function ZustandEventFilterView({
             style: styles.patternRow,
             onPress: () => onTogglePattern(pattern),
             activeOpacity: 0.8,
+            testID: `${_testIDs.ZUSTAND_TEST_ID}-filters-chip-${(0, _testIDs.slugForTestID)(pattern)}`,
+            accessibilityRole: "button",
+            accessibilityLabel: `Remove filter ${pattern}`,
             children: [storeColor ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
               style: [styles.storeDot, {
                 backgroundColor: storeColor

package/lib/commonjs/zustand/components/ZustandModal.js

@@ -13,7 +13,9 @@ var _useZustandStateChanges = require("../hooks/useZustandStateChanges");
 var _ZustandStateChangeItem = require("./ZustandStateChangeItem");
 var _ZustandStateDetailContent = require("./ZustandStateDetailContent");
 var _ZustandStoreBrowser = require("./ZustandStoreBrowser");
+var _ZustandStoreDetailContent = require("./ZustandStoreDetailContent");
 var _ZustandEventFilterView = require("./ZustandEventFilterView");
+var _testIDs = require("../utils/testIDs");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Main Zustand DevTools modal
@@ -23,19 +25,32 @@ var _jsxRuntime = require("react/jsx-runtime");
  * - Events tab: Live state change monitoring with diffs
  */
 
+/**
+ * Cell clipping, off in e2e bundles only.
+ *
+ * `removeClippedSubviews` unmounts the views of rows scrolled out of the
+ * window, which is what makes a long change list cheap — and which makes
+ * Detox report a perfectly rendered row as un-hittable. The env var is
+ * inlined at bundle time, so a bundler that does NOT inline it leaves the
+ * production behaviour exactly as it was.
+ */
+const CLIP_OFFSCREEN_CELLS = !(typeof process !== "undefined" && process.env?.EXPO_PUBLIC_E2E);
 function EventsEmptyState({
   isEnabled
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: styles.emptyState,
+    testID: `${_testIDs.ZUSTAND_TEST_ID}-empty`,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Box, {
       size: 32,
       color: _sharedUi.night.color.textTertiary
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: styles.emptyTitle,
+      testID: `${_testIDs.ZUSTAND_TEST_ID}-empty-title`,
       children: "No state changes"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: styles.emptyText,
+      testID: `${_testIDs.ZUSTAND_TEST_ID}-empty-text`,
       children: isEnabled ? "State changes will appear here as stores update." : "Enable capture to start recording state changes"
     })]
   });
@@ -59,6 +74,11 @@ function ZustandModal({
   const [showProModal, setShowProModal] = (0, _react.useState)(false);
   const [activeTab, setActiveTab] = (0, _react.useState)(initialTab);
   const [selectedHistoryStore, setSelectedHistoryStore] = (0, _react.useState)(null);
+  /**
+   * Which store's DETAIL screen is open (live editor + details + tree —
+   * the React Query interaction). Null means the browser list.
+   */
+  const [selectedStoreName, setSelectedStoreName] = (0, _react.useState)(null);
   const [showFilters, setShowFilters] = (0, _react.useState)(false);
   const [ignoredPatterns, setIgnoredPatterns] = (0, _react.useState)(new Set());
   const {
@@ -84,19 +104,26 @@ function ZustandModal({
     return stores.filter(s => !Array.from(ignoredPatterns).some(p => s.name.toLowerCase().includes(p.toLowerCase())));
   }, [stores, ignoredPatterns]);
 
+  // Scope to a store BEFORE the tier cap, not after.
+  //
+  // The other way round, the cap was applied to the whole log and a store's
+  // history was whatever survived it — so a store with one change, made a
+  // while ago, opened an EMPTY history from a card that said "Changes: 1" and
+  // offered a "view history" link. The cap is a limit on how much of a list
+  // you can see; which list you are looking at is decided first.
+  const scopedChanges = (0, _react.useMemo)(() => {
+    if (!selectedHistoryStore) return displayedChanges;
+    return displayedChanges.filter(c => c.storeName === selectedHistoryStore);
+  }, [displayedChanges, selectedHistoryStore]);
+
   // Pro is Infinity here, so slice() returns everything and the locked count
   // floors at 0 — no tier branching needed at the call site.
-  const visibleChanges = (0, _react.useMemo)(() => displayedChanges.slice(0, changeLimit), [displayedChanges, changeLimit]);
-  const lockedChangeCount = (0, _react.useMemo)(() => Math.max(0, displayedChanges.length - changeLimit), [displayedChanges.length, changeLimit]);
+  const visibleChanges = (0, _react.useMemo)(() => scopedChanges.slice(0, changeLimit), [scopedChanges, changeLimit]);
+  const lockedChangeCount = (0, _react.useMemo)(() => Math.max(0, scopedChanges.length - changeLimit), [scopedChanges.length, changeLimit]);
   const hasLockedChanges = lockedChangeCount > 0;
 
-  // When viewing a single store's history, scope the change list to that store
-  const activeChanges = (0, _react.useMemo)(() => {
-    if (selectedHistoryStore) {
-      return visibleChanges.filter(c => c.storeName === selectedHistoryStore);
-    }
-    return visibleChanges;
-  }, [visibleChanges, selectedHistoryStore]);
+  /** The list the detail stepper walks: already scoped, already capped. */
+  const activeChanges = visibleChanges;
 
   // Selection state — track by ID so new events don't shift position
   const [selectedChangeId, setSelectedChangeId] = (0, _react.useState)(null);
@@ -146,6 +173,16 @@ function ZustandModal({
       }));
     }
   };
+
+  /** Drop the query AND put the header back. The X, and only the X. */
+  const closeSearch = (0, _react.useCallback)(() => {
+    setSearchText("");
+    setFilter(prev => ({
+      ...prev,
+      searchText: ""
+    }));
+    setIsSearchActive(false);
+  }, [setFilter]);
   const handleChangePress = (0, _react.useCallback)(change => {
     setSelectedChangeId(change.id);
   }, []);
@@ -169,6 +206,16 @@ function ZustandModal({
     setSelectedHistoryStore(null);
     setSelectedChangeId(null);
   }, []);
+  const handleOpenStore = (0, _react.useCallback)(storeName => {
+    setSelectedStoreName(storeName);
+    // The desktop mirror hydrates a store's full state on demand — this is
+    // the moment it becomes needed (was fired on card-expand before the
+    // detail screen replaced expansion).
+    onStoreExpand?.(storeName);
+  }, [onStoreExpand]);
+  const handleBackFromStore = (0, _react.useCallback)(() => {
+    setSelectedStoreName(null);
+  }, []);
   const getStoresSnapshot = (0, _react.useCallback)(() => {
     return displayedStores.reduce((acc, store) => {
       try {
@@ -223,6 +270,7 @@ function ZustandModal({
   const handleTabChange = (0, _react.useCallback)(tab => {
     setActiveTab(tab);
     setSelectedHistoryStore(null);
+    setSelectedStoreName(null);
     setSelectedChangeId(null);
     setShowFilters(false);
     if (searchText) {
@@ -235,14 +283,20 @@ function ZustandModal({
     setIsSearchActive(false);
   }, [searchText, setFilter]);
   const keyExtractor = (0, _react.useCallback)(item => item.id, []);
+
+  // Built for the whole list rather than per row: the ordinal a row carries is
+  // a fact about the list around it. See ../utils/testIDs.ts for why a store
+  // name alone cannot address a change row.
+  const rowTestIDs = (0, _react.useMemo)(() => (0, _testIDs.buildChangeRowTestIDs)(activeChanges), [activeChanges]);
   const renderItem = (0, _react.useCallback)(({
     item
   }) => {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZustandStateChangeItem.ZustandStateChangeItem, {
       change: item,
-      onPress: handleChangePress
+      onPress: handleChangePress,
+      testID: rowTestIDs.get(item.id)
     });
-  }, [handleChangePress]);
+  }, [handleChangePress, rowTestIDs]);
 
   // ---- Header rendering ----
 
@@ -255,7 +309,8 @@ function ZustandModal({
           onBack: () => setShowFilters(false)
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
           title: "Filters",
-          centered: true
+          centered: true,
+          testID: `${_testIDs.ZUSTAND_TEST_ID}-filters-title`
         })]
       });
     }
@@ -267,7 +322,8 @@ function ZustandModal({
           onBack: handleBack
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
           title: `${selectedChange.storeName}/setState`,
-          centered: true
+          centered: true,
+          testID: `${_testIDs.ZUSTAND_TEST_ID}-detail-title`
         })]
       });
     }
@@ -279,17 +335,34 @@ function ZustandModal({
           onBack: handleBackFromHistory
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
           title: `${selectedHistoryStore} History`,
-          centered: true
+          centered: true,
+          testID: `${_testIDs.ZUSTAND_TEST_ID}-history-title`
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Actions, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {
             value: getHistorySnapshot,
             disabled: activeChanges.length === 0,
-            buttonStyle: styles.headerActionButton
+            buttonStyle: styles.headerActionButton,
+            testID: `${_testIDs.ZUSTAND_TEST_ID}-copy`
           })
         })]
       });
     }
 
+    // Store detail header — the live editor screen. AFTER history: history is
+    // reached FROM the detail screen and stacks over it, so when both are set
+    // history owns the header, and its back lands you back on the detail.
+    if (selectedStoreName) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
+          onBack: handleBackFromStore
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
+          title: selectedStoreName,
+          centered: true,
+          testID: `${_testIDs.ZUSTAND_TEST_ID}-store-detail-title`
+        })]
+      });
+    }
+
     // Main view with tabs
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
       children: [onBack && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
@@ -298,27 +371,42 @@ function ZustandModal({
         title: "",
         children: isSearchActive ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           style: styles.headerSearchContainer,
+          testID: `${_testIDs.ZUSTAND_TEST_ID}-search`,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
             size: 14,
             color: _sharedUi.night.color.textSecondary
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
             ref: searchInputRef,
+            testID: `${_testIDs.ZUSTAND_TEST_ID}-search-field`,
             style: styles.headerSearchInput,
             placeholder: activeTab === "stores" ? "Search stores..." : "Search events...",
             placeholderTextColor: _sharedUi.night.color.placeholder,
             value: searchText,
             onChangeText: handleSearch,
-            onSubmitEditing: () => setIsSearchActive(false),
-            onBlur: () => setIsSearchActive(false),
+            onSubmitEditing: () => searchInputRef.current?.blur()
+            // Stay open while the query is still narrowing the list.
+            //
+            // Collapsing on blur hid the reason rows were missing: the
+            // header went back to its TABS — whose counts are of the
+            // WHOLE capture on the stores side — while the list stayed
+            // filtered, so the tool showed "Stores (4)" above a single
+            // row and offered nothing to explain the gap. The only way
+            // back was to reopen a field the user had no reason to think
+            // was still armed.
+            ,
+            onBlur: () => {
+              if (searchText.length === 0) setIsSearchActive(false);
+            },
+            accessibilityLabel: "Search Zustand stores and events",
             autoCapitalize: "none",
             autoCorrect: false,
             returnKeyType: "search"
-          }), searchText.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-            onPress: () => {
-              handleSearch("");
-              setIsSearchActive(false);
-            },
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+            onPress: closeSearch,
             style: styles.headerSearchClear,
+            testID: `${_testIDs.ZUSTAND_TEST_ID}-search-clear`,
+            accessibilityRole: "button",
+            accessibilityLabel: "Close search",
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
               size: 14,
               color: _sharedUi.night.color.textSecondary
@@ -333,12 +421,16 @@ function ZustandModal({
             label: `Events${displayedChanges.length > 0 ? ` (${displayedChanges.length})` : ""}`
           }],
           activeTab: activeTab,
-          onTabChange: handleTabChange
+          onTabChange: handleTabChange,
+          testIDPrefix: `${_testIDs.ZUSTAND_TEST_ID}-tab`
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
           onPress: () => setIsSearchActive(true),
           style: styles.headerActionButton,
+          testID: `${_testIDs.ZUSTAND_TEST_ID}-search-open`,
+          accessibilityRole: "button",
+          accessibilityLabel: "Search",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
             size: 14,
             color: _sharedUi.night.color.textSecondary
@@ -346,6 +438,9 @@ function ZustandModal({
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
           onPress: () => setShowFilters(true),
           style: [styles.headerActionButton, hasActiveFilters && styles.headerActionButtonActive],
+          testID: `${_testIDs.ZUSTAND_TEST_ID}-filters-open`,
+          accessibilityRole: "button",
+          accessibilityLabel: "Filters",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Filter, {
             size: 14,
             color: hasActiveFilters ? _sharedUi.night.color.accent : _sharedUi.night.color.textSecondary
@@ -353,20 +448,24 @@ function ZustandModal({
         }), activeTab === "stores" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {
           value: getStoresSnapshot,
           disabled: displayedStores.length === 0,
-          buttonStyle: styles.headerActionButton
+          buttonStyle: styles.headerActionButton,
+          testID: `${_testIDs.ZUSTAND_TEST_ID}-copy`
         }), activeTab === "events" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {
             value: getEventsSnapshot,
             disabled: displayedChanges.length === 0,
-            buttonStyle: styles.headerActionButton
+            buttonStyle: styles.headerActionButton,
+            testID: `${_testIDs.ZUSTAND_TEST_ID}-copy`
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PowerToggleButton, {
             isEnabled: isEnabled,
             onToggle: toggleCapture,
-            accessibilityLabel: "Toggle Zustand state capture"
+            accessibilityLabel: "Toggle Zustand state capture",
+            testID: `${_testIDs.ZUSTAND_TEST_ID}-power`
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarClearButton, {
             onPress: clearChanges,
             disabled: displayedChanges.length === 0,
-            buttonStyle: styles.headerActionButton
+            buttonStyle: styles.headerActionButton,
+            testID: `${_testIDs.ZUSTAND_TEST_ID}-clear`
           })]
         })]
       })]
@@ -401,18 +500,20 @@ function ZustandModal({
     // Store history view — filtered to one store
     if (selectedHistoryStore) {
       return activeChanges.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+        testID: `${_testIDs.ZUSTAND_TEST_ID}-history-list`,
         data: activeChanges,
         renderItem: renderItem,
         keyExtractor: keyExtractor,
         contentContainerStyle: styles.listContent,
         showsVerticalScrollIndicator: true,
-        removeClippedSubviews: true,
+        removeClippedSubviews: CLIP_OFFSCREEN_CELLS,
         initialNumToRender: 12,
         maxToRenderPerBatch: 8,
         windowSize: 5,
         updateCellsBatchingPeriod: 50
       }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.emptyState,
+        testID: `${_testIDs.ZUSTAND_TEST_ID}-history-empty`,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Box, {
           size: 32,
           color: _sharedUi.night.color.textTertiary
@@ -426,14 +527,41 @@ function ZustandModal({
       });
     }
 
+    // Store detail — live editor + details + read-only tree. After history
+    // in this chain for the same reason as the header: history stacks OVER
+    // the detail screen it was opened from.
+    if (selectedStoreName) {
+      const selectedStore = stores.find(s => s.name === selectedStoreName) ?? null;
+      return selectedStore ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZustandStoreDetailContent.ZustandStoreDetailContent, {
+        store: selectedStore,
+        onViewHistory: handleViewHistory
+      }) :
+      /*#__PURE__*/
+      // The store fell out of the registry mid-look (a remote mirror
+      // rebuilding, a dev reload). Say so rather than rendering nothing.
+      (0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.emptyState,
+        testID: `${_testIDs.ZUSTAND_TEST_ID}-store-detail-gone`,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Box, {
+          size: 32,
+          color: _sharedUi.night.color.textTertiary
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.emptyTitle,
+          children: "Store no longer registered"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+          style: styles.emptyText,
+          children: [selectedStoreName, " is not in the registry any more."]
+        })]
+      });
+    }
+
     // Stores browse tab
     if (activeTab === "stores") {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZustandStoreBrowser.ZustandStoreBrowser, {
         stores: displayedStores,
         searchQuery: searchText,
-        onViewHistory: handleViewHistory,
         isLoading: storesLoading,
-        onStoreExpand: onStoreExpand
+        onOpenStore: handleOpenStore
       });
     }
 
@@ -441,6 +569,7 @@ function ZustandModal({
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [!isEnabled && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.disabledBanner,
+        testID: `${_testIDs.ZUSTAND_TEST_ID}-banner-disabled`,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Power, {
           size: 14,
           color: _sharedUi.night.color.warning
@@ -452,11 +581,14 @@ function ZustandModal({
         style: styles.lockedBanner,
         onPress: handleUpgradePress,
         activeOpacity: 0.8,
+        testID: `${_testIDs.ZUSTAND_TEST_ID}-locked`,
+        accessibilityRole: "button",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Lock, {
           size: 14,
           color: _sharedUi.night.color.accent
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
           style: styles.lockedText,
+          testID: `${_testIDs.ZUSTAND_TEST_ID}-locked-text`,
           children: [lockedChangeCount, " older", " ", lockedChangeCount === 1 ? "change" : "changes", " locked"]
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: styles.upgradeBadge,
@@ -467,12 +599,13 @@ function ZustandModal({
         })]
       }), visibleChanges.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
         ref: flatListRef,
+        testID: `${_testIDs.ZUSTAND_TEST_ID}-list`,
         data: visibleChanges,
         renderItem: renderItem,
         keyExtractor: keyExtractor,
         contentContainerStyle: styles.listContent,
         showsVerticalScrollIndicator: true,
-        removeClippedSubviews: true,
+        removeClippedSubviews: CLIP_OFFSCREEN_CELLS,
         initialNumToRender: 12,
         maxToRenderPerBatch: 8,
         windowSize: 5,
@@ -496,7 +629,15 @@ function ZustandModal({
   // (inside JsModal's ScrollView wrapper every row mounts — the Network
   // tool measured 17 JS FPS / 133% CPU at max load from this exact
   // pattern; see tool-bench batches 2026-07-06).
-  const listOwnsScroll = !showFilters && !(selectedChange && selectedChangeIndex !== null) && (selectedHistoryStore != null || activeTab === "events");
+  //
+  // The STORES tab owns its scrolling too, for a different reason: the
+  // browser hosts the store editor as an absolute-fill overlay over a
+  // flex:1 root, and inside JsModal's ScrollView wrapper that root
+  // collapses to zero height — the list still paints (iOS overflow), but
+  // the editor opens into a 0pt box and never appears. The nested-flex:1-
+  // in-JsModal trap; storage's browser disables the wrapper for the same
+  // reason.
+  const listOwnsScroll = !showFilters && !(selectedChange && selectedChangeIndex !== null) && (selectedHistoryStore != null || activeTab === "events" || activeTab === "stores");
   const body = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: styles.container,
     children: renderContent()

package/lib/commonjs/zustand/components/ZustandStateChangeItem.js

@@ -95,47 +95,43 @@ function getPrimaryText(change) {
 // ({change, onPress} — onPress is a stable useCallback in the modal).
 const ZustandStateChangeItem = exports.ZustandStateChangeItem = /*#__PURE__*/(0, _react.memo)(function ZustandStateChangeItem({
   change,
-  onPress
+  onPress,
+  testID
 }) {
   const statusColor = getCategoryColor(change.category, change.storeName);
   const statusLabel = getStatusLabel(change.category, change.storeName);
   const sublabel = getSublabel(change);
   const primaryText = getPrimaryText(change);
   const badgeText = getBadgeText(change);
-  let customBadge = undefined;
-  if (change.isSlowUpdate) {
-    customBadge = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.badgeContainer,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.badgeText, {
-          color: statusColor
-        }],
-        children: badgeText
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.slowBadge,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Clock, {
-          size: 12,
-          color: _sharedUi.buoyColors.error
-        })
-      })]
-    });
-  } else if (change.hasStateChange) {
-    customBadge = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.badgeContainer,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.badgeText, {
-          color: statusColor
-        }],
-        children: badgeText
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.changeBadge,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Zap, {
-          size: 12,
-          color: _sharedUi.buoyColors.warning
-        })
-      })]
-    });
-  }
+
+  // Always a custom badge, even when there is no icon to hang off it. The
+  // alternative — letting CompactRow draw `badgeText` itself — leaves the one
+  // row whose badge matters most (a set that changed NOTHING) as the only row
+  // in the list with no handle on its badge.
+  const customBadge = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.badgeContainer,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.badgeText, {
+        color: statusColor
+      }],
+      testID: testID ? `${testID}-badge` : undefined,
+      children: badgeText
+    }), change.isSlowUpdate ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.slowBadge,
+      testID: testID ? `${testID}-slow` : undefined,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Clock, {
+        size: 12,
+        color: _sharedUi.buoyColors.error
+      })
+    }) : change.hasStateChange ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.changeBadge,
+      testID: testID ? `${testID}-change` : undefined,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Zap, {
+        size: 12,
+        color: _sharedUi.buoyColors.warning
+      })
+    }) : null]
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CompactRow, {
     statusDotColor: statusColor,
     statusLabel: statusLabel,
@@ -145,10 +141,13 @@ const ZustandStateChangeItem = exports.ZustandStateChangeItem = /*#__PURE__*/(0,
       timestamp: change.timestamp
     }),
     customBadge: customBadge,
-    badgeText: customBadge ? undefined : badgeText,
     badgeColor: statusColor,
     showChevron: true,
-    onPress: () => onPress(change)
+    onPress: () => onPress(change),
+    testID: testID,
+    statusTestID: testID ? `${testID}-status` : undefined,
+    statusSublabelTestID: testID ? `${testID}-sublabel` : undefined,
+    primaryTestID: testID ? `${testID}-keys` : undefined
   });
 });
 const styles = _reactNative.StyleSheet.create({