@buoy-gg/zustand 7.0.29 → 7.0.31

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

@@ -16,21 +16,36 @@ import { useZustandStateChanges } from "../hooks/useZustandStateChanges";
 import { ZustandStateChangeItem } from "./ZustandStateChangeItem";
 import { ZustandStateDetailContent, ZustandStateDetailFooter } from "./ZustandStateDetailContent";
 import { ZustandStoreBrowser } from "./ZustandStoreBrowser";
+import { ZustandStoreDetailContent } from "./ZustandStoreDetailContent";
 import { ZustandEventFilterView } from "./ZustandEventFilterView";
+import { ZUSTAND_TEST_ID, buildChangeRowTestIDs } from "../utils/testIDs";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * 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__*/_jsxs(View, {
     style: styles.emptyState,
+    testID: `${ZUSTAND_TEST_ID}-empty`,
     children: [/*#__PURE__*/_jsx(Box, {
       size: 32,
       color: night.color.textTertiary
     }), /*#__PURE__*/_jsx(Text, {
       style: styles.emptyTitle,
+      testID: `${ZUSTAND_TEST_ID}-empty-title`,
       children: "No state changes"
     }), /*#__PURE__*/_jsx(Text, {
       style: styles.emptyText,
+      testID: `${ZUSTAND_TEST_ID}-empty-text`,
       children: isEnabled ? "State changes will appear here as stores update." : "Enable capture to start recording state changes"
     })]
   });
@@ -54,6 +69,11 @@ export function ZustandModal({
   const [showProModal, setShowProModal] = useState(false);
   const [activeTab, setActiveTab] = useState(initialTab);
   const [selectedHistoryStore, setSelectedHistoryStore] = 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] = useState(null);
   const [showFilters, setShowFilters] = useState(false);
   const [ignoredPatterns, setIgnoredPatterns] = useState(new Set());
   const {
@@ -79,19 +99,26 @@ export 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 = 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 = useMemo(() => displayedChanges.slice(0, changeLimit), [displayedChanges, changeLimit]);
-  const lockedChangeCount = useMemo(() => Math.max(0, displayedChanges.length - changeLimit), [displayedChanges.length, changeLimit]);
+  const visibleChanges = useMemo(() => scopedChanges.slice(0, changeLimit), [scopedChanges, changeLimit]);
+  const lockedChangeCount = 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 = 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] = useState(null);
@@ -141,6 +168,16 @@ export function ZustandModal({
       }));
     }
   };
+
+  /** Drop the query AND put the header back. The X, and only the X. */
+  const closeSearch = useCallback(() => {
+    setSearchText("");
+    setFilter(prev => ({
+      ...prev,
+      searchText: ""
+    }));
+    setIsSearchActive(false);
+  }, [setFilter]);
   const handleChangePress = useCallback(change => {
     setSelectedChangeId(change.id);
   }, []);
@@ -164,6 +201,16 @@ export function ZustandModal({
     setSelectedHistoryStore(null);
     setSelectedChangeId(null);
   }, []);
+  const handleOpenStore = 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 = useCallback(() => {
+    setSelectedStoreName(null);
+  }, []);
   const getStoresSnapshot = useCallback(() => {
     return displayedStores.reduce((acc, store) => {
       try {
@@ -218,6 +265,7 @@ export function ZustandModal({
   const handleTabChange = useCallback(tab => {
     setActiveTab(tab);
     setSelectedHistoryStore(null);
+    setSelectedStoreName(null);
     setSelectedChangeId(null);
     setShowFilters(false);
     if (searchText) {
@@ -230,14 +278,20 @@ export function ZustandModal({
     setIsSearchActive(false);
   }, [searchText, setFilter]);
   const keyExtractor = 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 = useMemo(() => buildChangeRowTestIDs(activeChanges), [activeChanges]);
   const renderItem = useCallback(({
     item
   }) => {
     return /*#__PURE__*/_jsx(ZustandStateChangeItem, {
       change: item,
-      onPress: handleChangePress
+      onPress: handleChangePress,
+      testID: rowTestIDs.get(item.id)
     });
-  }, [handleChangePress]);
+  }, [handleChangePress, rowTestIDs]);
 
   // ---- Header rendering ----
 
@@ -250,7 +304,8 @@ export function ZustandModal({
           onBack: () => setShowFilters(false)
         }), /*#__PURE__*/_jsx(ModalHeader.Content, {
           title: "Filters",
-          centered: true
+          centered: true,
+          testID: `${ZUSTAND_TEST_ID}-filters-title`
         })]
       });
     }
@@ -262,7 +317,8 @@ export function ZustandModal({
           onBack: handleBack
         }), /*#__PURE__*/_jsx(ModalHeader.Content, {
           title: `${selectedChange.storeName}/setState`,
-          centered: true
+          centered: true,
+          testID: `${ZUSTAND_TEST_ID}-detail-title`
         })]
       });
     }
