@buoy-gg/zustand 7.0.32 → 7.0.34

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

@@ -7,10 +7,9 @@
  */
 
 import { memo } from "react";
-import { View, Text, StyleSheet } from "react-native";
-import { CompactRow, buoyColors, night, Zap, Clock, RelativeTime } from "@buoy-gg/shared-ui";
+import { ChangeRow, buoyColors, night } from "@buoy-gg/shared-ui";
 import { zustandStateStore } from "../utils/zustandStateStore";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Get status label based on category
  */
@@ -99,68 +98,16 @@ export const ZustandStateChangeItem = /*#__PURE__*/memo(function ZustandStateCha
   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__*/_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,
+  return /*#__PURE__*/_jsx(ChangeRow, {
+    statusColor: statusColor,
     statusLabel: statusLabel,
-    statusSublabel: sublabel,
+    sublabel: sublabel,
     primaryText: primaryText,
-    bottomRightText: /*#__PURE__*/_jsx(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 = StyleSheet.create({
-  badgeContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4
-  },
-  badgeText: {
-    fontSize: 11,
-    fontWeight: "600",
-    fontFamily: "monospace"
-  },
-  changeBadge: {
-    paddingHorizontal: 4
-  },
-  slowBadge: {
-    paddingHorizontal: 4
-  }
 });

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

@@ -13,7 +13,7 @@
 
 import React, { memo, useCallback, useState, useEffect } from "react";
 import { View, Text, StyleSheet, ScrollView } from "react-native";
-import { buoyColors, night, Clock, AlertTriangle, Zap, Info, Box, Database, parseValue, ProUpgradeModal, copyToClipboard } from "@buoy-gg/shared-ui";
+import { buoyColors, night, Clock, AlertTriangle, Zap, Info, Box, Database, parseValue, ProUpgradeModal, copyToClipboard, InfoRow } from "@buoy-gg/shared-ui";
 import { useIsPro } from "@buoy-gg/license";
 import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
 import { ZustandActionButton } from "./ZustandActionButton";
@@ -74,29 +74,6 @@ function SectionHeader({
     }), badge]
   });
 }
