@buoy-gg/zustand 7.0.30 → 7.0.32

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

@@ -12,6 +12,7 @@ var _dataViewer = require("@buoy-gg/shared-ui/dataViewer");
 var _ZustandDetailViewToggle = require("./ZustandDetailViewToggle");
 var _ZustandStateInfoView = require("./ZustandStateInfoView");
 var _zustandStateStore = require("../utils/zustandStateStore");
+var _testIDs = require("../utils/testIDs");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * ZustandStateDetailContent
@@ -121,6 +122,7 @@ function ZustandStateDetailContent({
     const parsed = (0, _sharedUi.parseValue)(change.nextState);
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.contentCard,
+      testID: `${_testIDs.ZUSTAND_TEST_ID}-state-card`,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.valueHeader,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -142,6 +144,7 @@ function ZustandStateDetailContent({
             style: styles.typeBadge,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: styles.typeText,
+              testID: `${_testIDs.ZUSTAND_TEST_ID}-state-type`,
               children: stateType.toUpperCase()
             })
           })]
@@ -193,7 +196,14 @@ function ZustandStateDetailContent({
   const handleFooterNext = (0, _react.useCallback)(() => {
     onIndexChange(Math.max(0, selectedIndex - 1));
   }, [selectedIndex, onIndexChange]);
-  const diffDisabled = totalChanges <= 1;
+
+  // The diff compares THIS change's prevState/nextState — both live on the
+  // change itself, so it needs no siblings. Gating on `changes.length` greyed
+  // DIFF out for every zustand event opened from the Events timeline, which
+  // hands this component a one-element array. Only a change with no captured
+  // previous state (initial creation) has nothing to compare.
+  const diffDisabled = change.prevState === undefined;
+  const showInternalFooter = !disableInternalFooter && totalChanges > 1;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: styles.container,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ZustandDetailViewToggle.ZustandDetailViewToggle, {
@@ -201,7 +211,7 @@ function ZustandStateDetailContent({
       onViewChange: setActiveView,
       diffDisabled: diffDisabled
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.contentArea,
+      style: [styles.contentArea, showInternalFooter && styles.contentAreaFooterPad],
       children: [activeView === "change" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZustandStateInfoView.ZustandStateInfoView, {
         change: change
       }), activeView === "state" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -209,19 +219,22 @@ function ZustandStateDetailContent({
         children: renderStateView()
       }), activeView === "diff" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.diffContainer,
+        testID: `${_testIDs.ZUSTAND_TEST_ID}-diff`,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.DiffModeTabs, {
           tabs: DIFF_MODE_TABS,
           activeTab: diffMode,
-          onTabChange: setDiffMode
+          onTabChange: setDiffMode,
+          testIDPrefix: `${_testIDs.ZUSTAND_TEST_ID}-diff-tab`
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CompareBar, {
           leftEvent: leftEvent,
           rightEvent: rightEvent
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: styles.diffContent,
+          testID: `${_testIDs.ZUSTAND_TEST_ID}-diff-content`,
           children: renderDiffContent()
         })]
       })]
-    }), !disableInternalFooter && totalChanges > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.EventStepperFooter, {
+    }), showInternalFooter && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.EventStepperFooter, {
       currentIndex: chronologicalNumber - 1,
       totalItems: totalChanges,
       onPrevious: handleFooterPrevious,
@@ -261,7 +274,11 @@ const styles = _reactNative.StyleSheet.create({
     backgroundColor: "transparent"
   },
   contentArea: {
-    flex: 1,
+    flex: 1
+  },
+  // Clearance for the absolute EventStepperFooter — only when it renders,
+  // otherwise hosts like the Events tool get a dead band at the sheet bottom.
+  contentAreaFooterPad: {
     paddingBottom: 96
   },
   stateContainer: {

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

@@ -11,6 +11,7 @@ var _license = require("@buoy-gg/license");
 var _dataViewer = require("@buoy-gg/shared-ui/dataViewer");
 var _ZustandActionButton = require("./ZustandActionButton");
 var _zustandStateStore = require("../utils/zustandStateStore");
+var _testIDs = require("../utils/testIDs");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
@@ -60,10 +61,12 @@ function formatDuration(duration) {
 function SectionHeader({
   icon: Icon,
   title,
-  badge
+  badge,
+  testID
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: styles.sectionHeader,
+    testID: testID,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.sectionHeaderLeft,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
@@ -80,7 +83,8 @@ function InfoRow({
   label,
   value,
   valueColor,
-  mono = false
+  mono = false,
+  testID
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: styles.infoRow,
@@ -88,6 +92,7 @@ function InfoRow({
       style: styles.infoLabel,
       children: label
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      testID: testID,
       style: [styles.infoValue, mono && styles.infoValueMono, valueColor ? {
         color: valueColor
       } : undefined],
@@ -143,8 +148,10 @@ const ZustandStateInfoView = exports.ZustandStateInfoView = /*#__PURE__*/(0, _re
     style: styles.container,
     contentContainerStyle: styles.contentContainer,
     showsVerticalScrollIndicator: false,
+    testID: `${_testIDs.ZUSTAND_TEST_ID}-detail-scroll`,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.card,
+      testID: `${_testIDs.ZUSTAND_TEST_ID}-info-card`,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SectionHeader, {
         icon: _sharedUi.Info,
         title: "CHANGE INFO"
@@ -154,11 +161,13 @@ const ZustandStateInfoView = exports.ZustandStateInfoView = /*#__PURE__*/(0, _re
           label: "Store",
           value: change.storeName,
           mono: true,
-          valueColor: storeColor
+          valueColor: storeColor,
+          testID: `${_testIDs.ZUSTAND_TEST_ID}-info-store`
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
           label: "Time",
           value: formatTime(change.timestamp),
-          mono: true
+          mono: true,
+          testID: `${_testIDs.ZUSTAND_TEST_ID}-info-time`
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           style: styles.badgeRow,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -169,6 +178,7 @@ const ZustandStateInfoView = exports.ZustandStateInfoView = /*#__PURE__*/(0, _re
               style: [styles.categoryText, {
                 color: categoryInfo.color
               }],
+              testID: `${_testIDs.ZUSTAND_TEST_ID}-info-category`,
               children: categoryInfo.label
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -178,6 +188,7 @@ const ZustandStateInfoView = exports.ZustandStateInfoView = /*#__PURE__*/(0, _re
               color: change.isSlowUpdate ? _sharedUi.buoyColors.error : _sharedUi.night.color.textSecondary
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: [styles.durationText, change.isSlowUpdate && styles.durationTextSlow],
+              testID: `${_testIDs.ZUSTAND_TEST_ID}-info-duration`,
               children: formatDuration(change.duration)
             }), change.isSlowUpdate && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.AlertTriangle, {
               size: 10,
@@ -190,12 +201,14 @@ const ZustandStateInfoView = exports.ZustandStateInfoView = /*#__PURE__*/(0, _re
               color: _sharedUi.buoyColors.success
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: styles.changesText,
+              testID: `${_testIDs.ZUSTAND_TEST_ID}-info-changes`,
               children: change.diffSummary || "changed"
             })]
           }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
             style: styles.noChangesBadge,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: styles.noChangesText,
+              testID: `${_testIDs.ZUSTAND_TEST_ID}-info-no-changes`,
               children: "no change"
             })
           }), change.isPersisted && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -205,6 +218,7 @@ const ZustandStateInfoView = exports.ZustandStateInfoView = /*#__PURE__*/(0, _re
               color: _sharedUi.buoyColors.info
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: styles.persistText,
+              testID: `${_testIDs.ZUSTAND_TEST_ID}-info-persisted`,
               children: "PERSISTED"
             })]
           })]
@@ -212,6 +226,7 @@ const ZustandStateInfoView = exports.ZustandStateInfoView = /*#__PURE__*/(0, _re
       })]
     }), hasChangedKeys && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.card,
