@buoy-gg/zustand 7.0.32 → 7.0.34

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

@@ -26,33 +26,32 @@ var _jsxRuntime = require("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.
+ * The change log's "nothing here". Everything but the nouns is the shared
+ * precedence — see `ToolEmptyState` in shared-ui for why it lives there.
  */
-const CLIP_OFFSCREEN_CELLS = !(typeof process !== "undefined" && process.env?.EXPO_PUBLIC_E2E);
 function EventsEmptyState({
-  isEnabled
+  isEnabled,
+  searchText,
+  totalChanges
 }) {
-  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"
-    })]
+  const content = (0, _sharedUi.resolveListEmptyState)({
+    subject: "changes",
+    search: searchText,
+    total: totalChanges,
+    capturing: isEnabled,
+    waiting: {
+      otto: "waiting",
+      title: "No state changes",
+      message: "State changes will appear here as stores update."
+    },
+    paused: {
+      title: "No state changes",
+      message: "Enable capture to start recording state changes"
+    }
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolEmptyState, {
+    ...content,
+    testID: `${_testIDs.ZUSTAND_TEST_ID}-empty`
   });
 }
 function ZustandModal({
@@ -82,6 +81,7 @@ function ZustandModal({
   const [showFilters, setShowFilters] = (0, _react.useState)(false);
   const [ignoredPatterns, setIgnoredPatterns] = (0, _react.useState)(new Set());
   const {
+    stateChanges,
     filteredChanges,
     filter,
     setFilter,
@@ -104,6 +104,16 @@ function ZustandModal({
     return stores.filter(s => !Array.from(ignoredPatterns).some(p => s.name.toLowerCase().includes(p.toLowerCase())));
   }, [stores, ignoredPatterns]);
 
+  /**
+   * How many changes this store has captured, before the search — the
+   * denominator the scoped empty state needs so "clear the search" is only
+   * offered when clearing it would actually show something.
+   */
+  const scopedTotalForStore = (0, _react.useMemo)(() => {
+    if (!selectedHistoryStore) return 0;
+    return stateChanges.filter(c => c.storeName === selectedHistoryStore).length;
+  }, [stateChanges, selectedHistoryStore]);
+
   // 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
@@ -369,49 +379,24 @@ function ZustandModal({
         onBack: onBack
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
         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: () => 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"
-          }), /*#__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
-            })
-          })]
+        children: isSearchActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Search, {
+          value: searchText,
+          onChangeText: handleSearch,
+          onCancel: closeSearch,
+          placeholder: activeTab === "stores" ? "Search stores..." : "Search events...",
+          accessibilityLabel: "Search Zustand stores and events",
+          iconSize: 14,
+          testID: `${_testIDs.ZUSTAND_TEST_ID}-search-field`,
+          containerTestID: `${_testIDs.ZUSTAND_TEST_ID}-search`,
+          clearTestID: `${_testIDs.ZUSTAND_TEST_ID}-search-clear`
+          // Stay open while the query is still narrowing the list: the
+          // header would otherwise go back to its TABS — whose counts are
+          // of the WHOLE capture — above a filtered list, with nothing to
+          // explain the gap.
+          ,
+          onBlur: () => {
+            if (searchText.length === 0) setIsSearchActive(false);
+          }
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TabSelector, {
           tabs: [{
             key: "stores",
@@ -506,24 +491,25 @@ function ZustandModal({
         keyExtractor: keyExtractor,
         contentContainerStyle: styles.listContent,
         showsVerticalScrollIndicator: true,
-        removeClippedSubviews: CLIP_OFFSCREEN_CELLS,
-        initialNumToRender: 12,
-        maxToRenderPerBatch: 8,
-        windowSize: 5,
-        updateCellsBatchingPeriod: 50
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.emptyState,
+        ..._sharedUi.EVENT_LIST_PRESET
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolEmptyState, {
         testID: `${_testIDs.ZUSTAND_TEST_ID}-history-empty`,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Box, {
-          size: 32,
-          color: _sharedUi.night.color.textTertiary
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.emptyTitle,
-          children: "No history yet"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-          style: styles.emptyText,
-          children: ["State changes for ", selectedHistoryStore, " will appear here."]
-        })]
+        ...(0, _sharedUi.resolveListEmptyState)({
+          subject: "changes",
+          search: searchText,
+          // Scoped to one store, so the count is this store's, not the log's.
+          total: searchText.trim() ? scopedTotalForStore : 0,
+          capturing: isEnabled,
+          waiting: {
+            otto: "waiting",
+            title: "No history yet",
+            message: `State changes for ${selectedHistoryStore} will appear here.`
+          },
+          paused: {
+            title: "No history yet",
+            message: `Capture is off, so nothing is being recorded for ${selectedHistoryStore}.`
+          }
+        })
       });
     }
 
@@ -539,19 +525,15 @@ function ZustandModal({
       /*#__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."]
-        })]
+      (0, _jsxRuntime.jsx)(_sharedUi.ToolEmptyState, {
+        testID: `${_testIDs.ZUSTAND_TEST_ID}-store-detail-gone`
+        // ghost = "stale or detached: an unmounted component, an old
+        // snapshot" — exactly what the store you are looking at has become.
+        // No other tool has this cause, so it skips the resolver.
+        ,
+        otto: "ghost",
+        title: "Store no longer registered",
+        message: `${selectedStoreName} is not in the registry any more.`
       });
     }
 
@@ -605,13 +587,11 @@ function ZustandModal({
         keyExtractor: keyExtractor,
         contentContainerStyle: styles.listContent,
         showsVerticalScrollIndicator: true,
-        removeClippedSubviews: CLIP_OFFSCREEN_CELLS,
-        initialNumToRender: 12,
-        maxToRenderPerBatch: 8,
-        windowSize: 5,
-        updateCellsBatchingPeriod: 50
+        ..._sharedUi.EVENT_LIST_PRESET
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(EventsEmptyState, {
-        isEnabled: isEnabled
+        isEnabled: isEnabled,
+        searchText: searchText,
+        totalChanges: stats.totalChanges
       })]
     });
   };
@@ -720,27 +700,6 @@ const styles = _reactNative.StyleSheet.create({
     // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
     backgroundColor: "transparent"
   },
-  headerSearchContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: _sharedUi.night.color.surfaceElevated,
-    borderRadius: _sharedUi.night.radius.row,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.border,
-    paddingHorizontal: 12,
-    paddingVertical: 5
-  },
-  headerSearchInput: {
-    flex: 1,
-    color: _sharedUi.night.color.text,
-    fontSize: 13,
-    marginLeft: 6,
-    paddingVertical: 2
-  },
-  headerSearchClear: {
-    marginLeft: 6,
-    padding: 4
-  },
   headerActionButton: {
     width: 32,
     height: 32,
@@ -779,23 +738,6 @@ const styles = _reactNative.StyleSheet.create({
     paddingTop: 8,
     paddingBottom: 20
   },
-  emptyState: {
-    alignItems: "center",
-    paddingVertical: 40
-  },
-  emptyTitle: {
-    color: _sharedUi.night.color.text,
-    fontSize: 14,
-    fontWeight: "600",
-    marginTop: 12,
-    marginBottom: 6
-  },
-  emptyText: {
-    color: _sharedUi.night.color.textTertiary,
-    fontSize: 12,
-    textAlign: "center",
-    lineHeight: 18
-  },
   lockedBanner: {
     flexDirection: "row",
     alignItems: "center",

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

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ZustandStateChangeItem = void 0;
 var _react = require("react");
-var _reactNative = require("react-native");
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _zustandStateStore = require("../utils/zustandStateStore");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -103,68 +102,16 @@ const ZustandStateChangeItem = exports.ZustandStateChangeItem = /*#__PURE__*/(0,
   const sublabel = getSublabel(change);
   const primaryText = getPrimaryText(change);
   const badgeText = getBadgeText(change);
-
-  // 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,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChangeRow, {
+    statusColor: statusColor,
     statusLabel: statusLabel,
-    statusSublabel: sublabel,
+    sublabel: sublabel,
     primaryText: primaryText,
-    bottomRightText: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.RelativeTime, {
-      timestamp: change.timestamp
-    }),
-    customBadge: customBadge,
-    badgeColor: statusColor,
-    showChevron: true,
+    timestamp: change.timestamp,
+    badgeText: badgeText,
+    changed: change.hasStateChange,
+    slow: change.isSlowUpdate,
     onPress: () => onPress(change),
-    testID: testID,
-    statusTestID: testID ? `${testID}-status` : undefined,
-    statusSublabelTestID: testID ? `${testID}-sublabel` : undefined,
-    primaryTestID: testID ? `${testID}-keys` : undefined
+    testID: testID
   });
-});
-const styles = _reactNative.StyleSheet.create({
-  badgeContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4
-  },
-  badgeText: {
-    fontSize: 11,
-    fontWeight: "600",
-    fontFamily: "monospace"
-  },
-  changeBadge: {
-    paddingHorizontal: 4
-  },
-  slowBadge: {
-    paddingHorizontal: 4
-  }
 });

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

