@buoy-gg/zustand 7.0.33 → 7.0.34

package/lib/commonjs/zustand/utils/zustandStateStore.js

@@ -4,10 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.zustandStateStore = void 0;
+var _sharedUi = require("@buoy-gg/shared-ui");
 /**
  * Zustand state store - captures and stores Zustand state changes
  *
- * Mirrors the architecture of reduxActionStore.ts from @buoy-gg/redux
+ * The generic event-log half (ring buffer, listeners, clear-forwarding for
+ * the desktop mirror, pause/suppress flags, hydrate-by-id) is the shared
+ * `ChangeLog`; this file owns the zustand-specific half — the store registry,
+ * snapshots, mirror rebuild, filters and stats.
  */
 
 // ============================================
@@ -40,168 +44,33 @@ const STORE_COLORS = {
  * Get consistent color for a store based on its name
  */
 function getStoreColor(storeName) {
-  const lowerName = storeName.toLowerCase();
-
-  // Check for exact match
-  if (STORE_COLORS[lowerName]) {
-    return STORE_COLORS[lowerName];
-  }
-
-  // Check for partial matches
-  for (const [key, color] of Object.entries(STORE_COLORS)) {
-    if (lowerName.includes(key)) {
-      return color;
-    }
-  }
-
-  // Generate consistent hex color from name hash
-  const hash = storeName.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0);
-  const hue = hash * 137 % 360;
-  // Convert HSL to hex so "color + alpha_hex" pattern works everywhere
-  const s = 0.7;
-  const l = 0.6;
-  const c = (1 - Math.abs(2 * l - 1)) * s;
-  const x = c * (1 - Math.abs(hue / 60 % 2 - 1));
-  const m = l - c / 2;
-  let r = 0,
-    g = 0,
-    b = 0;
-  if (hue < 60) {
-    r = c;
-    g = x;
-  } else if (hue < 120) {
-    r = x;
-    g = c;
-  } else if (hue < 180) {
-    g = c;
-    b = x;
-  } else if (hue < 240) {
-    g = x;
-    b = c;
-  } else if (hue < 300) {
-    r = x;
-    b = c;
-  } else {
-    r = c;
-    b = x;
-  }
-  const toHex = v => Math.round((v + m) * 255).toString(16).padStart(2, "0");
-  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+  return (0, _sharedUi.entityColor)(storeName, STORE_COLORS);
 }
 
-// ============================================
-// Helper Functions
-// ============================================
-
 /**
  * Format payload preview for display
  */
 function formatPartialPreview(partial, maxLength = 40) {
-  if (partial === undefined) return "";
-  if (partial === null) return "null";
-  try {
-    if (typeof partial === "function") {
-      return "(updater fn)";
-    }
-    if (typeof partial === "string") {
-      return partial.length > maxLength ? `"${partial.slice(0, maxLength - 3)}..."` : `"${partial}"`;
-    }
-    if (typeof partial === "number" || typeof partial === "boolean") {
-      return String(partial);
-    }
-    if (Array.isArray(partial)) {
-      if (partial.length === 0) return "[]";
-      const preview = JSON.stringify(partial);
-      return preview.length > maxLength ? `[${partial.length} items]` : preview;
-    }
-    if (typeof partial === "object") {
-      const keys = Object.keys(partial);
-      if (keys.length === 0) return "{}";
-      const preview = JSON.stringify(partial);
-      if (preview.length <= maxLength) return preview;
-      return `{ ${keys.length} keys }`;
-    }
-    return String(partial).slice(0, maxLength);
-  } catch {
-    return "[complex]";
-  }
-}
-
-/**
- * Calculate state diff summary.
- *
- * `changedCount` counts the keys in `changedKeys` and nothing else. The two
- * used to disagree: a state object that was REPLACED without any top-level
- * value moving — which is exactly what zustand's persist middleware does when
- * it rehydrates — reported one changed key and named none, so the row said
- * "1 key changed" and the detail page it opened drew no CHANGED KEYS card at
- * all. `summary` is where a change with no nameable keys is described.
- */
-function getStateDiffSummary(prevState, nextState) {
-  if (prevState === nextState) {
-    return {
-      summary: "no change",
-      changedKeys: [],
-      changedCount: 0
-    };
-  }
-  if (typeof prevState !== "object" || typeof nextState !== "object" || prevState === null || nextState === null) {
-    return {
-      summary: "changed",
-      changedKeys: [],
-      changedCount: 0
-    };
-  }
-  const prevKeys = Object.keys(prevState);
-  const nextKeys = Object.keys(nextState);
-  const added = nextKeys.filter(k => !prevKeys.includes(k));
-  const removed = prevKeys.filter(k => !nextKeys.includes(k));
-  const changed = [];
-  for (const key of prevKeys) {
-    if (nextKeys.includes(key) && prevState[key] !== nextState[key]) {
-      changed.push(key);
-    }
-  }
-  const allChangedKeys = [...added, ...removed, ...changed];
-  const parts = [];
-  if (added.length > 0) parts.push(`+${added.length}`);
-  if (removed.length > 0) parts.push(`-${removed.length}`);
-  if (changed.length > 0) parts.push(`~${changed.length}`);
-  const totalChanged = allChangedKeys.length;
-  if (parts.length === 0) {
-    return {
-      summary: "nested change",
-      changedKeys: [],
-      changedCount: 0
-    };
-  }
-  return {
-    summary: `${parts.join(" ")} ${totalChanged === 1 ? "key" : "keys"}`,
-    changedKeys: allChangedKeys,
-    changedCount: totalChanged
-  };
+  return (0, _sharedUi.formatValuePreview)(partial, {
+    maxLength,
+    undefinedLabel: "",
+    functionLabel: "(updater fn)"
+  });
 }
 
 // ============================================
 // Zustand State Store
 // ============================================
 
