@buoy-gg/zustand 2.1.15 → 3.0.0

package/lib/module/zustand/utils/buoyZustandMiddleware.js

@@ -1 +1,214 @@
-"use strict";import{zustandStateStore}from"./zustandStateStore";const WATCHED_SYMBOL=Symbol.for("@@buoy-zustand/watched");function detectPersist(t){const e=t.persist;if(e&&"function"==typeof e.getOptions){const t=e.getOptions();return{isPersisted:!0,persistName:t?.name}}return{isPersisted:!1}}export function watchStores(t){const e=[];for(const[s,r]of Object.entries(t)){const t=r;if(t[WATCHED_SYMBOL])continue;t[WATCHED_SYMBOL]=!0;const{isPersisted:n,persistName:a}=detectPersist(r);zustandStateStore.registerStore(s,{getState:r.getState,getInitialState:r.getInitialState,setState:r.setState,subscribe:r.subscribe},{isPersisted:n,persistName:a});const i=r.subscribe((t,e)=>{try{zustandStateStore.addStateChange({storeName:s,partial:void 0,replace:!1,prevState:e,nextState:t,duration:void 0,isPersisted:n})}catch{}});e.push(()=>{i(),delete r[WATCHED_SYMBOL],zustandStateStore.unregisterStore(s)})}return()=>{e.forEach(t=>t())}}let unnamedCounter=0;export function buoyDevTools(t,e){return(s,r,n)=>{const a=e?.name??"store-"+ ++unnamedCounter,i=!1!==e?.enabled,o=t((t,e)=>{if(!i)return s(t,e);const n=performance.now(),o=r();s(t,e);const S=r(),u=performance.now()-n,c="function"==typeof t?"(updater fn)":t;zustandStateStore.addStateChange({storeName:a,partial:c,replace:e??!1,prevState:o,nextState:S,duration:u,isPersisted:!1})},r,n);return setTimeout(()=>{if(n[WATCHED_SYMBOL])return;n[WATCHED_SYMBOL]=!0;const{isPersisted:t,persistName:e}=detectPersist(n);zustandStateStore.registerStore(a,{getState:r,getInitialState:n.getInitialState,setState:s,subscribe:n.subscribe},{isPersisted:t,persistName:e})},0),o}}export function isStoreInstrumented(t){return!0===t[WATCHED_SYMBOL]}
+"use strict";
+
+/**
+ * Buoy Zustand DevTools — Store instrumentation
+ *
+ * Two approaches, from easiest to most detailed:
+ *
+ * 1. watchStores() — RECOMMENDED. One line, zero store modifications.
+ *    Uses store.subscribe() externally. Never touches setState.
+ *    Safe to add/remove — cannot break your stores even if our code has bugs.
+ *
+ * 2. buoyDevTools() — Opt-in middleware for advanced use.
+ *    Wraps setState to capture the partial argument and timing.
+ *    Requires modifying each store's create() call.
+ */
+
+import { zustandStateStore } from "./zustandStateStore";
+/** Symbol to mark stores that have been watched/instrumented */
+const WATCHED_SYMBOL = Symbol.for("@@buoy-zustand/watched");
+
+/**
+ * Detect if a store is using the persist middleware by checking for persist API
+ */
+function detectPersist(store) {
+  const persist = store.persist;
+  if (persist && typeof persist.getOptions === "function") {
+    const options = persist.getOptions();
+    return {
+      isPersisted: true,
+      persistName: options?.name
+    };
+  }
+  return {
+    isPersisted: false
+  };
+}
+
+// =============================================================================
+// watchStores — Primary, non-intrusive approach
+// =============================================================================
+
+/** Minimal store shape — what Zustand's create() returns */
+
+/**
+ * Watch multiple Zustand stores for state changes.
+ *
+ * This is the recommended, non-intrusive approach. It uses each store's
+ * `.subscribe()` method to observe changes from the outside — it never
+ * modifies `setState` or any store internals.
+ *
+ * **Safe by design:** Even if our listener code has a bug, it cannot break
+ * your stores. All listener code is wrapped in try/catch.
+ *
+ * @example
+ * ```tsx
+ * // In your _layout.tsx or App.tsx — ONE line:
+ * import { watchStores } from '@buoy-gg/zustand';
+ * import { useCounterStore } from './stores/counter';
+ * import { useAuthStore } from './stores/auth';
+ * import { useCartStore } from './stores/cart';
+ *
+ * watchStores({
+ *   counterStore: useCounterStore,
+ *   authStore: useAuthStore,
+ *   cartStore: useCartStore,
+ * });
+ * ```
+ *
+ * @param stores - Object mapping store names to Zustand store hooks
+ * @returns Cleanup function that removes all subscriptions
+ */
+export function watchStores(stores) {
+  const cleanups = [];
+  for (const [name, store] of Object.entries(stores)) {
+    // Skip if already watched
+    const storeAny = store;
+    if (storeAny[WATCHED_SYMBOL]) continue;
+    storeAny[WATCHED_SYMBOL] = true;
+    const {
+      isPersisted,
+      persistName
+    } = detectPersist(store);
+
+    // Register the store for overview
+    zustandStateStore.registerStore(name, {
+      getState: store.getState,
+      getInitialState: store.getInitialState,
+      setState: store.setState,
+      subscribe: store.subscribe
+    }, {
+      isPersisted,
+      persistName
+    });
+
+    // Subscribe to state changes — completely external, never touches setState
+    const unsubscribe = store.subscribe((state, prevState) => {
+      try {
+        zustandStateStore.addStateChange({
+          storeName: name,
+          partial: undefined,
+          // Not available in subscribe-only mode
+          replace: false,
+          prevState,
+          nextState: state,
+          duration: undefined,
+          // Not available in subscribe-only mode
+          isPersisted
+        });
+      } catch {
+        // Silently catch — our bug must never propagate into the store
+      }
+    });
+    cleanups.push(() => {
+      unsubscribe();
+      delete store[WATCHED_SYMBOL];
+      zustandStateStore.unregisterStore(name);
+    });
+  }
+  return () => {
+    cleanups.forEach(fn => fn());
+  };
+}
+
+// =============================================================================
+// buoyDevTools — Opt-in middleware (advanced, more detail)
+// =============================================================================
+
+/** Auto-incrementing store name counter for unnamed stores */
+let unnamedCounter = 0;
+
+/**
+ * Zustand middleware that instruments a store for Buoy DevTools.
+ *
+ * This is the advanced approach — it wraps setState to capture:
+ * - The partial argument passed to setState
+ * - Precise timing of each setState call
+ *
+ * Use this when you want maximum detail. For most cases, `watchStores()`
+ * is simpler and safer.
+ *
+ * @example
+ * ```tsx
+ * import { create } from 'zustand';
+ * import { buoyDevTools } from '@buoy-gg/zustand';
+ *
+ * const useCounterStore = create(
+ *   buoyDevTools(
+ *     (set) => ({
+ *       count: 0,
+ *       increment: () => set((s) => ({ count: s.count + 1 })),
+ *     }),
+ *     { name: 'counterStore' }
+ *   )
+ * );
+ * ```
+ */
+export function buoyDevTools(config, options) {
+  return (set, get, api) => {
+    const storeName = options?.name ?? `store-${++unnamedCounter}`;
+    const enabled = options?.enabled !== false;
+    const instrumentedSet = (partial, replace) => {
+      if (!enabled) {
+        return set(partial, replace);
+      }
+      const startTime = performance.now();
+      const prevState = get();
+      set(partial, replace);
+      const nextState = get();
+      const duration = performance.now() - startTime;
+      const resolvedPartial = typeof partial === "function" ? "(updater fn)" : partial;
+      zustandStateStore.addStateChange({
+        storeName,
+        partial: resolvedPartial,
+        replace: replace ?? false,
+        prevState,
+        nextState,
+        duration,
+        isPersisted: false
+      });
+    };
+    const result = config(instrumentedSet, get, api);
+
+    // Register the store after creation
+    setTimeout(() => {
+      if (api[WATCHED_SYMBOL]) return;
+      api[WATCHED_SYMBOL] = true;
+      const {
+        isPersisted,
+        persistName
+      } = detectPersist(api);
+      zustandStateStore.registerStore(storeName, {
+        getState: get,
+        getInitialState: api.getInitialState,
+        setState: set,
+        subscribe: api.subscribe
+      }, {
+        isPersisted,
+        persistName
+      });
+    }, 0);
+    return result;
+  };
+}
+
+// =============================================================================
+// Utility
+// =============================================================================
+
+/**
+ * Check if a store is being watched/instrumented
+ */
+export function isStoreInstrumented(store) {
+  return store[WATCHED_SYMBOL] === true;
+}