@@ -79,29 +79,6 @@ function SectionHeader({
     }), badge]
   });
 }
-function InfoRow({
-  label,
-  value,
-  valueColor,
-  mono = false,
-  testID
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.infoRow,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: styles.infoLabel,
-      children: label
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      testID: testID,
-      style: [styles.infoValue, mono && styles.infoValueMono, valueColor ? {
-        color: valueColor
-      } : undefined],
-      numberOfLines: 1,
-      ellipsizeMode: "middle",
-      children: value
-    })]
-  });
-}
 function formatTime(timestamp) {
   const date = new Date(timestamp);
   const hours = date.getHours().toString().padStart(2, "0");
@@ -157,13 +134,13 @@ const ZustandStateInfoView = exports.ZustandStateInfoView = /*#__PURE__*/(0, _re
         title: "CHANGE INFO"
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.cardContent,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.InfoRow, {
           label: "Store",
           value: change.storeName,
           mono: true,
           valueColor: storeColor,
           testID: `${_testIDs.ZUSTAND_TEST_ID}-info-store`
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.InfoRow, {
           label: "Time",
           value: formatTime(change.timestamp),
           mono: true,
@@ -366,27 +343,6 @@ const styles = _reactNative.StyleSheet.create({
     padding: 14,
     gap: 10
   },
-  infoRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between"
-  },
-  infoLabel: {
-    fontSize: 11,
-    color: _sharedUi.night.color.textTertiary,
-    fontWeight: "500"
-  },
-  infoValue: {
-    fontSize: 11,
-    color: _sharedUi.night.color.text,
-    fontWeight: "500",
-    flex: 1,
-    textAlign: "right",
-    marginLeft: 12
-  },
-  infoValueMono: {
-    fontFamily: "monospace"
-  },
   badgeRow: {
     flexDirection: "row",
     flexWrap: "wrap",

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

@@ -44,36 +44,26 @@ function getKeysPreview(store) {
   }
 }
 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
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: styles.emptyTitle,
-      children: "Loading stores\u2026"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: styles.emptyText,
-      children: "Waiting for the device to send its registered stores."
-    })]
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolEmptyState, {
+    testID: `${_testIDs.ZUSTAND_TEST_ID}-stores-loading`
+    // Replaces the spinner rather than joining it: two animated things
+    // stacked is clutter, and `loading` IS the indeterminate spinner in
+    // mascot form.
+    ,
+    otto: "loading",
+    title: "Loading stores\u2026",
+    message: "Waiting for the device to send its registered stores."
   });
 }
 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,