-class ZustandStateStore {
-  stateChanges = [];
+class ZustandStateStore extends _sharedUi.ChangeLog {
   stores = new Map();
-  listeners = new Set();
   storeListeners = new Set();
-  clearListeners = new Set();
-  maxChanges = 200;
-  idCounter = 0;
-  isEnabled = true;
-  captureSuppressed = false;
   remoteSetStateHandler = null;
 
   // ---- State Change Tracking ----
 
   addStateChange(params) {
-    if (!this.isEnabled || this.captureSuppressed) return;
+    if (!this.canRecord()) return;
     const {
       storeName,
       partial,
@@ -213,16 +82,20 @@ class ZustandStateStore {
       isPersisted = false
     } = params;
     const hasStateChange = prevState !== nextState;
+    // `changedCount` counts the keys in `changedKeys` and nothing else, so the
+    // row's "N keys changed" and the detail page's CHANGED KEYS card agree —
+    // including the persist-rehydrate case where the object is replaced
+    // without any top-level value moving.
     const {
       summary,
       changedKeys,
       changedCount
-    } = getStateDiffSummary(prevState, nextState);
+    } = (0, _sharedUi.shallowDiffSummary)(prevState, nextState);
     const partialPreview = formatPartialPreview(partial);
     const isSlowUpdate = (duration ?? 0) > 16;
     const resolvedCategory = category ?? (replace ? "replace" : "setState");
     const stateChange = {
-      id: `${Date.now()}-${++this.idCounter}`,
+      id: this.nextId(),
       storeName,
       timestamp: Date.now(),
       prevState,
@@ -239,7 +112,7 @@ class ZustandStateStore {
       isSlowUpdate,
       isPersisted
     };
-    this.stateChanges = [stateChange, ...this.stateChanges].slice(0, this.maxChanges);
+    this.push(stateChange);
 
     // Update store change count
     const storeInfo = this.stores.get(storeName);
@@ -249,36 +122,17 @@ class ZustandStateStore {
     this.notifyListeners();
   }
   getStateChanges() {
-    return [...this.stateChanges];
+    return this.getAll();
   }
   getStateChangeById(id) {
-    return this.stateChanges.find(c => c.id === id);
+    return this.getById(id);
   }
   clearStateChanges() {
-    this.stateChanges = [];
     // Reset counts
     for (const store of this.stores.values()) {
       store.stateChangeCount = 0;
     }
-    this.notifyListeners();
-    this.clearListeners.forEach(listener => {
-      try {
-        listener();
-      } catch {
-        // Ignore listener errors
-      }
-    });
-  }
-
-  /**
-   * Listen for clearStateChanges() calls. Used in remote mirror mode to
-   * forward a clear performed in the dashboard UI to the synced device.
-   */
-  onClear(listener) {
-    this.clearListeners.add(listener);
-    return () => {
-      this.clearListeners.delete(listener);
-    };
+    this.clear();
   }
 
   // ---- Remote Mirror Mode ----
@@ -291,33 +145,19 @@ class ZustandStateStore {
    * flag so the UI's pause button freezes the reseed.
    */
   replaceStateChanges(changes) {
-    if (!this.isEnabled) return;
-    this.stateChanges = changes.slice(0, this.maxChanges);
+    if (!this.getEnabled()) return;
     for (const store of this.stores.values()) {
       store.stateChangeCount = 0;
     }
-    for (const change of this.stateChanges) {
+    const kept = changes.slice(0, this.max);
+    for (const change of kept) {
       const store = this.stores.get(change.storeName);
       if (store) store.stateChangeCount++;
     }
-    this.notifyListeners();
+    this.setItems(kept);
     this.notifyStoreListeners();
   }
 
-  /**
-   * Permanently suppress local capture. Use when this store acts as a mirror
-   * of a remote device's state changes (e.g. the desktop dashboard): data
-   * arrives via replaceFromSnapshot() and local middleware must never record.
-   */
-  disableCapture() {
-    this.captureSuppressed = true;
-  }
-
-  /** Whether the store is in remote mirror mode (capture suppressed). */
-  isCaptureSuppressed() {
-    return this.captureSuppressed;
-  }
-
   /**
    * Serializable snapshot of the tracked stores (registry metadata plus each
    * store's current state). Used by the sync adapter on the device side —
@@ -362,18 +202,18 @@ class ZustandStateStore {
    * the enabled flag so the UI's pause button freezes the mirror.
    */
   replaceFromSnapshot(changes, storeSnapshots) {
-    if (!this.isEnabled) return;
+    if (!this.getEnabled()) return;
 
     // Preserve trees a remote mirror already hydrated — wire-form snapshots
     // always carry markers, and a later snapshot must not blank the detail pane.
     const hydrated = new Map();
-    for (const existing of this.stateChanges) {
+    for (const existing of this.items) {
       const prev = existing.prevState;
       if (!prev || prev.__buoyStateOnDevice !== true) {
         hydrated.set(existing.id, existing);
       }
     }
-    this.stateChanges = changes.slice(0, this.maxChanges).map(change => {
+    const merged = changes.slice(0, this.max).map(change => {
       const kept = hydrated.get(change.id);
       const incoming = change.prevState;
       return kept && incoming?.__buoyStateOnDevice === true ? {
@@ -417,7 +257,7 @@ class ZustandStateStore {
         color: snapshot.color
       }];
     }));
-    this.notifyListeners();
+    this.setItems(merged);
     this.notifyStoreListeners();
   }
 
@@ -426,13 +266,7 @@ class ZustandStateStore {
    * device via the adapter's `getChangeDetail`. Remote-mirror (desktop) only.
    */
   hydrateChange(id, patch) {
-    const index = this.stateChanges.findIndex(c => c.id === id);
-    if (index === -1) return;
-    this.stateChanges = [...this.stateChanges.slice(0, index), {
-      ...this.stateChanges[index],
-      ...patch
-    }, ...this.stateChanges.slice(index + 1)];
-    this.notifyListeners();
+    this.hydrateById(id, patch);
   }
 
   /**
@@ -485,7 +319,7 @@ class ZustandStateStore {
   // ---- Filtering ----
 
   filterStateChanges(filter) {
-    let filtered = [...this.stateChanges];
+    let filtered = this.getAll();
     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)));
@@ -502,10 +336,10 @@ class ZustandStateStore {
   // ---- Stats ----
 
   getStats() {
-    const total = this.stateChanges.length;
-    const withChanges = this.stateChanges.filter(c => c.hasStateChange).length;
+    const total = this.items.length;
+    const withChanges = this.items.filter(c => c.hasStateChange).length;
     const storeCount = this.stores.size;
-    const durations = this.stateChanges.filter(c => c.duration !== undefined).map(c => c.duration);
+    const durations = this.items.filter(c => c.duration !== undefined).map(c => c.duration);
     const avgDuration = durations.length > 0 ? durations.reduce((sum, d) => sum + d, 0) / durations.length : 0;
     return {
       totalChanges: total,
@@ -521,38 +355,18 @@ class ZustandStateStore {
 
   // ---- Enable / Disable ----
 
-  setEnabled(enabled) {
-    this.isEnabled = enabled;
-  }
-  getEnabled() {
-    return this.isEnabled;
-  }
   setMaxChanges(max) {
-    this.maxChanges = max;
-    if (this.stateChanges.length > max) {
-      this.stateChanges = this.stateChanges.slice(0, max);
-      this.notifyListeners();
-    }
+    this.setMax(max);
   }
 
   // ---- Subscriptions ----
 
-  subscribe(listener) {
-    this.listeners.add(listener);
-    return () => {
-      this.listeners.delete(listener);
-    };
-  }
   subscribeToStores(listener) {
     this.storeListeners.add(listener);
     return () => {
       this.storeListeners.delete(listener);
     };
   }
-  notifyListeners() {
-    const changes = this.getStateChanges();
-    this.listeners.forEach(listener => listener(changes));
-  }
   notifyStoreListeners() {
     const stores = this.getStores();
     this.storeListeners.forEach(listener => listener(stores));

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

@@ -4,134 +4,40 @@
  * ZustandDetailViewToggle
  *
  * Three-card toggle for switching between Change, State, and Diff views.
- * Mirrors ReduxDetailViewToggle.tsx
+ * The cards themselves are the shared `DetailViewToggle`; this file owns
+ * the zustand view list and testID prefix.
  */
 
 import React, { memo } from "react";
-import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
-import { night, FileText, Database, GitBranch } from "@buoy-gg/shared-ui";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const VIEW_CONFIGS = [{
+import { DetailViewToggle, FileText, Database, GitBranch } from "@buoy-gg/shared-ui";
+import { jsx as _jsx } from "react/jsx-runtime";
+const VIEWS = [{
   key: "change",
   label: "CHANGE",
   description: "View change details",
-  icon: FileText,
-  activeColor: night.color.accent
+  icon: FileText
 }, {
   key: "state",
   label: "STATE",
   description: "View current state",
-  icon: Database,
-  activeColor: night.color.accent
+  icon: Database
 }, {
   key: "diff",
   label: "DIFF",
   description: "Compare changes",
-  icon: GitBranch,
-  activeColor: night.color.accent
+  icon: GitBranch
 }];
+const DIFF_DISABLED = ["diff"];
 export const ZustandDetailViewToggle = /*#__PURE__*/memo(function ZustandDetailViewToggle({
   activeView,
   onViewChange,
   diffDisabled = false
 }) {
-  return /*#__PURE__*/_jsx(View, {
-    style: styles.container,
-    children: VIEW_CONFIGS.map(config => {
-      const isActive = activeView === config.key;
-      const isDisabled = config.key === "diff" && diffDisabled;
-      const IconComponent = config.icon;
-      return /*#__PURE__*/_jsxs(TouchableOpacity, {
-        style: [styles.card, isActive && [styles.cardActive, {
-          borderColor: config.activeColor
-        }], isDisabled && styles.cardDisabled],
-        onPress: () => !isDisabled && onViewChange(config.key),
-        activeOpacity: isDisabled ? 1 : 0.8,
-        disabled: isDisabled,
-        testID: `buoy-zustand-view-${config.key}`,
-        accessibilityRole: "button",
-        accessibilityLabel: config.label,
-        accessibilityState: {
-          disabled: isDisabled,
-          selected: isActive
-        },
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: styles.cardContent,
-          children: [/*#__PURE__*/_jsx(IconComponent, {
-            size: 14,
-            color: isActive ? config.activeColor : isDisabled ? night.color.textTertiary : night.color.textSecondary
-          }), /*#__PURE__*/_jsx(Text, {
-            style: [styles.cardLabel, isActive && [styles.cardLabelActive, {
-              color: config.activeColor
-            }], isDisabled && styles.cardLabelDisabled],
-            children: config.label
-          })]
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.cardDescription, isActive && styles.cardDescriptionActive, isDisabled && styles.cardDescriptionDisabled],
-          children: config.description
-        })]
-      }, config.key);
-    })
+  return /*#__PURE__*/_jsx(DetailViewToggle, {
+    views: VIEWS,
+    activeView: activeView,
+    onViewChange: onViewChange,
+    disabledKeys: diffDisabled ? DIFF_DISABLED : undefined,
+    testIDPrefix: "buoy-zustand"
   });
-});
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    gap: 8,
-    padding: 14,
-    // Transparent so the night sheet's star field shows through.
-    backgroundColor: "transparent"
-  },
-  card: {
-    flex: 1,
-    backgroundColor: night.color.surface,
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    padding: 10,
-    gap: 4
-  },
-  cardActive: {
-    borderWidth: 1.5,
-    backgroundColor: night.color.accentSoft,
-    shadowColor: night.color.accent,
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 8,
-    elevation: 3
-  },
-  cardDisabled: {
-    opacity: 0.5
-  },
-  cardContent: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6
-  },
-  cardLabel: {
-    fontSize: 10,
-    fontWeight: "700",
-    letterSpacing: 0.5,
-    color: night.color.textSecondary
-  },
-  cardLabelActive: {
-    color: night.color.text
-  },
-  cardLabelDisabled: {
-    color: night.color.textTertiary
-  },
-  cardDescription: {
-    fontSize: 9,
-    color: night.color.textTertiary,
-    lineHeight: 12
-  },
-  cardDescriptionActive: {
-    color: night.color.textSecondary
-  },
-  cardDescriptionDisabled: {
-    color: night.color.textTertiary
-  }
 });