-function InfoRow({
-  label,
-  value,
-  valueColor,
-  mono = false,
-  testID
-}) {
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.infoRow,
-    children: [/*#__PURE__*/_jsx(Text, {
-      style: styles.infoLabel,
-      children: label
-    }), /*#__PURE__*/_jsx(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");
@@ -361,27 +338,6 @@ const styles = StyleSheet.create({
     padding: 14,
     gap: 10
   },
-  infoRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between"
-  },
-  infoLabel: {
-    fontSize: 11,
-    color: night.color.textTertiary,
-    fontWeight: "500"
-  },
-  infoValue: {
-    fontSize: 11,
-    color: night.color.text,
-    fontWeight: "500",
-    flex: 1,
-    textAlign: "right",
-    marginLeft: 12
-  },
-  infoValueMono: {
-    fontFamily: "monospace"
-  },
   badgeRow: {
     flexDirection: "row",
     flexWrap: "wrap",

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

@@ -10,8 +10,8 @@
  */
 
 import { useMemo } from "react";
-import { View, Text, StyleSheet, ScrollView, ActivityIndicator } from "react-native";
-import { CompactRow, night, Box } from "@buoy-gg/shared-ui";
+import { View, Text, StyleSheet, ScrollView } from "react-native";
+import { CompactRow, night, ToolEmptyState, resolveListEmptyState } from "@buoy-gg/shared-ui";
 import { zustandStateStore } from "../utils/zustandStateStore";
 import { ZUSTAND_TEST_ID, storeRowTestID } from "../utils/testIDs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -40,36 +40,26 @@ function getKeysPreview(store) {
   }
 }
 function LoadingBrowserState() {
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.emptyState,
-    testID: `${ZUSTAND_TEST_ID}-stores-loading`,
-    children: [/*#__PURE__*/_jsx(ActivityIndicator, {
-      size: "small",
-      color: night.color.textTertiary
-    }), /*#__PURE__*/_jsx(Text, {
-      style: styles.emptyTitle,
-      children: "Loading stores\u2026"
-    }), /*#__PURE__*/_jsx(Text, {
-      style: styles.emptyText,
-      children: "Waiting for the device to send its registered stores."
-    })]
+  return /*#__PURE__*/_jsx(ToolEmptyState, {
+    testID: `${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__*/_jsxs(View, {
-    style: styles.emptyState,
-    testID: `${ZUSTAND_TEST_ID}-stores-empty`,
-    children: [/*#__PURE__*/_jsx(Box, {
-      size: 32,
-      color: night.color.textTertiary
-    }), /*#__PURE__*/_jsx(Text, {
-      style: styles.emptyTitle,
-      testID: `${ZUSTAND_TEST_ID}-stores-empty-title`,
-      children: "No stores registered"
-    }), /*#__PURE__*/_jsx(Text, {
-      style: styles.emptyText,
-      children: "Use watchStores() to register your Zustand stores.\nThey will appear here with their current state."
-    })]
+  return /*#__PURE__*/_jsx(ToolEmptyState, {
+    testID: `${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."
   });
 }
 export function ZustandStoreBrowser({
@@ -88,17 +78,19 @@ export function ZustandStoreBrowser({
     return isLoading ? /*#__PURE__*/_jsx(LoadingBrowserState, {}) : /*#__PURE__*/_jsx(EmptyBrowserState, {});
   }
   if (filteredStores.length === 0 && searchQuery) {
-    return /*#__PURE__*/_jsxs(View, {
-      style: styles.emptyState,
+    return /*#__PURE__*/_jsx(ToolEmptyState, {
       testID: `${ZUSTAND_TEST_ID}-stores-no-match`,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.emptyTitle,
-        testID: `${ZUSTAND_TEST_ID}-stores-no-match-title`,
-        children: "No matching stores"
-      }), /*#__PURE__*/_jsxs(Text, {
-        style: styles.emptyText,
-        children: ["No stores match \"", searchQuery, "\""]
-      })]
+      ...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__*/_jsxs(ScrollView, {
@@ -204,22 +196,5 @@ const styles = StyleSheet.create({
     fontWeight: "700",
     color: night.color.accent,
     fontFamily: "monospace"
-  },
-  emptyState: {
-    alignItems: "center",
-    paddingVertical: 40
-  },
-  emptyTitle: {
-    color: night.color.text,
-    fontSize: 14,
-    fontWeight: "600",
-    marginTop: 12,
-    marginBottom: 6
-  },
-  emptyText: {
-    color: night.color.textTertiary,
-    fontSize: 12,
-    textAlign: "center",
-    lineHeight: 18
   }
 });

package/lib/module/zustand/hooks/useZustandStateChanges.js

@@ -3,51 +3,39 @@
 /**
  * Hook for consuming Zustand state changes from the store
  *
- * Mirrors useReduxActions.ts from @buoy-gg/redux
+ * The subscribe / filter / pause / clear plumbing is shared `useChangeLog`;
+ * this file owns the zustand-specific filter, stats and store registry.
  */
 
-import { useState, useEffect, useMemo, useCallback } from "react";
+import { useCallback, useMemo } from "react";
+import { useChangeLog, useSubscribedValue } from "@buoy-gg/shared-ui";
 import { zustandStateStore } from "../utils/zustandStateStore";
+function filterChanges(changes, filter) {
+  let filtered = changes;
+  if (filter.searchText) {
+    const search = filter.searchText.toLowerCase();
+    filtered = filtered.filter(c => c.storeName.toLowerCase().includes(search) || c.partialPreview.toLowerCase().includes(search) || c.changedKeys.some(k => k.toLowerCase().includes(search)));
+  }
+  if (filter.storeNames && filter.storeNames.length > 0) {
+    filtered = filtered.filter(c => filter.storeNames.includes(c.storeName));
+  }
+  if (filter.onlyWithChanges) {
+    filtered = filtered.filter(c => c.hasStateChange);
+  }
+  return filtered;
+}
+const readStores = () => zustandStateStore.getStores();
+const subscribeToStores = listener => zustandStateStore.subscribeToStores(listener);
 export function useZustandStateChanges() {
-  const [stateChanges, setStateChanges] = useState(() => zustandStateStore.getStateChanges());
-  const [stores, setStores] = useState(() => zustandStateStore.getStores());
-  const [filter, setFilter] = useState({});
-  const [isEnabled, setIsEnabled] = useState(() => zustandStateStore.getEnabled());
-
-  // Subscribe to state changes
-  useEffect(() => {
-    const unsubChanges = zustandStateStore.subscribe(newChanges => {
-      setStateChanges(newChanges);
-    });
-    const unsubStores = zustandStateStore.subscribeToStores(newStores => {
-      setStores(newStores);
-    });
-    return () => {
-      unsubChanges();
-      unsubStores();
-    };
-  }, []);
-
-  // Filter state changes — derive directly from state to avoid stale reads
-  const filteredChanges = useMemo(() => {
-    let filtered = stateChanges;
-    if (filter.searchText) {
-      const search = filter.searchText.toLowerCase();
-      filtered = filtered.filter(c => c.storeName.toLowerCase().includes(search) || c.partialPreview.toLowerCase().includes(search) || c.changedKeys.some(k => k.toLowerCase().includes(search)));
-    }
-    if (filter.storeNames && filter.storeNames.length > 0) {
-      filtered = filtered.filter(c => filter.storeNames.includes(c.storeName));
-    }
-    if (filter.onlyWithChanges) {
-      filtered = filtered.filter(c => c.hasStateChange);
-    }
-    return filtered;
-  }, [stateChanges, filter]);
+  const log = useChangeLog(zustandStateStore, {
+    filterItems: filterChanges
+  });
+  const stores = useSubscribedValue(readStores, subscribeToStores);
 
   // Get stats — derive directly from state
   const stats = useMemo(() => {
-    const total = stateChanges.length;
-    const withChanges = stateChanges.filter(c => c.hasStateChange).length;
+    const total = log.items.length;
+    const withChanges = log.items.filter(c => c.hasStateChange).length;
     return {
       totalChanges: total,
       changesWithStateChange: withChanges,
@@ -55,33 +43,25 @@ export function useZustandStateChanges() {
       storeCount: stores.length,
       averageDuration: 0
     };
-  }, [stateChanges, stores]);
+  }, [log.items, stores]);
 
   // Get unique store names
   const storeNames = useMemo(() => {
     return zustandStateStore.getUniqueStoreNames();
   }, [stores]);
-  const clearChanges = useCallback(() => {
-    zustandStateStore.clearStateChanges();
-  }, []);
-  const toggleCapture = useCallback(() => {
-    const newEnabled = !isEnabled;
-    zustandStateStore.setEnabled(newEnabled);
-    setIsEnabled(newEnabled);
-  }, [isEnabled]);
   const getChangeById = useCallback(id => {
     return zustandStateStore.getStateChangeById(id);
   }, []);
   return {
-    stateChanges,
-    filteredChanges,
-    filter,
-    setFilter,
+    stateChanges: log.items,
+    filteredChanges: log.filteredItems,
+    filter: log.filter,
+    setFilter: log.setFilter,
     stats,
     stores,
-    clearChanges,
-    isEnabled,
-    toggleCapture,
+    clearChanges: log.clear,
+    isEnabled: log.isEnabled,
+    toggleCapture: log.toggleCapture,
     storeNames,
     getChangeById
   };

package/lib/module/zustand/sync/zustandSyncAdapter.js

@@ -1,25 +1,17 @@
 "use strict";
 
 import { zustandStateStore } from "../utils/zustandStateStore";
-import { isJsonSerializable, isOverWireBudget } from "@buoy-gg/shared-ui";
+import { WIRE_DETAIL_LIMIT_BYTES, createSyncAdapter, detailByIdAction, isJsonSerializable, isOverWireBudget, memoByIdentity, onDeviceMarker, readParams, toWire, truncatedNote } from "@buoy-gg/shared-ui";
 
 /**
  * Sentinel used in WIRE-FORM snapshots in place of raw prevState/nextState.
  * Same hazard as redux: up to 200 changes × 2 full trees on every snapshot
  * freeze/OOM-killed large apps. Dashboards fetch trees via `getChangeDetail`.
  */
-export const STATE_ON_DEVICE = Object.freeze({
-  __buoyStateOnDevice: true,
-  note: "State trees stay on the device — fetched on demand via getChangeDetail / getStoreState."
-});
+export const STATE_ON_DEVICE = onDeviceMarker("State", "State trees stay on the device — fetched on demand via getChangeDetail / getStoreState.");
 
 /** Wire-form sentinel for an oversized `partial` (replace can carry a whole tree). */
-export const PAYLOAD_ON_DEVICE = Object.freeze({
-  __buoyPayloadOnDevice: true,
-  note: "Partial stays on the device — fetched on demand via getChangeDetail."
-});
-const MAX_CHANGE_DETAIL_BYTES = 8 * 1024 * 1024;
-const MAX_WIRE_PAYLOAD_BYTES = 16 * 1024;
+export const PAYLOAD_ON_DEVICE = onDeviceMarker("Payload", "Partial stays on the device — fetched on demand via getChangeDetail.");
 /** Top-level keys of an object state, for the compact (no-values) view. */
 function topLevelKeys(state) {
   return state && typeof state === "object" && !Array.isArray(state) ? Object.keys(state) : undefined;
@@ -30,31 +22,17 @@ function topLevelKeys(state) {
  * change, so keying on identity is correct and self-invalidating — without it
  * every `partial` in the list is re-measured on all ~5 snapshots per second.
  */
-const changeCache = new WeakMap();
-function toWireChange(change) {
-  const cached = changeCache.get(change);
-  if (cached) return cached;
-  const wire = {
-    ...change,
-    prevState: STATE_ON_DEVICE,
-    nextState: STATE_ON_DEVICE,
-    partial: toWirePartial(change.partial)
-  };
-  changeCache.set(change, wire);
-  return wire;
-}
-function toWirePartial(value) {
-  if (value === undefined) return value;
-  return isOverWireBudget(value, MAX_WIRE_PAYLOAD_BYTES) ? PAYLOAD_ON_DEVICE : value;
-}
-function toWireState(value) {
-  return isOverWireBudget(value, MAX_WIRE_PAYLOAD_BYTES) ? STATE_ON_DEVICE : value;
-}
+const toWireChange = memoByIdentity(change => ({
+  ...change,
+  prevState: STATE_ON_DEVICE,
+  nextState: STATE_ON_DEVICE,
+  partial: toWire(change.partial, PAYLOAD_ON_DEVICE)
+}));
+const toWireState = value => toWire(value, STATE_ON_DEVICE);
 
 /**
  * Sync adapter for the zustand tool, consumed by @buoy-gg/external-sync's
- * `useExternalSync` (structurally matches its ToolSyncAdapter interface so
- * this package doesn't need a dependency on it).
+ * `useExternalSync`.
  *
  * State changes are captured by the middleware (watchStores/buoyDevTools),
  * independent of whether a dashboard is watching — subscribing here only
@@ -69,7 +47,7 @@ function toWireState(value) {
  *
  * The `setState` action powers remote time-travel/reset from the dashboard.
  */
-export const zustandSyncAdapter = {
+export const zustandSyncAdapter = createSyncAdapter({
   version: 2,
   getSnapshot: () => ({
     changes: zustandStateStore.getStateChanges().map(toWireChange),
@@ -78,14 +56,7 @@ export const zustandSyncAdapter = {
       currentState: toWireState(store.currentState)
     }))
   }),
-  subscribe: onChange => {
-    const unsubscribeChanges = zustandStateStore.subscribe(onChange);
-    const unsubscribeStores = zustandStateStore.subscribeToStores(onChange);
-    return () => {
-      unsubscribeChanges();
-      unsubscribeStores();
-    };
-  },
+  subscribe: [onChange => zustandStateStore.subscribe(onChange), onChange => zustandStateStore.subscribeToStores(onChange)],
   actions: {
     clearEvents: () => {
       zustandStateStore.clearStateChanges();
@@ -95,32 +66,11 @@ export const zustandSyncAdapter = {
      * The per-snapshot stream stays tree-free; this is the explicit,
      * size-guarded channel for the detail pane.
      */
-    getChangeDetail: params => {
-      const {
-        id
-      } = params ?? {};
-      if (!id) return {
-        found: false,
-        reason: "missing id"
-      };
-      const change = zustandStateStore.getStateChangeById(id);
-      if (!change) return {
-        found: false,
-        reason: "unknown id"
-      };
-      const cappedNote = {
-        __buoyTruncated: true,
-        note: `Exceeds the ${MAX_CHANGE_DETAIL_BYTES / (1024 * 1024)}MB detail limit — inspect it on-device.`
-      };
-      const cap = value => isOverWireBudget(value, MAX_CHANGE_DETAIL_BYTES) ? cappedNote : value;
-      return {
-        found: true,
-        id,
-        prevState: cap(change.prevState),
-        nextState: cap(change.nextState),
-        partial: cap(change.partial)
-      };
-    },
+    getChangeDetail: detailByIdAction(id => zustandStateStore.getStateChangeById(id), (change, cap) => ({
+      prevState: cap(change.prevState),
+      nextState: cap(change.nextState),
+      partial: cap(change.partial)
+    })),
     /**
      * On-demand current state for one store. Wire-form snapshots replace
      * oversized / unserializable `currentState` with STATE_ON_DEVICE.
@@ -128,7 +78,7 @@ export const zustandSyncAdapter = {
     getStoreState: params => {
       const {
         storeName
-      } = params ?? {};
+      } = readParams(params);
       if (!storeName) return {
         found: false,
         reason: "missing storeName"
@@ -144,11 +94,7 @@ export const zustandSyncAdapter = {
       } catch {
         currentState = undefined;
       }
-      const cappedNote = {
-        __buoyTruncated: true,
-        note: `Exceeds the ${MAX_CHANGE_DETAIL_BYTES / (1024 * 1024)}MB detail limit — inspect it on-device.`
-      };
-      if (!isOverWireBudget(currentState, MAX_CHANGE_DETAIL_BYTES)) {
+      if (!isOverWireBudget(currentState, WIRE_DETAIL_LIMIT_BYTES)) {
         return {
           found: true,
           storeName,
@@ -158,7 +104,7 @@ export const zustandSyncAdapter = {
       return {
         found: true,
         storeName,
-        currentState: isJsonSerializable(currentState) ? cappedNote : STATE_ON_DEVICE
+        currentState: isJsonSerializable(currentState) ? truncatedNote(WIRE_DETAIL_LIMIT_BYTES) : STATE_ON_DEVICE
       };
     },
     /**
@@ -171,7 +117,7 @@ export const zustandSyncAdapter = {
       const {
         includeValues = false,
         limit
-      } = params ?? {};
+      } = readParams(params);
       const all = zustandStateStore.getStoreSnapshots();
       const capped = typeof limit === "number" && limit > 0 ? all.slice(0, limit) : all;
       const stores = capped.map(s => ({
@@ -198,7 +144,7 @@ export const zustandSyncAdapter = {
         storeName,
         state,
         replace
-      } = params ?? {};
+      } = readParams(params);
       if (!storeName) return {
         ok: false,
         error: "Missing storeName."
@@ -237,7 +183,7 @@ export const zustandSyncAdapter = {
     rehydrate: async params => {
       const {
         storeName
-      } = params ?? {};
+      } = readParams(params);
       if (!storeName) return {
         ok: false,
         error: "Missing storeName."
@@ -267,4 +213,4 @@ export const zustandSyncAdapter = {
       };
     }
   }
-};
+});