@@ -274,17 +330,34 @@ export function ZustandModal({
           onBack: handleBackFromHistory
         }), /*#__PURE__*/_jsx(ModalHeader.Content, {
           title: `${selectedHistoryStore} History`,
-          centered: true
+          centered: true,
+          testID: `${ZUSTAND_TEST_ID}-history-title`
         }), /*#__PURE__*/_jsx(ModalHeader.Actions, {
           children: /*#__PURE__*/_jsx(ToolbarCopyButton, {
             value: getHistorySnapshot,
             disabled: activeChanges.length === 0,
-            buttonStyle: styles.headerActionButton
+            buttonStyle: styles.headerActionButton,
+            testID: `${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__*/_jsxs(ModalHeader, {
+        children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
+          onBack: handleBackFromStore
+        }), /*#__PURE__*/_jsx(ModalHeader.Content, {
+          title: selectedStoreName,
+          centered: true,
+          testID: `${ZUSTAND_TEST_ID}-store-detail-title`
+        })]
+      });
+    }
+
     // Main view with tabs
     return /*#__PURE__*/_jsxs(ModalHeader, {
       children: [onBack && /*#__PURE__*/_jsx(ModalHeader.Navigation, {
@@ -293,27 +366,42 @@ export function ZustandModal({
         title: "",
         children: isSearchActive ? /*#__PURE__*/_jsxs(View, {
           style: styles.headerSearchContainer,
+          testID: `${ZUSTAND_TEST_ID}-search`,
           children: [/*#__PURE__*/_jsx(Search, {
             size: 14,
             color: night.color.textSecondary
           }), /*#__PURE__*/_jsx(TextInput, {
             ref: searchInputRef,
+            testID: `${ZUSTAND_TEST_ID}-search-field`,
             style: styles.headerSearchInput,
             placeholder: activeTab === "stores" ? "Search stores..." : "Search events...",
             placeholderTextColor: 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__*/_jsx(TouchableOpacity, {
-            onPress: () => {
-              handleSearch("");
-              setIsSearchActive(false);
-            },
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            onPress: closeSearch,
             style: styles.headerSearchClear,
+            testID: `${ZUSTAND_TEST_ID}-search-clear`,
+            accessibilityRole: "button",
+            accessibilityLabel: "Close search",
             children: /*#__PURE__*/_jsx(X, {
               size: 14,
               color: night.color.textSecondary
@@ -328,12 +416,16 @@ export function ZustandModal({
             label: `Events${displayedChanges.length > 0 ? ` (${displayedChanges.length})` : ""}`
           }],
           activeTab: activeTab,
-          onTabChange: handleTabChange
+          onTabChange: handleTabChange,
+          testIDPrefix: `${ZUSTAND_TEST_ID}-tab`
         })
       }), /*#__PURE__*/_jsxs(ModalHeader.Actions, {
         children: [/*#__PURE__*/_jsx(TouchableOpacity, {
           onPress: () => setIsSearchActive(true),
           style: styles.headerActionButton,
+          testID: `${ZUSTAND_TEST_ID}-search-open`,
+          accessibilityRole: "button",
+          accessibilityLabel: "Search",
           children: /*#__PURE__*/_jsx(Search, {
             size: 14,
             color: night.color.textSecondary
@@ -341,6 +433,9 @@ export function ZustandModal({
         }), /*#__PURE__*/_jsx(TouchableOpacity, {
           onPress: () => setShowFilters(true),
           style: [styles.headerActionButton, hasActiveFilters && styles.headerActionButtonActive],
+          testID: `${ZUSTAND_TEST_ID}-filters-open`,
+          accessibilityRole: "button",
+          accessibilityLabel: "Filters",
           children: /*#__PURE__*/_jsx(Filter, {
             size: 14,
             color: hasActiveFilters ? night.color.accent : night.color.textSecondary
@@ -348,20 +443,24 @@ export function ZustandModal({
         }), activeTab === "stores" && /*#__PURE__*/_jsx(ToolbarCopyButton, {
           value: getStoresSnapshot,
           disabled: displayedStores.length === 0,
-          buttonStyle: styles.headerActionButton
+          buttonStyle: styles.headerActionButton,
+          testID: `${ZUSTAND_TEST_ID}-copy`
         }), activeTab === "events" && /*#__PURE__*/_jsxs(_Fragment, {
           children: [/*#__PURE__*/_jsx(ToolbarCopyButton, {
             value: getEventsSnapshot,
             disabled: displayedChanges.length === 0,
-            buttonStyle: styles.headerActionButton
+            buttonStyle: styles.headerActionButton,
+            testID: `${ZUSTAND_TEST_ID}-copy`
           }), /*#__PURE__*/_jsx(PowerToggleButton, {
             isEnabled: isEnabled,
             onToggle: toggleCapture,
-            accessibilityLabel: "Toggle Zustand state capture"
+            accessibilityLabel: "Toggle Zustand state capture",
+            testID: `${ZUSTAND_TEST_ID}-power`
           }), /*#__PURE__*/_jsx(ToolbarClearButton, {
             onPress: clearChanges,
             disabled: displayedChanges.length === 0,
-            buttonStyle: styles.headerActionButton
+            buttonStyle: styles.headerActionButton,
+            testID: `${ZUSTAND_TEST_ID}-clear`
           })]
         })]
       })]
@@ -396,18 +495,20 @@ export function ZustandModal({
     // Store history view — filtered to one store
     if (selectedHistoryStore) {
       return activeChanges.length > 0 ? /*#__PURE__*/_jsx(FlatList, {
+        testID: `${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__*/_jsxs(View, {
         style: styles.emptyState,
+        testID: `${ZUSTAND_TEST_ID}-history-empty`,
         children: [/*#__PURE__*/_jsx(Box, {
           size: 32,
           color: night.color.textTertiary
@@ -421,14 +522,41 @@ export 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__*/_jsx(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.
+      _jsxs(View, {
+        style: styles.emptyState,
+        testID: `${ZUSTAND_TEST_ID}-store-detail-gone`,
+        children: [/*#__PURE__*/_jsx(Box, {
+          size: 32,
+          color: night.color.textTertiary
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.emptyTitle,
+          children: "Store no longer registered"
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: styles.emptyText,
+          children: [selectedStoreName, " is not in the registry any more."]
+        })]
+      });
+    }
+
     // Stores browse tab
     if (activeTab === "stores") {
       return /*#__PURE__*/_jsx(ZustandStoreBrowser, {
         stores: displayedStores,
         searchQuery: searchText,
-        onViewHistory: handleViewHistory,
         isLoading: storesLoading,
-        onStoreExpand: onStoreExpand
+        onOpenStore: handleOpenStore
       });
     }
 
@@ -436,6 +564,7 @@ export function ZustandModal({
     return /*#__PURE__*/_jsxs(_Fragment, {
       children: [!isEnabled && /*#__PURE__*/_jsxs(View, {
         style: styles.disabledBanner,
+        testID: `${ZUSTAND_TEST_ID}-banner-disabled`,
         children: [/*#__PURE__*/_jsx(Power, {
           size: 14,
           color: night.color.warning
@@ -447,11 +576,14 @@ export function ZustandModal({
         style: styles.lockedBanner,
         onPress: handleUpgradePress,
         activeOpacity: 0.8,
+        testID: `${ZUSTAND_TEST_ID}-locked`,
+        accessibilityRole: "button",
         children: [/*#__PURE__*/_jsx(Lock, {
           size: 14,
           color: night.color.accent
         }), /*#__PURE__*/_jsxs(Text, {
           style: styles.lockedText,
+          testID: `${ZUSTAND_TEST_ID}-locked-text`,
           children: [lockedChangeCount, " older", " ", lockedChangeCount === 1 ? "change" : "changes", " locked"]
         }), /*#__PURE__*/_jsx(View, {
           style: styles.upgradeBadge,
@@ -462,12 +594,13 @@ export function ZustandModal({
         })]
       }), visibleChanges.length > 0 ? /*#__PURE__*/_jsx(FlatList, {
         ref: flatListRef,
+        testID: `${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,
@@ -491,7 +624,15 @@ export 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__*/_jsx(View, {
     style: styles.container,
     children: renderContent()

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

@@ -91,47 +91,43 @@ function getPrimaryText(change) {
 // ({change, onPress} — onPress is a stable useCallback in the modal).
 export const ZustandStateChangeItem = /*#__PURE__*/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__*/_jsxs(View, {
-      style: styles.badgeContainer,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: [styles.badgeText, {
-          color: statusColor
-        }],
-        children: badgeText
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.slowBadge,
-        children: /*#__PURE__*/_jsx(Clock, {
-          size: 12,
-          color: buoyColors.error
-        })
-      })]
-    });
-  } else if (change.hasStateChange) {
-    customBadge = /*#__PURE__*/_jsxs(View, {
-      style: styles.badgeContainer,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: [styles.badgeText, {
-          color: statusColor
-        }],
-        children: badgeText
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.changeBadge,
-        children: /*#__PURE__*/_jsx(Zap, {
-          size: 12,
-          color: 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__*/_jsxs(View, {
+    style: styles.badgeContainer,
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: [styles.badgeText, {
+        color: statusColor
+      }],
+      testID: testID ? `${testID}-badge` : undefined,
+      children: badgeText
+    }), change.isSlowUpdate ? /*#__PURE__*/_jsx(View, {
+      style: styles.slowBadge,
+      testID: testID ? `${testID}-slow` : undefined,
+      children: /*#__PURE__*/_jsx(Clock, {
+        size: 12,
+        color: buoyColors.error
+      })
+    }) : change.hasStateChange ? /*#__PURE__*/_jsx(View, {
+      style: styles.changeBadge,
+      testID: testID ? `${testID}-change` : undefined,
+      children: /*#__PURE__*/_jsx(Zap, {
+        size: 12,
+        color: buoyColors.warning
+      })
+    }) : null]
+  });
   return /*#__PURE__*/_jsx(CompactRow, {
     statusDotColor: statusColor,
     statusLabel: statusLabel,
@@ -141,10 +137,13 @@ export const ZustandStateChangeItem = /*#__PURE__*/memo(function ZustandStateCha
       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 = StyleSheet.create({

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

@@ -19,6 +19,7 @@ import { ZustandDetailViewToggle } from "./ZustandDetailViewToggle";
 import { ZustandStateInfoView } from "./ZustandStateInfoView";
 import { DiffModeTabs, CompareBar } from "@buoy-gg/shared-ui";
 import { zustandStateStore } from "../utils/zustandStateStore";
+import { ZUSTAND_TEST_ID } from "../utils/testIDs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function getChangeColor(change) {
   return zustandStateStore.getStoreColor(change.storeName);
@@ -117,6 +118,7 @@ export function ZustandStateDetailContent({
     const parsed = parseValue(change.nextState);
     return /*#__PURE__*/_jsxs(View, {
       style: styles.contentCard,
+      testID: `${ZUSTAND_TEST_ID}-state-card`,
       children: [/*#__PURE__*/_jsxs(View, {
         style: styles.valueHeader,
         children: [/*#__PURE__*/_jsx(Text, {
@@ -138,6 +140,7 @@ export function ZustandStateDetailContent({
             style: styles.typeBadge,
             children: /*#__PURE__*/_jsx(Text, {
               style: styles.typeText,
+              testID: `${ZUSTAND_TEST_ID}-state-type`,
               children: stateType.toUpperCase()
             })
           })]
@@ -189,7 +192,14 @@ export function ZustandStateDetailContent({
   const handleFooterNext = 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__*/_jsxs(View, {
     style: styles.container,
     children: [/*#__PURE__*/_jsx(ZustandDetailViewToggle, {
@@ -197,7 +207,7 @@ export function ZustandStateDetailContent({
       onViewChange: setActiveView,
       diffDisabled: diffDisabled
     }), /*#__PURE__*/_jsxs(View, {
-      style: styles.contentArea,
+      style: [styles.contentArea, showInternalFooter && styles.contentAreaFooterPad],
       children: [activeView === "change" && /*#__PURE__*/_jsx(ZustandStateInfoView, {
         change: change
       }), activeView === "state" && /*#__PURE__*/_jsx(View, {
@@ -205,19 +215,22 @@ export function ZustandStateDetailContent({
         children: renderStateView()
       }), activeView === "diff" && /*#__PURE__*/_jsxs(View, {
         style: styles.diffContainer,
+        testID: `${ZUSTAND_TEST_ID}-diff`,
         children: [/*#__PURE__*/_jsx(DiffModeTabs, {
           tabs: DIFF_MODE_TABS,
           activeTab: diffMode,
-          onTabChange: setDiffMode
+          onTabChange: setDiffMode,
+          testIDPrefix: `${ZUSTAND_TEST_ID}-diff-tab`
         }), /*#__PURE__*/_jsx(CompareBar, {
           leftEvent: leftEvent,
           rightEvent: rightEvent
         }), /*#__PURE__*/_jsx(View, {
           style: styles.diffContent,
+          testID: `${ZUSTAND_TEST_ID}-diff-content`,
           children: renderDiffContent()
         })]
       })]
-    }), !disableInternalFooter && totalChanges > 1 && /*#__PURE__*/_jsx(EventStepperFooter, {
+    }), showInternalFooter && /*#__PURE__*/_jsx(EventStepperFooter, {
       currentIndex: chronologicalNumber - 1,
       totalItems: totalChanges,
       onPrevious: handleFooterPrevious,
@@ -257,7 +270,11 @@ const styles = 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: {