@buoy-gg/zustand 6.0.0 → 6.0.1

package/README.md

@@ -1,138 +1,66 @@
 # @buoy-gg/zustand
 
-Zustand store DevTools for React Native. Live state change monitoring, state inspection, and diff visualization for your Zustand stores.
+[![npm version](https://img.shields.io/npm/v/@buoy-gg/zustand?style=flat-square&labelColor=1c1c1c&color=10B981)](https://www.npmjs.com/package/@buoy-gg/zustand) [![npm downloads](https://img.shields.io/npm/dm/@buoy-gg/zustand?style=flat-square&labelColor=1c1c1c&color=10B981)](https://www.npmjs.com/package/@buoy-gg/zustand)
 
-## Setup
+**Zustand devtools on the device — state diffs, jump-to-state, and one-tap store reset with no middleware.**
+
+Part of [Buoy](https://github.com/Buoy-gg/buoy) — devtools that live inside your React Native app. Install it and it auto-appears in the floating menu from [`@buoy-gg/core`](https://www.npmjs.com/package/@buoy-gg/core).
+
+## Install
 
 ```bash
-npm install @buoy-gg/zustand
+npm install @buoy-gg/core @buoy-gg/zustand
 ```
 
-### One line — zero store modifications
+## Quick start
+
+Pass your stores to `FloatingDevTools` via the `zustandStores` prop — a named map of your store hooks. No middleware, no store changes; observation is subscribe-only, so your stores stay untouched.
 
 ```tsx
-import { watchStores } from '@buoy-gg/zustand';
+import { FloatingDevTools } from '@buoy-gg/core';
 import { useCounterStore } from './stores/counter';
 import { useAuthStore } from './stores/auth';
 import { useCartStore } from './stores/cart';
 
-// Call once at module scope (e.g. in _layout.tsx or App.tsx):
-watchStores({
-  counterStore: useCounterStore,
-  authStore: useAuthStore,
-  cartStore: useCartStore,
-});
+export default function App() {
+  return (
+    <>
+      <YourApp />
+      <FloatingDevTools
+        zustandStores={{
+          counterStore: useCounterStore,
+          authStore: useAuthStore,
+          cartStore: useCartStore,
+        }}
+      />
+    </>
+  );
+}
 ```
 
-That's it. The Zustand tool appears automatically in FloatingDevTools.
-
-Your stores stay completely untouched — `watchStores` uses Zustand's built-in `.subscribe()` to observe changes from the outside. It never modifies `setState` or any store internals.
+Prefer to wire it outside React? `watchStores({ counterStore: useCounterStore })` from `@buoy-gg/zustand` does the same thing at module scope.
 
-### Safe by design
+## What you get
 
-- **Add in seconds** — one import, one function call
-- **Remove in seconds** — delete those two lines, done
-- **Cannot break your stores** — all listener code is wrapped in try/catch. Even if our code has a bug, your stores keep working normally
-- **No monkey-patching** — we call `.subscribe()`, the same API your own components use
+- **Every state change, captured** — store name, update type (`setState`, `replace`, `persist`, `initial`), changed keys, and a diff summary
+- **Side-by-side diffs** — additions, removals, and modifications highlighted, in tree or split view
+- **Jump to state** — restore any store to a previously captured state instantly
+- **One-tap reset** — send any store back to its initial state without restarting the app
+- **Persist awareness** — stores using Zustand's `persist` middleware are auto-detected and tagged
+- **Store color coding** — each store keeps a consistent color across the UI for easy tracking
+- **Search & filter** — find changes by store name or changed keys, or show only updates that modified state
+- **Optional `buoyDevTools()` middleware** — wrap individual stores for partial-state capture and per-update timing (flags updates over the 16ms frame budget)
 
-### Cleanup (optional)
+## Desktop & AI
 
-```tsx
-const cleanup = watchStores({ ... });
+The same live session streams to [Buoy Desktop](https://github.com/Buoy-gg/Buoy-Desktop) (free, macOS/Windows/Linux) and to Claude Code or Cursor via the [Buoy MCP server](https://buoy.gg/buoy/latest/docs/mcp).
 
-// Later, to stop watching:
-cleanup();
-```
+## Free vs Pro
 
-## Advanced: middleware mode
+Every tool is free. [Pro](https://buoy.gg/pricing) unlocks production builds, the MCP server, and unlimited capture. Every weekend, Pro features unlock free for everyone.
 
-If you want extra detail (the exact partial passed to `setState` and precise timing), you can opt into the middleware approach per-store:
+---
 
-```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' }
-  )
-);
-```
+📚 [Full docs](https://buoy.gg/buoy/latest/docs/tools/zustand) · [All Buoy tools](https://github.com/Buoy-gg/buoy)
 
-This wraps `setState` internally, so it captures what was passed and how long it took. Works with middleware chaining (persist, immer, etc.):
-
-```tsx
-import { persist } from 'zustand/middleware';
-
-const useAuthStore = create(
-  buoyDevTools(
-    persist(
-      (set) => ({ user: null, login: (u) => set({ user: u }) }),
-      { name: 'auth-storage' }
-    ),
-    { name: 'authStore' }
-  )
-);
-```
-
-## Features
-
-- **Live state change capture** — every state update is recorded with prev/next state
-- **State inspection** — full JSON viewer for state after each change
-- **State diffing** — tree view and split view comparing previous vs. next state
-- **Changed keys tracking** — see exactly which top-level keys changed per update
-- **Store color coding** — each store gets a consistent color for easy visual tracking
-- **Performance monitoring** — updates slower than 16ms are flagged (middleware mode)
-- **Persist awareness** — auto-detects stores using Zustand's persist middleware
-- **Search & filter** — search by store name or changed keys, filter to only state-changing updates
-- **Jump to state** — restore any store to a previously captured state
-- **Reset store** — reset any store to its initial state
-- **Copy to clipboard** — copy state data (Pro)
-
-## Comparison
-
-| | `watchStores()` | `buoyDevTools()` middleware |
-|---|---|---|
-| Setup | One line, no store changes | Wrap each store's `create()` |
-| Risk | Zero — uses subscribe only | Low — wraps setState |
-| Captures partial | No | Yes |
-| Captures timing | No | Yes |
-| State diff | Yes | Yes |
-| Changed keys | Yes | Yes |
-| Persist detection | Yes | Yes |
-
-## Exports
-
-```tsx
-// Primary — non-intrusive
-import { watchStores } from '@buoy-gg/zustand';
-
-// Advanced — middleware
-import { buoyDevTools } from '@buoy-gg/zustand';
-
-// Preset
-import { zustandToolPreset, createZustandTool } from '@buoy-gg/zustand';
-
-// Hook
-import { useZustandStateChanges } from '@buoy-gg/zustand';
-
-// Components (for custom UIs)
-import {
-  ZustandModal,
-  ZustandStateChangeItem,
-  ZustandStateDetailContent,
-  ZustandIcon,
-} from '@buoy-gg/zustand';
-
-// Types
-import type {
-  ZustandStateChange,
-  ZustandStoreInfo,
-  ZustandFilter,
-  StateChangeCategory,
-} from '@buoy-gg/zustand';
-```
+Proprietary software. © Buoy LLC. [Terms](https://buoy.gg/terms)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buoy-gg/zustand",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "description": "Zustand store DevTools for React Native",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -26,8 +26,8 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@buoy-gg/shared-ui": "6.0.0",
-    "@buoy-gg/license": "6.0.0"
+    "@buoy-gg/shared-ui": "6.0.1",
+    "@buoy-gg/license": "6.0.1"
   },
   "peerDependencies": {
     "react": "*",