@buoy-gg/jotai 5.0.0 → 6.0.1

package/README.md

@@ -0,0 +1,65 @@
+# @buoy-gg/jotai
+
+[![npm version](https://img.shields.io/npm/v/@buoy-gg/jotai?style=flat-square&labelColor=1c1c1c&color=10B981)](https://www.npmjs.com/package/@buoy-gg/jotai) [![npm downloads](https://img.shields.io/npm/dm/@buoy-gg/jotai?style=flat-square&labelColor=1c1c1c&color=10B981)](https://www.npmjs.com/package/@buoy-gg/jotai)
+
+**Jotai devtools on the device — every atom write shows `prev → next`, with per-atom history and live values.**
+
+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/core @buoy-gg/jotai
+```
+
+## Quick start
+
+One `watchAtoms(store, atoms)` call at module scope — pass your Jotai store and a named map of atoms. No wrappers, no `atomWithDevTools`, no changes to existing atoms; observation is subscribe-only.
+
+```tsx
+import { getDefaultStore } from 'jotai';
+import { watchAtoms } from '@buoy-gg/jotai';
+import { countAtom } from './atoms/count';
+import { authAtom } from './atoms/auth';
+import { cartAtom } from './atoms/cart';
+
+watchAtoms(getDefaultStore(), {
+  countAtom,
+  authAtom,
+  cartAtom,
+});
+```
+
+Using a `<Provider>` with a custom store? Pass it instead:
+
+```tsx
+const myStore = createStore();
+watchAtoms(myStore, { countAtom, authAtom });
+```
+
+Registered atoms appear in the Jotai tool inside the floating menu.
+
+## What you get
+
+- **`prev → next` on every event** — see `0 → 5` or `null → {name, email}` at a glance, no tapping in for simple updates
+- **Live Atoms tab** — every registered atom with its current value, value type, and change count, updated in real time
+- **Per-atom history** — jump from any atom straight to its filtered event timeline to trace one piece of state through a flow
+- **No-change flags** — writes that fired but didn't actually change the value are called out
+- **Three-tab detail view** — change metadata, full value tree, and a side-by-side before/after diff
+- **Atom color coding** — each atom keeps a consistent color across tabs and detail views
+- **Search & filter** — find events by atom name or value content; hide noisy atoms everywhere at once
+- **Recording toggle** — pause atom capture when you need to focus, resume when ready
+
+## Desktop & AI
+
+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).
+
+## Free vs Pro
+
+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.
+
+---
+
+📚 [Full docs](https://buoy.gg/buoy/latest/docs/tools/jotai) · [All Buoy tools](https://github.com/Buoy-gg/buoy)
+
+Proprietary software. © Buoy LLC. [Terms](https://buoy.gg/terms)

package/lib/commonjs/jotai/components/JotaiAtomChangeItem.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.JotaiAtomChangeItem = JotaiAtomChangeItem;
+exports.JotaiAtomChangeItem = void 0;
+var _react = require("react");
 var _reactNative = require("react-native");
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _jotaiStateStore = require("../utils/jotaiStateStore");
@@ -58,7 +59,10 @@ function getPrimaryText(change) {
   }
   return change.valuePreview || "atom()";
 }
-function JotaiAtomChangeItem({
+
+// Memo justified by profiling (tool-bench 2026-07-06) — see
+// ZustandStateChangeItem (same pattern).
+const JotaiAtomChangeItem = exports.JotaiAtomChangeItem = /*#__PURE__*/(0, _react.memo)(function JotaiAtomChangeItem({
   change,
   onPress
 }) {
@@ -67,7 +71,6 @@ function JotaiAtomChangeItem({
   const sublabel = getSublabel(change);
   const primaryText = getPrimaryText(change);
   const badgeText = getBadgeText(change);
-  const relativeTime = (0, _sharedUi.useRelativeTime)(change.timestamp);
   const customBadge = change.hasValueChange ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: styles.badgeContainer,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -88,14 +91,16 @@ function JotaiAtomChangeItem({
     statusLabel: statusLabel,
     statusSublabel: sublabel,
     primaryText: primaryText,
-    bottomRightText: relativeTime,
+    bottomRightText: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.RelativeTime, {
+      timestamp: change.timestamp
+    }),
     customBadge: customBadge,
     badgeText: customBadge ? undefined : badgeText,
     badgeColor: statusColor,
     showChevron: true,
     onPress: () => onPress(change)
   });
-}
+});
 const styles = _reactNative.StyleSheet.create({
   badgeContainer: {
     flexDirection: "row",

package/lib/commonjs/jotai/components/JotaiModal.js

@@ -352,10 +352,10 @@ function JotaiModal({
         contentContainerStyle: styles.listContent,
         showsVerticalScrollIndicator: true,
         removeClippedSubviews: true,
-        initialNumToRender: 15,
-        maxToRenderPerBatch: 10,
-        windowSize: 10,
-        scrollEnabled: false
+        initialNumToRender: 12,
+        maxToRenderPerBatch: 8,
+        windowSize: 5,
+        updateCellsBatchingPeriod: 50
       }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.emptyState,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Box, {
@@ -411,10 +411,10 @@ function JotaiModal({
         contentContainerStyle: styles.listContent,
         showsVerticalScrollIndicator: true,
         removeClippedSubviews: true,
-        initialNumToRender: 15,
-        maxToRenderPerBatch: 10,
-        windowSize: 10,
-        scrollEnabled: false
+        initialNumToRender: 12,
+        maxToRenderPerBatch: 8,
+        windowSize: 5,
+        updateCellsBatchingPeriod: 50
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(EventsEmptyState, {
         isEnabled: isEnabled
       })]
@@ -429,6 +429,10 @@ function JotaiModal({
     onIndexChange: handleIndexChange
   }) : null;
   const footerHeight = selectedChange && activeChanges.length > 1 ? 68 : 0;
+
+  // The change lists own their scrolling so FlatList virtualization works
+  // (see ZustandModal — same pattern, same tool-bench evidence).
+  const listOwnsScroll = !showFilters && !(selectedChange && selectedChangeIndex !== null) && (selectedHistoryAtom != null || activeTab === "events");
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.TickProvider, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.JsModal, {
       visible: visible,
@@ -443,6 +447,7 @@ function JotaiModal({
       enablePersistence: true,
       initialMode: "bottomSheet",
       enableGlitchEffects: true,
+      disableScrollWrapper: listOwnsScroll,
       styles: {},
       footer: footerNode,
       footerHeight: footerHeight,

package/lib/module/jotai/components/JotaiAtomChangeItem.js

@@ -6,8 +6,9 @@
  * Mirrors ZustandStateChangeItem.tsx — uses shared CompactRow for consistent styling
  */
 
+import { memo } from "react";
 import { View, Text, StyleSheet } from "react-native";
-import { CompactRow, buoyColors, Zap, useRelativeTime } from "@buoy-gg/shared-ui";
+import { CompactRow, buoyColors, Zap, RelativeTime } from "@buoy-gg/shared-ui";
 import { jotaiStateStore } from "../utils/jotaiStateStore";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function getStatusLabel(category, atomLabel) {
@@ -54,7 +55,10 @@ function getPrimaryText(change) {
   }
   return change.valuePreview || "atom()";
 }
-export function JotaiAtomChangeItem({
+
+// Memo justified by profiling (tool-bench 2026-07-06) — see
+// ZustandStateChangeItem (same pattern).
+export const JotaiAtomChangeItem = /*#__PURE__*/memo(function JotaiAtomChangeItem({
   change,
   onPress
 }) {
@@ -63,7 +67,6 @@ export function JotaiAtomChangeItem({
   const sublabel = getSublabel(change);
   const primaryText = getPrimaryText(change);
   const badgeText = getBadgeText(change);
-  const relativeTime = useRelativeTime(change.timestamp);
   const customBadge = change.hasValueChange ? /*#__PURE__*/_jsxs(View, {
     style: styles.badgeContainer,
     children: [/*#__PURE__*/_jsx(Text, {
@@ -84,14 +87,16 @@ export function JotaiAtomChangeItem({
     statusLabel: statusLabel,
     statusSublabel: sublabel,
     primaryText: primaryText,
-    bottomRightText: relativeTime,
+    bottomRightText: /*#__PURE__*/_jsx(RelativeTime, {
+      timestamp: change.timestamp
+    }),
     customBadge: customBadge,
     badgeText: customBadge ? undefined : badgeText,
     badgeColor: statusColor,
     showChevron: true,
     onPress: () => onPress(change)
   });
-}
+});
 const styles = StyleSheet.create({
   badgeContainer: {
     flexDirection: "row",

package/lib/module/jotai/components/JotaiModal.js

@@ -348,10 +348,10 @@ export function JotaiModal({
         contentContainerStyle: styles.listContent,
         showsVerticalScrollIndicator: true,
         removeClippedSubviews: true,
-        initialNumToRender: 15,
-        maxToRenderPerBatch: 10,
-        windowSize: 10,
-        scrollEnabled: false
+        initialNumToRender: 12,
+        maxToRenderPerBatch: 8,
+        windowSize: 5,
+        updateCellsBatchingPeriod: 50
       }) : /*#__PURE__*/_jsxs(View, {
         style: styles.emptyState,
         children: [/*#__PURE__*/_jsx(Box, {
@@ -407,10 +407,10 @@ export function JotaiModal({
         contentContainerStyle: styles.listContent,
         showsVerticalScrollIndicator: true,
         removeClippedSubviews: true,
-        initialNumToRender: 15,
-        maxToRenderPerBatch: 10,
-        windowSize: 10,
-        scrollEnabled: false
+        initialNumToRender: 12,
+        maxToRenderPerBatch: 8,
+        windowSize: 5,
+        updateCellsBatchingPeriod: 50
       }) : /*#__PURE__*/_jsx(EventsEmptyState, {
         isEnabled: isEnabled
       })]
@@ -425,6 +425,10 @@ export function JotaiModal({
     onIndexChange: handleIndexChange
   }) : null;
   const footerHeight = selectedChange && activeChanges.length > 1 ? 68 : 0;
+
+  // The change lists own their scrolling so FlatList virtualization works
+  // (see ZustandModal — same pattern, same tool-bench evidence).
+  const listOwnsScroll = !showFilters && !(selectedChange && selectedChangeIndex !== null) && (selectedHistoryAtom != null || activeTab === "events");
   return /*#__PURE__*/_jsxs(TickProvider, {
     children: [/*#__PURE__*/_jsx(JsModal, {
       visible: visible,
@@ -439,6 +443,7 @@ export function JotaiModal({
       enablePersistence: true,
       initialMode: "bottomSheet",
       enableGlitchEffects: true,
+      disableScrollWrapper: listOwnsScroll,
       styles: {},
       footer: footerNode,
       footerHeight: footerHeight,

package/lib/typescript/jotai/components/JotaiAtomChangeItem.d.ts

@@ -8,6 +8,6 @@ interface JotaiAtomChangeItemProps {
     change: JotaiAtomChange;
     onPress: (change: JotaiAtomChange) => void;
 }
-export declare function JotaiAtomChangeItem({ change, onPress, }: JotaiAtomChangeItemProps): import("react").JSX.Element;
+export declare const JotaiAtomChangeItem: import("react").NamedExoticComponent<JotaiAtomChangeItemProps>;
 export {};
 //# sourceMappingURL=JotaiAtomChangeItem.d.ts.map

package/lib/typescript/jotai/components/JotaiAtomChangeItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JotaiAtomChangeItem.d.ts","sourceRoot":"","sources":["../../../../src/jotai/components/JotaiAtomChangeItem.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,KAAK,EAAE,eAAe,EAAsB,MAAM,UAAU,CAAC;AAGpE,UAAU,wBAAwB;IAChC,MAAM,EAAE,eAAe,CAAC;IACxB,OAAO,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;CAC5C;AAoDD,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,OAAO,GACR,EAAE,wBAAwB,+BA+B1B"}
+{"version":3,"file":"JotaiAtomChangeItem.d.ts","sourceRoot":"","sources":["../../../../src/jotai/components/JotaiAtomChangeItem.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,OAAO,KAAK,EAAE,eAAe,EAAsB,MAAM,UAAU,CAAC;AAGpE,UAAU,wBAAwB;IAChC,MAAM,EAAE,eAAe,CAAC;IACxB,OAAO,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;CAC5C;AAsDD,eAAO,MAAM,mBAAmB,gEAiC9B,CAAC"}

package/lib/typescript/jotai/components/JotaiModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JotaiModal.d.ts","sourceRoot":"","sources":["../../../../src/jotai/components/JotaiModal.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAwCH,OAAO,KAAK,EAAE,eAAe,EAAmB,MAAM,UAAU,CAAC;AAoBjE,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,OAAO,EACP,MAAM,EACN,UAAU,EACV,2BAAmC,GACpC,EAAE,eAAe,sCA+ejB"}
+{"version":3,"file":"JotaiModal.d.ts","sourceRoot":"","sources":["../../../../src/jotai/components/JotaiModal.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAwCH,OAAO,KAAK,EAAE,eAAe,EAAmB,MAAM,UAAU,CAAC;AAoBjE,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,OAAO,EACP,MAAM,EACN,UAAU,EACV,2BAAmC,GACpC,EAAE,eAAe,sCAufjB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buoy-gg/jotai",
-  "version": "5.0.0",
+  "version": "6.0.1",
   "description": "Jotai atom 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": "5.0.0",
-    "@buoy-gg/license": "5.0.0"
+    "@buoy-gg/shared-ui": "6.0.1",
+    "@buoy-gg/license": "6.0.1"
   },
   "peerDependencies": {
     "jotai": ">=2.0.0",