package/lib/module/zustand/utils/index.js

@@ -1 +1,4 @@
-"use strict";export{zustandStateStore}from"./zustandStateStore";export{watchStores,buoyDevTools,isStoreInstrumented}from"./buoyZustandMiddleware";
+"use strict";
+
+export { zustandStateStore } from "./zustandStateStore";
+export { watchStores, buoyDevTools, isStoreInstrumented } from "./buoyZustandMiddleware";

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

@@ -1 +1,453 @@
-"use strict";const STORE_COLORS={counter:"#10B981",auth:"#8B5CF6",user:"#3B82F6",cart:"#EC4899",app:"#6366F1",ui:"#F59E0B",settings:"#14B8A6",theme:"#06B6D4",navigation:"#F97316",form:"#EF4444"};function getStoreColor(e){const t=e.toLowerCase();if(STORE_COLORS[t])return STORE_COLORS[t];for(const[e,s]of Object.entries(STORE_COLORS))if(t.includes(e))return s;const s=137*e.split("").reduce((e,t)=>e+t.charCodeAt(0),0)%360,n=.7*(1-Math.abs(1.2-1)),r=n*(1-Math.abs(s/60%2-1)),a=.6-n/2;let i=0,o=0,h=0;s<60?(i=n,o=r):s<120?(i=r,o=n):s<180?(o=n,h=r):s<240?(o=r,h=n):s<300?(i=r,h=n):(i=n,h=r);const g=e=>Math.round(255*(e+a)).toString(16).padStart(2,"0");return`#${g(i)}${g(o)}${g(h)}`}function formatPartialPreview(e,t=40){if(void 0===e)return"";if(null===e)return"null";try{if("function"==typeof e)return"(updater fn)";if("string"==typeof e)return e.length>t?`"${e.slice(0,t-3)}..."`:`"${e}"`;if("number"==typeof e||"boolean"==typeof e)return String(e);if(Array.isArray(e)){if(0===e.length)return"[]";const s=JSON.stringify(e);return s.length>t?`[${e.length} items]`:s}if("object"==typeof e){const s=Object.keys(e);if(0===s.length)return"{}";const n=JSON.stringify(e);return n.length<=t?n:`{ ${s.length} keys }`}return String(e).slice(0,t)}catch{return"[complex]"}}function getStateDiffSummary(e,t){if(e===t)return{summary:"no change",changedKeys:[],changedCount:0};if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return{summary:"changed",changedKeys:[],changedCount:1};const s=Object.keys(e),n=Object.keys(t),r=n.filter(e=>!s.includes(e)),a=s.filter(e=>!n.includes(e)),i=[];for(const r of s)n.includes(r)&&e[r]!==t[r]&&i.push(r);const o=[...r,...a,...i],h=[];r.length>0&&h.push(`+${r.length}`),a.length>0&&h.push(`-${a.length}`),i.length>0&&h.push(`~${i.length}`);const g=o.length;return 0===h.length?{summary:"nested change",changedKeys:[],changedCount:1}:{summary:`${h.join(" ")} ${1===g?"key":"keys"}`,changedKeys:o,changedCount:g}}class ZustandStateStore{stateChanges=[];stores=new Map;listeners=new Set;storeListeners=new Set;maxChanges=200;idCounter=0;isEnabled=!0;addStateChange(e){if(!this.isEnabled)return;const{storeName:t,partial:s,replace:n,prevState:r,nextState:a,duration:i,category:o,isPersisted:h=!1}=e,g=r!==a,{summary:u,changedKeys:l,changedCount:c}=getStateDiffSummary(r,a),d=formatPartialPreview(s),f=(i??0)>16,C=o??(n?"replace":"setState"),S={id:`${Date.now()}-${++this.idCounter}`,storeName:t,timestamp:Date.now(),prevState:r,nextState:a,partial:s,duration:i,hasStateChange:g,replace:n,category:C,changedKeys:l,changedKeysCount:c,diffSummary:u,partialPreview:d,isSlowUpdate:f,isPersisted:h};this.stateChanges=[S,...this.stateChanges].slice(0,this.maxChanges);const y=this.stores.get(t);y&&y.stateChangeCount++,this.notifyListeners()}getStateChanges(){return[...this.stateChanges]}getStateChangeById(e){return this.stateChanges.find(t=>t.id===e)}clearStateChanges(){this.stateChanges=[];for(const e of this.stores.values())e.stateChangeCount=0;this.notifyListeners()}registerStore(e,t,s){if(this.stores.has(e))return;const n={name:e,api:t,stateChangeCount:0,isPersisted:s?.isPersisted??!1,persistName:s?.persistName,color:getStoreColor(e)};this.stores.set(e,n),this.notifyStoreListeners()}unregisterStore(e){this.stores.delete(e),this.notifyStoreListeners()}getStores(){return Array.from(this.stores.values())}getStore(e){return this.stores.get(e)}getStoreColor(e){return this.stores.get(e)?.color??getStoreColor(e)}filterStateChanges(e){let t=[...this.stateChanges];if(e.searchText){const s=e.searchText.toLowerCase();t=t.filter(e=>e.storeName.toLowerCase().includes(s)||e.partialPreview.toLowerCase().includes(s)||e.changedKeys.some(e=>e.toLowerCase().includes(s)))}return e.storeNames&&e.storeNames.length>0&&(t=t.filter(t=>e.storeNames.includes(t.storeName))),e.onlyWithChanges&&(t=t.filter(e=>e.hasStateChange)),t}getStats(){const e=this.stateChanges.length,t=this.stateChanges.filter(e=>e.hasStateChange).length,s=this.stores.size,n=this.stateChanges.filter(e=>void 0!==e.duration).map(e=>e.duration),r=n.length>0?n.reduce((e,t)=>e+t,0)/n.length:0;return{totalChanges:e,changesWithStateChange:t,changesWithoutStateChange:e-t,storeCount:s,averageDuration:Math.round(100*r)/100}}getUniqueStoreNames(){return Array.from(this.stores.keys()).sort()}setEnabled(e){this.isEnabled=e}getEnabled(){return this.isEnabled}setMaxChanges(e){this.maxChanges=e,this.stateChanges.length>e&&(this.stateChanges=this.stateChanges.slice(0,e),this.notifyListeners())}subscribe(e){return this.listeners.add(e),()=>{this.listeners.delete(e)}}subscribeToStores(e){return this.storeListeners.add(e),()=>{this.storeListeners.delete(e)}}notifyListeners(){const e=this.getStateChanges();this.listeners.forEach(t=>t(e))}notifyStoreListeners(){const e=this.getStores();this.storeListeners.forEach(t=>t(e))}}export const zustandStateStore=new ZustandStateStore;
+"use strict";
+
+/**
+ * Zustand state store - captures and stores Zustand state changes
+ *
+ * Mirrors the architecture of reduxActionStore.ts from @buoy-gg/redux
+ */
+
+// ============================================
+// Store Color Palette
+// ============================================
+
+const STORE_COLORS = {
+  counter: "#10B981",
+  // emerald
+  auth: "#8B5CF6",
+  // purple
+  user: "#3B82F6",
+  // blue
+  cart: "#EC4899",
+  // pink
+  app: "#6366F1",
+  // indigo
+  ui: "#F59E0B",
+  // amber
+  settings: "#14B8A6",
+  // teal
+  theme: "#06B6D4",
+  // cyan
+  navigation: "#F97316",
+  // orange
+  form: "#EF4444" // red
+};
+
+/**
+ * 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)}`;
+}
+
+// ============================================
+// 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
+ */
+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: 1
+    };
+  }
+  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: 1
+    };
+  }
+  return {
+    summary: `${parts.join(" ")} ${totalChanged === 1 ? "key" : "keys"}`,
+    changedKeys: allChangedKeys,
+    changedCount: totalChanged
+  };
+}
+
+// ============================================
+// Zustand State Store
+// ============================================
+
+class ZustandStateStore {
+  stateChanges = [];
+  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;
+    const {
+      storeName,
+      partial,
+      replace,
+      prevState,
+      nextState,
+      duration,
+      category,
+      isPersisted = false
+    } = params;
+    const hasStateChange = prevState !== nextState;
+    const {
+      summary,
+      changedKeys,
+      changedCount
+    } = getStateDiffSummary(prevState, nextState);
+    const partialPreview = formatPartialPreview(partial);
+    const isSlowUpdate = (duration ?? 0) > 16;
+    const resolvedCategory = category ?? (replace ? "replace" : "setState");
+    const stateChange = {
+      id: `${Date.now()}-${++this.idCounter}`,
+      storeName,
+      timestamp: Date.now(),
+      prevState,
+      nextState,
+      partial,
+      duration,
+      hasStateChange,
+      replace,
+      category: resolvedCategory,
+      changedKeys,
+      changedKeysCount: changedCount,
+      diffSummary: summary,
+      partialPreview,
+      isSlowUpdate,
+      isPersisted
+    };
+    this.stateChanges = [stateChange, ...this.stateChanges].slice(0, this.maxChanges);
+
+    // Update store change count
+    const storeInfo = this.stores.get(storeName);
+    if (storeInfo) {
+      storeInfo.stateChangeCount++;
+    }
+    this.notifyListeners();
+  }
+  getStateChanges() {
+    return [...this.stateChanges];
+  }
+  getStateChangeById(id) {
+    return this.stateChanges.find(c => c.id === 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);
+    };
+  }
+
+  // ---- Remote Mirror Mode ----
+
+  /**
+   * 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 —
+   * the live `api` handles can't go over the wire.
+   */
+  getStoreSnapshots() {
+    return Array.from(this.stores.values()).map(store => {
+      let currentState;
+      try {
+        currentState = store.api.getState();
+      } catch {
+        currentState = undefined;
+      }
+      return {
+        name: store.name,
+        stateChangeCount: store.stateChangeCount,
+        isPersisted: store.isPersisted,
+        persistName: store.persistName,
+        color: store.color,
+        currentState
+      };
+    });
+  }
+
+  /**
+   * Handler invoked when the UI calls setState on a mirrored store (e.g.
+   * time-travel from the dashboard). Forward it to the synced device.
+   */
+  setRemoteSetStateHandler(handler) {
+    this.remoteSetStateHandler = handler;
+  }
+
+  /**
+   * Replace the entire mirror contents from a synced device snapshot. The
+   * rebuilt registry entries get stub `api` handles: getState() serves the
+   * snapshotted state, setState() forwards to the remote handler. Respects
+   * the enabled flag so the UI's pause button freezes the mirror.
+   */
+  replaceFromSnapshot(changes, storeSnapshots) {
+    if (!this.isEnabled) return;
+    this.stateChanges = changes.slice(0, this.maxChanges);
+    this.stores = new Map(storeSnapshots.map(snapshot => [snapshot.name, {
+      name: snapshot.name,
+      api: {
+        getState: () => snapshot.currentState,
+        setState: (partial, replace) => {
+          this.remoteSetStateHandler?.(snapshot.name, partial, replace);
+        },
+        subscribe: () => () => {}
+      },
+      stateChangeCount: snapshot.stateChangeCount,
+      isPersisted: snapshot.isPersisted,
+      persistName: snapshot.persistName,
+      color: snapshot.color
+    }]));
+    this.notifyListeners();
+    this.notifyStoreListeners();
+  }
+
+  // ---- Store Registry ----
+
+  registerStore(name, api, options) {
+    if (this.stores.has(name)) return;
+    const storeInfo = {
+      name,
+      api,
+      stateChangeCount: 0,
+      isPersisted: options?.isPersisted ?? false,
+      persistName: options?.persistName,
+      color: getStoreColor(name)
+    };
+    this.stores.set(name, storeInfo);
+    this.notifyStoreListeners();
+  }
+  unregisterStore(name) {
+    this.stores.delete(name);
+    this.notifyStoreListeners();
+  }
+  getStores() {
+    return Array.from(this.stores.values());
+  }
+  getStore(name) {
+    return this.stores.get(name);
+  }
+  getStoreColor(name) {
+    return this.stores.get(name)?.color ?? getStoreColor(name);
+  }
+
+  // ---- Filtering ----
+
+  filterStateChanges(filter) {
+    let filtered = [...this.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;
+  }
+
+  // ---- Stats ----
+
+  getStats() {
+    const total = this.stateChanges.length;
+    const withChanges = this.stateChanges.filter(c => c.hasStateChange).length;
+    const storeCount = this.stores.size;
+    const durations = this.stateChanges.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,
+      changesWithStateChange: withChanges,
+      changesWithoutStateChange: total - withChanges,
+      storeCount,
+      averageDuration: Math.round(avgDuration * 100) / 100
+    };
+  }
+  getUniqueStoreNames() {
+    return Array.from(this.stores.keys()).sort();
+  }
+
+  // ---- 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();
+    }
+  }
+
+  // ---- 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));
+  }
+}
+export const zustandStateStore = new ZustandStateStore();