+      testID: `${_testIDs.ZUSTAND_TEST_ID}-keys-card`,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SectionHeader, {
         icon: _sharedUi.Zap,
         title: "CHANGED KEYS",
@@ -219,6 +234,7 @@ const ZustandStateInfoView = exports.ZustandStateInfoView = /*#__PURE__*/(0, _re
           style: styles.countBadge,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: styles.countText,
+            testID: `${_testIDs.ZUSTAND_TEST_ID}-keys-count`,
             children: change.changedKeys.length
           })
         })
@@ -230,6 +246,7 @@ const ZustandStateInfoView = exports.ZustandStateInfoView = /*#__PURE__*/(0, _re
             style: styles.keyBadge,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: styles.keyText,
+              testID: `${_testIDs.ZUSTAND_TEST_ID}-key-${key}`,
               children: key
             })
           }, key))
@@ -237,6 +254,7 @@ const ZustandStateInfoView = exports.ZustandStateInfoView = /*#__PURE__*/(0, _re
       })]
     }), hasPartial && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.card,
+      testID: `${_testIDs.ZUSTAND_TEST_ID}-partial-card`,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SectionHeader, {
         icon: _sharedUi.Box,
         title: "PARTIAL (setState argument)",
@@ -244,6 +262,7 @@ const ZustandStateInfoView = exports.ZustandStateInfoView = /*#__PURE__*/(0, _re
           style: styles.typeBadge,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: styles.typeText,
+            testID: `${_testIDs.ZUSTAND_TEST_ID}-partial-type`,
             children: Array.isArray(change.partial) ? "ARRAY" : typeof change.partial === "object" ? "OBJECT" : String(typeof change.partial).toUpperCase()
           })
         })