-      children: "Use watchStores() to register your Zustand stores.\nThey will appear here with their current state."
-    })]
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolEmptyState, {
+    testID: `${_testIDs.ZUSTAND_TEST_ID}-stores-empty`
+    // scanning = "scanning for targets… and finding none". The registry is
+    // discovered, not configured, so an empty one is a scan result.
+    ,
+    otto: "scanning",
+    title: "No stores registered",
+    message: "Use watchStores() to register your Zustand stores.\nThey will appear here with their current state."
   });
 }
 function ZustandStoreBrowser({
@@ -92,17 +82,19 @@ function ZustandStoreBrowser({
     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,
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolEmptyState, {
       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,
-        children: ["No stores match \"", searchQuery, "\""]
-      })]
+      ...(0, _sharedUi.resolveListEmptyState)({
+        subject: "stores",
+        verb: "registered",
+        search: searchQuery,
+        total: stores.length,
+        waiting: {
+          otto: "scanning",
+          title: "No stores registered",
+          message: "Use watchStores() to register your Zustand stores."
+        }
+      })
     });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
@@ -208,22 +200,5 @@ const styles = _reactNative.StyleSheet.create({
     fontWeight: "700",
     color: _sharedUi.night.color.accent,
     fontFamily: "monospace"
-  },
-  emptyState: {
-    alignItems: "center",
-    paddingVertical: 40
-  },
-  emptyTitle: {
-    color: _sharedUi.night.color.text,
-    fontSize: 14,
-    fontWeight: "600",
-    marginTop: 12,
-    marginBottom: 6
-  },
-  emptyText: {
-    color: _sharedUi.night.color.textTertiary,
-    fontSize: 12,
-    textAlign: "center",
-    lineHeight: 18
   }
 });