package/lib/typescript/index.d.ts

@@ -44,7 +44,8 @@ export { ZustandModal } from "./zustand/components/ZustandModal";
 export { ZustandStateChangeItem } from "./zustand/components/ZustandStateChangeItem";
 export { ZustandStateDetailContent, ZustandStateDetailFooter, } from "./zustand/components/ZustandStateDetailContent";
 export { ZustandIcon, ZUSTAND_ICON_COLOR } from "./zustand/components/ZustandIcon";
-export type { ZustandModalProps, ZustandStateChange, ZustandStoreInfo, ZustandFilter, StateChangeCategory, BuoyZustandMiddlewareOptions, } from "./zustand/types";
+export { zustandSyncAdapter } from "./zustand/sync/zustandSyncAdapter";
+export type { ZustandModalProps, ZustandStateChange, ZustandStoreInfo, ZustandStoreSnapshot, ZustandFilter, StateChangeCategory, BuoyZustandMiddlewareOptions, } from "./zustand/types";
 /** @internal */
 export { zustandStateStore } from "./zustand/utils/zustandStateStore";
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAKH,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAKhE,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAKpE,OAAO,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAC;AAKrE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uCAAuC,CAAC;AAK5E,OAAO,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;AAChF,YAAY,EAAE,4BAA4B,EAAE,MAAM,wCAAwC,CAAC;AAK3F,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,sBAAsB,EAAE,MAAM,6CAA6C,CAAC;AACrF,OAAO,EACL,yBAAyB,EACzB,wBAAwB,GACzB,MAAM,gDAAgD,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAKnF,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AAKvE,YAAY,EACV,iBAAiB,EACjB,kBAAkB,EAClB,gBAAgB,EAChB,oBAAoB,EACpB,aAAa,EACb,mBAAmB,EACnB,4BAA4B,GAC7B,MAAM,iBAAiB,CAAC;AAKzB,gBAAgB;AAChB,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC"}

package/lib/typescript/preset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../../src/preset.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAGjE;;;;;;;;GAQG;AACH,eAAO,MAAM,iBAAiB;;;;;qBAKX;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE;;;;;CAKlC,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,CAAC,EAAE;IAC1C,qCAAqC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACvC;;;;;qBAMoB;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE;;;;;EAWpC"}