@@ -259,6 +278,7 @@ const ZustandStateInfoView = exports.ZustandStateInfoView = /*#__PURE__*/(0, _re
       })]
     }), change.partial === "(updater fn)" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.card,
+      testID: `${_testIDs.ZUSTAND_TEST_ID}-updater-card`,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SectionHeader, {
         icon: _sharedUi.Box,
         title: "SET STATE CALL"
@@ -277,15 +297,18 @@ const ZustandStateInfoView = exports.ZustandStateInfoView = /*#__PURE__*/(0, _re
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ZustandActionButton.ZustandActionButton, {
         type: "jump",
         text: "JUMP",
-        onPress: handleJumpToState
+        onPress: handleJumpToState,
+        testID: `${_testIDs.ZUSTAND_TEST_ID}-jump`
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZustandActionButton.ZustandActionButton, {
         type: "reset",
         text: "RESET STORE",
-        onPress: handleResetStore
+        onPress: handleResetStore,
+        testID: `${_testIDs.ZUSTAND_TEST_ID}-reset`
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZustandActionButton.ZustandActionButton, {
         type: "copy",
         text: "COPY STATE",
-        onPress: handleCopyState
+        onPress: handleCopyState,
+        testID: `${_testIDs.ZUSTAND_TEST_ID}-copy-state`
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ProUpgradeModal, {
       visible: showProModal,

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

@@ -7,17 +7,16 @@ exports.ZustandStoreBrowser = ZustandStoreBrowser;
 var _react = require("react");
 var _reactNative = require("react-native");
 var _sharedUi = require("@buoy-gg/shared-ui");
-var _dataViewer = require("@buoy-gg/shared-ui/dataViewer");
 var _zustandStateStore = require("../utils/zustandStateStore");
+var _testIDs = require("../utils/testIDs");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * ZustandStoreBrowser
  *
- * Browse tab — shows all registered Zustand stores and their current state.
- * Mirrors the Storage Browser pattern from @buoy-gg/storage.
- *
- * Each store is shown as an expandable row with its current state viewable
- * via the shared DataViewer component.
+ * Browse tab — lists all registered Zustand stores. Tapping a card opens the
+ * store's detail screen (ZustandStoreDetailContent): live state editor on
+ * top, store details and the read-only tree below — the React Query
+ * interaction, replacing the old expand-in-place card.
  */
 
 /**
@@ -44,80 +43,10 @@ function getKeysPreview(store) {
     return "";
   }
 }
-function StoreExpandedContent({
-  store,
-  onViewHistory
-}) {
-  const state = store.api.getState();
-  const displayState = (0, _react.useMemo)(() => {
-    if (state && typeof state === "object") {
-      const filtered = {};
-      for (const [key, value] of Object.entries(state)) {
-        if (typeof value !== "function") {
-          filtered[key] = value;
-        }
-      }
-      return (0, _sharedUi.parseValue)(filtered);
-    }
-    return (0, _sharedUi.parseValue)(state);
-  }, [state]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: expandedStyles.container,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ExpandedInfoRow, {
-      label: "Type",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PillBadge, {
-        color: store.color,
-        children: "ZUSTAND"
-      })
-    }), store.stateChangeCount > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ExpandedInfoRow, {
-      label: "Changes",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PillBadge, {
-        color: _sharedUi.buoyColors.warning,
-        children: String(store.stateChangeCount)
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        onPress: () => onViewHistory(store.name),
-        style: expandedStyles.viewHistoryButton,
-        hitSlop: {
-          top: 6,
-          bottom: 6,
-          left: 6,
-          right: 6
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [expandedStyles.viewHistoryText, {
-            color: store.color
-          }],
-          children: "view history \u2192"
-        })
-      })]
-    }), store.isPersisted && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ExpandedInfoRow, {
-      label: "Persist",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PillBadge, {
-        color: _sharedUi.buoyColors.info,
-        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Database, {
-          size: 9,
-          color: _sharedUi.buoyColors.info
-        }),
-        children: store.persistName || "persisted"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: expandedStyles.dataContainer,
-      children: displayState && typeof displayState === "object" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
-        title: "",
-        data: displayState,
-        showTypeFilter: true,
-        rawMode: true,
-        initialExpanded: true
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: expandedStyles.emptyText,
-        children: "Empty state"
-      })
-    })]
-  });
-}
 function LoadingBrowserState() {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: styles.emptyState,
+    testID: `${_testIDs.ZUSTAND_TEST_ID}-stores-loading`,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
       size: "small",
       color: _sharedUi.night.color.textTertiary
@@ -133,11 +62,13 @@ function LoadingBrowserState() {
 function EmptyBrowserState() {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: styles.emptyState,
+    testID: `${_testIDs.ZUSTAND_TEST_ID}-stores-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}-stores-empty-title`,
       children: "No stores registered"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: styles.emptyText,
@@ -148,33 +79,25 @@ function EmptyBrowserState() {
 function ZustandStoreBrowser({
   stores,
   searchQuery,
-  onViewHistory,
   isLoading = false,
-  onStoreExpand
+  onOpenStore
 }) {
-  const [expandedStore, setExpandedStore] = (0, _react.useState)(null);
-
   // Filter stores by search query
   const filteredStores = (0, _react.useMemo)(() => {
     if (!searchQuery) return stores;
     const search = searchQuery.toLowerCase();
     return stores.filter(s => s.name.toLowerCase().includes(search) || s.persistName && s.persistName.toLowerCase().includes(search));
   }, [stores, searchQuery]);
-  const handleStorePress = (0, _react.useCallback)(store => {
-    setExpandedStore(prev => {
-      const next = prev === store.name ? null : store.name;
-      if (next) onStoreExpand?.(store.name);
-      return next;
-    });
-  }, [onStoreExpand]);
   if (filteredStores.length === 0 && !searchQuery) {
     return isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(LoadingBrowserState, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyBrowserState, {});
   }
   if (filteredStores.length === 0 && searchQuery) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.emptyState,
+      testID: `${_testIDs.ZUSTAND_TEST_ID}-stores-no-match`,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: styles.emptyTitle,
+        testID: `${_testIDs.ZUSTAND_TEST_ID}-stores-no-match-title`,
         children: "No matching stores"
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
         style: styles.emptyText,
@@ -186,6 +109,7 @@ function ZustandStoreBrowser({
     style: styles.container,
     contentContainerStyle: styles.scrollContent,
     showsVerticalScrollIndicator: true,
+    testID: `${_testIDs.ZUSTAND_TEST_ID}-stores-scroll`,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.sectionHeader,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -195,27 +119,27 @@ function ZustandStoreBrowser({
         style: styles.sectionCountBadge,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.sectionCountText,
+          testID: `${_testIDs.ZUSTAND_TEST_ID}-stores-count`,
           children: filteredStores.length
         })
       })]
     }), filteredStores.map(store => {
-      const isExpanded = expandedStore === store.name;
       const keysPreview = getKeysPreview(store);
       const storeColor = _zustandStateStore.zustandStateStore.getStoreColor(store.name);
+      const rowID = (0, _testIDs.storeRowTestID)(store.name);
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.storeRowWrapper,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CompactRow, {
           statusDotColor: storeColor,
-          statusLabel: store.name,
-          statusSublabel: store.isPersisted ? "persisted" : "in-memory",
-          primaryText: keysPreview,
+          statusLabel: store.isPersisted ? "persisted" : "in-memory",
+          primaryText: store.name,
+          secondaryText: keysPreview || undefined,
           showChevron: true,
-          isExpanded: isExpanded,
-          onPress: () => handleStorePress(store),
-          expandedContent: isExpanded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(StoreExpandedContent, {
-            store: store,
-            onViewHistory: onViewHistory
-          }) : undefined
+          onPress: () => onOpenStore(store.name),
+          testID: rowID,
+          statusTestID: `${rowID}-backing`,
+          primaryTestID: `${rowID}-name`,
+          secondaryTestID: `${rowID}-keys`
         }), store.stateChangeCount > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: [styles.absCountBadge, {
             backgroundColor: storeColor + "22",
@@ -226,6 +150,7 @@ function ZustandStoreBrowser({
             style: [styles.absCountText, {
               color: storeColor
             }],
+            testID: `${rowID}-count`,
             children: String(store.stateChangeCount)
           })
         })]
@@ -301,32 +226,4 @@ const styles = _reactNative.StyleSheet.create({
     textAlign: "center",
     lineHeight: 18
   }
-});
-const expandedStyles = _reactNative.StyleSheet.create({
-  container: {
-    gap: 10
-  },
-  viewHistoryButton: {
-    marginLeft: 4
-  },
-  viewHistoryText: {
-    fontSize: 10,
-    fontWeight: "600",
-    fontFamily: "monospace"
-  },
-  dataContainer: {
-    // Inset display panel — darker than the card, the night track color.
-    backgroundColor: _sharedUi.night.color.bg,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.border,
-    overflow: "hidden",
-    minHeight: 60
-  },
-  emptyText: {
-    color: _sharedUi.night.color.textTertiary,
-    fontSize: 12,
-    padding: 14,
-    fontStyle: "italic"
-  }
 });