@buoy-gg/jotai 7.0.30 → 7.0.32

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

@@ -13,7 +13,9 @@ var _useJotaiAtomChanges = require("../hooks/useJotaiAtomChanges");
 var _JotaiAtomChangeItem = require("./JotaiAtomChangeItem");
 var _JotaiAtomDetailContent = require("./JotaiAtomDetailContent");
 var _JotaiAtomBrowser = require("./JotaiAtomBrowser");
+var _JotaiAtomValueDetailContent = require("./JotaiAtomValueDetailContent");
 var _JotaiEventFilterView = require("./JotaiEventFilterView");
+var _testIDs = require("../utils/testIDs");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Main Jotai DevTools modal
@@ -23,19 +25,32 @@ var _jsxRuntime = require("react/jsx-runtime");
  * - Events tab: Live atom change monitoring with diffs
  */
 
+/**
+ * Cell clipping, off in e2e bundles only.
+ *
+ * `removeClippedSubviews` unmounts the views of rows scrolled out of the
+ * window, which is what makes a long change list cheap — and which makes
+ * Detox report a perfectly rendered row as un-hittable. The env var is
+ * inlined at bundle time, so a bundler that does NOT inline it leaves the
+ * production behaviour exactly as it was.
+ */
+const CLIP_OFFSCREEN_CELLS = !(typeof process !== "undefined" && process.env?.EXPO_PUBLIC_E2E);
 function EventsEmptyState({
   isEnabled
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: styles.emptyState,
+    testID: `${_testIDs.JOTAI_TEST_ID}-empty`,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Box, {
       size: 32,
       color: _sharedUi.night.color.textTertiary
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: styles.emptyTitle,
+      testID: `${_testIDs.JOTAI_TEST_ID}-empty-title`,
       children: "No atom changes"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: styles.emptyText,
+      testID: `${_testIDs.JOTAI_TEST_ID}-empty-text`,
       children: isEnabled ? "Atom changes will appear here as values update." : "Enable capture to start recording atom changes"
     })]
   });
@@ -58,6 +73,9 @@ function JotaiModal({
   const [showProModal, setShowProModal] = (0, _react.useState)(false);
   const [activeTab, setActiveTab] = (0, _react.useState)(initialTab ?? "atoms");
   const [selectedHistoryAtom, setSelectedHistoryAtom] = (0, _react.useState)(null);
+  // The atom whose DETAIL SCREEN (live editor) is open — tapping a card in
+  // the atoms tab navigates here, mirroring ZustandModal's selectedStoreName.
+  const [selectedAtomLabel, setSelectedAtomLabel] = (0, _react.useState)(null);
   const [showFilters, setShowFilters] = (0, _react.useState)(false);
   const [ignoredPatterns, setIgnoredPatterns] = (0, _react.useState)(new Set());
   const {
@@ -142,6 +160,16 @@ function JotaiModal({
       }));
     }
   };
+
+  /** Drop the query AND put the header back. The X, and only the X. */
+  const closeSearch = (0, _react.useCallback)(() => {
+    setSearchText("");
+    setFilter(prev => ({
+      ...prev,
+      searchText: ""
+    }));
+    setIsSearchActive(false);
+  }, [setFilter]);
   const handleChangePress = (0, _react.useCallback)(change => {
     setSelectedChangeId(change.id);
   }, []);
@@ -163,6 +191,16 @@ function JotaiModal({
     setSelectedHistoryAtom(null);
     setSelectedChangeId(null);
   }, []);
+  const handleOpenAtom = (0, _react.useCallback)(label => {
+    setSelectedAtomLabel(label);
+    // The desktop mirror hydrates an atom's full value on demand — this is
+    // the moment it becomes needed (was fired on card-expand before the
+    // detail screen replaced expansion).
+    onAtomExpand?.(label);
+  }, [onAtomExpand]);
+  const handleBackFromAtom = (0, _react.useCallback)(() => {
+    setSelectedAtomLabel(null);
+  }, []);
   const getAtomsSnapshot = (0, _react.useCallback)(() => {
     return displayedAtoms.reduce((acc, atom) => {
       try {
@@ -221,12 +259,19 @@ function JotaiModal({
     setIsSearchActive(false);
   }, [searchText, setFilter]);
   const keyExtractor = (0, _react.useCallback)(item => item.id, []);
+
+  // Built for the whole list rather than per row: the ordinal a row carries is
+  // a fact about the list around it. See ../utils/testIDs.ts for why an atom
+  // label alone cannot address a change row — and why the ordinal is counted
+  // per atom when one write can move several.
+  const rowTestIDs = (0, _react.useMemo)(() => (0, _testIDs.buildChangeRowTestIDs)(activeChanges), [activeChanges]);
   const renderItem = (0, _react.useCallback)(({
     item
   }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_JotaiAtomChangeItem.JotaiAtomChangeItem, {
     change: item,
-    onPress: handleChangePress
-  }), [handleChangePress]);
+    onPress: handleChangePress,
+    testID: rowTestIDs.get(item.id)
+  }), [handleChangePress, rowTestIDs]);
 
   // ---- Header ----
 
@@ -238,7 +283,8 @@ function JotaiModal({
           onBack: () => setShowFilters(false)
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
           title: "Filters",
-          centered: true
+          centered: true,
+          testID: `${_testIDs.JOTAI_TEST_ID}-filters-title`
         })]
       });
     }
@@ -248,7 +294,8 @@ function JotaiModal({
           onBack: handleBack
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
           title: `${selectedChange.atomLabel}/${selectedChange.category}`,
-          centered: true
+          centered: true,
+          testID: `${_testIDs.JOTAI_TEST_ID}-detail-title`
         })]
       });
     }
@@ -258,16 +305,33 @@ function JotaiModal({
           onBack: handleBackFromHistory
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
           title: `${selectedHistoryAtom} History`,
-          centered: true
+          centered: true,
+          testID: `${_testIDs.JOTAI_TEST_ID}-history-title`
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Actions, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {
             value: getHistorySnapshot,
             disabled: activeChanges.length === 0,
-            buttonStyle: styles.headerActionButton
+            buttonStyle: styles.headerActionButton,
+            testID: `${_testIDs.JOTAI_TEST_ID}-copy`
           })
         })]
       });
     }
+
+    // Atom detail header — the live editor screen. AFTER history: history is
+    // reached FROM the detail screen and stacks over it, so when both are set
+    // history owns the header, and its back lands you back on the detail.
+    if (selectedAtomLabel) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
+          onBack: handleBackFromAtom
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
+          title: selectedAtomLabel,
+          centered: true,
+          testID: `${_testIDs.JOTAI_TEST_ID}-atom-detail-title`
+        })]
+      });
+    }
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
       children: [onBack && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
         onBack: onBack
@@ -275,27 +339,42 @@ function JotaiModal({
         title: "",
         children: isSearchActive ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           style: styles.headerSearchContainer,
+          testID: `${_testIDs.JOTAI_TEST_ID}-search`,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
             size: 14,
             color: _sharedUi.night.color.textSecondary
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
             ref: searchInputRef,
+            testID: `${_testIDs.JOTAI_TEST_ID}-search-field`,
             style: styles.headerSearchInput,
             placeholder: activeTab === "atoms" ? "Search atoms..." : "Search events...",
             placeholderTextColor: _sharedUi.night.color.placeholder,
             value: searchText,
             onChangeText: handleSearch,
-            onSubmitEditing: () => setIsSearchActive(false),
-            onBlur: () => setIsSearchActive(false),
+            onSubmitEditing: () => searchInputRef.current?.blur()
+            // Stay open while the query is still narrowing the list.
+            //
+            // Collapsing on blur hid the reason rows were missing: the
+            // header went back to its TABS — whose counts are of the
+            // WHOLE capture — while the list stayed filtered, so the tool
+            // showed "Atoms (8)" above a single row and offered nothing to
+            // explain the gap. The only way back was to reopen a field the
+            // user had no reason to think was still armed. Same shape, and
+            // the same fix, as the Redux, Events and Zustand tools.
+            ,
+            onBlur: () => {
+              if (searchText.length === 0) setIsSearchActive(false);
+            },
+            accessibilityLabel: "Search Jotai atoms and events",
             autoCapitalize: "none",
             autoCorrect: false,
             returnKeyType: "search"
-          }), searchText.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-            onPress: () => {
-              handleSearch("");
-              setIsSearchActive(false);
-            },
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+            onPress: closeSearch,
             style: styles.headerSearchClear,
+            testID: `${_testIDs.JOTAI_TEST_ID}-search-clear`,
+            accessibilityRole: "button",
+            accessibilityLabel: "Close search",
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
               size: 14,
               color: _sharedUi.night.color.textSecondary
@@ -310,12 +389,16 @@ function JotaiModal({
             label: `Events${displayedChanges.length > 0 ? ` (${displayedChanges.length})` : ""}`
           }],
           activeTab: activeTab,
-          onTabChange: handleTabChange
+          onTabChange: handleTabChange,
+          testIDPrefix: `${_testIDs.JOTAI_TEST_ID}-tab`
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
           onPress: () => setIsSearchActive(true),
           style: styles.headerActionButton,
+          testID: `${_testIDs.JOTAI_TEST_ID}-search-open`,
+          accessibilityRole: "button",
+          accessibilityLabel: "Search",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
             size: 14,
             color: _sharedUi.night.color.textSecondary
@@ -323,6 +406,9 @@ function JotaiModal({
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
           onPress: () => setShowFilters(true),
           style: [styles.headerActionButton, hasActiveFilters && styles.headerActionButtonActive],
+          testID: `${_testIDs.JOTAI_TEST_ID}-filters-open`,
+          accessibilityRole: "button",
+          accessibilityLabel: "Filters",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Filter, {
             size: 14,
             color: hasActiveFilters ? _sharedUi.night.color.accent : _sharedUi.night.color.textSecondary
@@ -330,20 +416,24 @@ function JotaiModal({
         }), activeTab === "atoms" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {
           value: getAtomsSnapshot,
           disabled: displayedAtoms.length === 0,
-          buttonStyle: styles.headerActionButton
+          buttonStyle: styles.headerActionButton,
+          testID: `${_testIDs.JOTAI_TEST_ID}-copy`
         }), activeTab === "events" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {
             value: getEventsSnapshot,
             disabled: displayedChanges.length === 0,
-            buttonStyle: styles.headerActionButton
+            buttonStyle: styles.headerActionButton,
+            testID: `${_testIDs.JOTAI_TEST_ID}-copy`
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PowerToggleButton, {
             isEnabled: isEnabled,
             onToggle: toggleCapture,
-            accessibilityLabel: "Toggle Jotai atom capture"
+            accessibilityLabel: "Toggle Jotai atom capture",
+            testID: `${_testIDs.JOTAI_TEST_ID}-power`
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarClearButton, {
             onPress: clearChanges,
             disabled: displayedChanges.length === 0,
-            buttonStyle: styles.headerActionButton
+            buttonStyle: styles.headerActionButton,
+            testID: `${_testIDs.JOTAI_TEST_ID}-clear`
           })]
         })]
       })]
@@ -373,18 +463,20 @@ function JotaiModal({
     }
     if (selectedHistoryAtom) {
       return activeChanges.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+        testID: `${_testIDs.JOTAI_TEST_ID}-history-list`,
         data: activeChanges,
         renderItem: renderItem,
         keyExtractor: keyExtractor,
         contentContainerStyle: styles.listContent,
         showsVerticalScrollIndicator: true,
-        removeClippedSubviews: true,
+        removeClippedSubviews: CLIP_OFFSCREEN_CELLS,
         initialNumToRender: 12,
         maxToRenderPerBatch: 8,
         windowSize: 5,
         updateCellsBatchingPeriod: 50
       }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.emptyState,
+        testID: `${_testIDs.JOTAI_TEST_ID}-history-empty`,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Box, {
           size: 32,
           color: _sharedUi.night.color.textTertiary
@@ -397,12 +489,39 @@ function JotaiModal({
         })]
       });
     }
+
+    // Atom detail — live editor + details + read-only tree. After history in
+    // this chain for the same reason as the header: history stacks OVER the
+    // detail screen it was opened from.
+    if (selectedAtomLabel) {
+      const selectedAtom = atoms.find(a => a.label === selectedAtomLabel) ?? null;
+      return selectedAtom ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_JotaiAtomValueDetailContent.JotaiAtomValueDetailContent, {
+        atom: selectedAtom,
+        onViewHistory: handleViewHistory
+      }) :
+      /*#__PURE__*/
+      // The atom fell out of the registry mid-look (a remote mirror
+      // rebuilding, a dev reload). Say so rather than rendering nothing.
+      (0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.emptyState,
+        testID: `${_testIDs.JOTAI_TEST_ID}-atom-detail-gone`,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Box, {
+          size: 32,
+          color: _sharedUi.night.color.textTertiary
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.emptyTitle,
+          children: "Atom no longer registered"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+          style: styles.emptyText,
+          children: [selectedAtomLabel, " is not in the registry any more."]
+        })]
+      });
+    }
     if (activeTab === "atoms") {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_JotaiAtomBrowser.JotaiAtomBrowser, {
         atoms: displayedAtoms,
         searchQuery: searchText,
-        onViewHistory: handleViewHistory,
-        onAtomExpand: onAtomExpand
+        onOpenAtom: handleOpenAtom
       });
     }
 
@@ -410,6 +529,7 @@ function JotaiModal({
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [!isEnabled && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.disabledBanner,
+        testID: `${_testIDs.JOTAI_TEST_ID}-banner-disabled`,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Power, {
           size: 14,
           color: _sharedUi.night.color.warning
@@ -421,8 +541,11 @@ function JotaiModal({
         style: styles.lockedBanner,
         onPress: handleUpgradePress,
         activeOpacity: 0.8,
+        testID: `${_testIDs.JOTAI_TEST_ID}-locked`,
+        accessibilityRole: "button",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
           style: styles.lockedText,
+          testID: `${_testIDs.JOTAI_TEST_ID}-locked-text`,
           children: [lockedChangeCount, " older", " ", lockedChangeCount === 1 ? "change" : "changes", " locked"]
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: styles.upgradeBadge,
@@ -433,12 +556,13 @@ function JotaiModal({
         })]
       }), visibleChanges.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
         ref: flatListRef,
+        testID: `${_testIDs.JOTAI_TEST_ID}-list`,
         data: visibleChanges,
         renderItem: renderItem,
         keyExtractor: keyExtractor,
         contentContainerStyle: styles.listContent,
         showsVerticalScrollIndicator: true,
-        removeClippedSubviews: true,
+        removeClippedSubviews: CLIP_OFFSCREEN_CELLS,
         initialNumToRender: 12,
         maxToRenderPerBatch: 8,
         windowSize: 5,
@@ -460,7 +584,18 @@ function JotaiModal({
 
   // 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");
+  //
+  // The ATOM BROWSER owns its scrolling too, which is not just symmetry. Its
+  // root is a `flex: 1` ScrollView, and a `flex: 1` box inside JsModal's
+  // wrapper (`contentContainerStyle: { flexGrow: 1 }`) resolves against the
+  // CONTENT rather than the viewport — so nested, the browser's scroller grows
+  // to the full height of its rows, never scrolls, and the wrapper scrolls
+  // instead. A person cannot tell the difference; automation can, because the
+  // scroller Detox is handed reports a frame taller than the sheet and every
+  // scroll start point it computes lands in the clipped part ("view is not
+  // scrollable at the given start point"). Owning the scroll gives the browser
+  // a bounded height and one scroller with a handle on it.
+  const listOwnsScroll = !showFilters && !(selectedChange && selectedChangeIndex !== null) && (selectedHistoryAtom != null || activeTab === "events" || activeTab === "atoms");
   const body = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: styles.container,
     children: renderContent()
@@ -479,6 +614,7 @@ function JotaiModal({
         style: styles.inlineRoot,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: styles.inlineHeader,
+          ..._sharedUi.windowDragProps,
           children: renderHeaderContent()
         }), body, footerNode]
       }), upgradeModal]

package/lib/commonjs/jotai/utils/jotaiStateStore.js

@@ -277,7 +277,8 @@ class JotaiStateStore {
         label: atom.label,
         changeCount: atom.changeCount,
         color: atom.color,
-        currentValue
+        currentValue,
+        writeKind: atom.writeKind
       };
     });
   }
@@ -332,7 +333,10 @@ class JotaiStateStore {
         label: snapshot.label,
         changeCount: snapshot.changeCount,
         color: snapshot.color,
-        getValue: () => currentValue
+        getValue: () => currentValue,
+        // No setValue: the mirror has no wire back to the device from
+        // this entry (yet) — the detail screen renders read-only there.
+        writeKind: snapshot.writeKind
       }];
     }));
     this.notifyListeners();
@@ -369,14 +373,15 @@ class JotaiStateStore {
 
   // ---- Atom Registry ----
 
-  registerAtom(label, getValue, setValue) {
+  registerAtom(label, getValue, setValue, writeKind) {
     if (this.atoms.has(label)) return;
     const atomInfo = {
       label,
       changeCount: 0,
       color: getAtomColor(label),
       getValue,
-      setValue
+      setValue,
+      writeKind
     };
     this.atoms.set(label, atomInfo);
     this.notifyAtomListeners();

package/lib/commonjs/jotai/utils/testIDs.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.JOTAI_TEST_ID = void 0;
+exports.atomRowTestID = atomRowTestID;
+exports.buildChangeRowTestIDs = buildChangeRowTestIDs;
+exports.changeRowTestID = changeRowTestID;
+exports.slugForTestID = slugForTestID;
+/**
+ * Jotai tool test handles.
+ *
+ * Every tappable and every value the e2e suite reads back is addressed
+ * `buoy-jotai-<thing>`. Two rules need explaining, and the second is the one
+ * this tool does not share with any other.
+ *
+ * **A change row's handle carries an ORDINAL, and it counts per ATOM.** Same
+ * reason as the Zustand tool: an atom a screen writes to fifty times produces
+ * fifty separate, equally real rows, and addressing them by label alone would
+ * give fifty views one handle — Detox fails a *matcher* that hits more than
+ * one element, so the suite would break on `toExist()` before any assertion,
+ * with an error that says nothing about duplicate changes. The handle is
+ * `buoy-jotai-row-<slug(atomLabel)>-<n>`, n counting back from the newest row
+ * for that atom (1 = newest). Deliberately relative: an atom change has no
+ * identity a host could know in advance, and what a test CAN know is "the
+ * write I just fired is the newest change to that atom". Read and tap in one
+ * beat — a row's ordinal moves the instant another change lands.
+ *
+ * **The ordinal is per ATOM, and one write can move several atoms.** This is
+ * where jotai differs from every store-shaped tool. Atoms form a dependency
+ * graph, and this tool watches NODES: a single `set` on a primitive atom
+ * notifies every mounted derived atom whose value actually moved, so one
+ * press can add a row under three different labels — and add nothing at all
+ * under a fourth whose recomputed value happened to be unchanged. Counting
+ * ordinals across the whole list would make a row's handle depend on how many
+ * *other* atoms the write happened to touch, which is exactly the thing a
+ * test of a graph must not assume.
+ *
+ * **An atom row's handle does NOT carry an ordinal.** An atom is registered
+ * once under a label that is unique by construction
+ * (`jotaiStateStore.registerAtom` returns early on a label it already holds,
+ * and `watchAtoms` marks the atom with a per-label symbol), so
+ * `buoy-jotai-atom-<slug(label)>` is as stable as the registration itself —
+ * and unlike a change, it is a thing the host knows the name of before the
+ * app has booted.
+ *
+ * The suite mirrors these rules in CommonJS (`example-dev-build/utils/
+ * jotaiBench.js`) and asserts the two agree — Detox runs in Node on the host
+ * and cannot import TypeScript.
+ */
+
+/** Prefix every handle in this tool shares. */
+const JOTAI_TEST_ID = exports.JOTAI_TEST_ID = "buoy-jotai";
+
+/** `jbenchCount` → `jbenchcount`. Shared with every Buoy tool. */
+function slugForTestID(value) {
+  return String(value ?? "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "") || "unknown";
+}
+
+/**
+ * Handle for one change row: `buoy-jotai-row-jbenchcount-1`.
+ *
+ * `ordinal` is 1-based and counts back from the newest row for this atom.
+ */
+function changeRowTestID(atomLabel, ordinal) {
+  return `${JOTAI_TEST_ID}-row-${slugForTestID(atomLabel)}-${ordinal}`;
+}
+
+/** Handle for one atom row in the browser: `buoy-jotai-atom-jbenchcount`. */
+function atomRowTestID(atomLabel) {
+  return `${JOTAI_TEST_ID}-atom-${slugForTestID(atomLabel)}`;
+}
+
+/**
+ * Row handle per change id for one rendered list, newest-first.
+ *
+ * Built once for the whole list rather than per row, because an ordinal is a
+ * fact about the list and a row cannot compute its own.
+ */
+function buildChangeRowTestIDs(changes) {
+  const seen = new Map();
+  const handles = new Map();
+  for (const change of changes) {
+    const ordinal = (seen.get(change.atomLabel) ?? 0) + 1;
+    seen.set(change.atomLabel, ordinal);
+    handles.set(change.id, changeRowTestID(change.atomLabel, ordinal));
+  }
+  return handles;
+}

package/lib/commonjs/jotai/utils/watchAtoms.js

@@ -7,6 +7,7 @@ exports.isAtomWatched = isAtomWatched;
 exports.watchAtoms = watchAtoms;
 exports.watchDefaultStoreAtoms = watchDefaultStoreAtoms;
 var _jotaiStateStore = require("./jotaiStateStore");
+var _writeSemantics = require("./writeSemantics");
 /**
  * Buoy Jotai DevTools — Atom instrumentation
  *
@@ -65,7 +66,8 @@ function watchAtoms(store, atoms, options) {
     // function — primitive atoms get a default one, read-only derived atoms
     // have none). Deriveds used to get a setter that threw inside jotai at
     // set time; now they're correctly reported as read-only up front.
-    const setter = store.set && typeof atom.write === "function" ? value => {
+    const isWritable = typeof atom.write === "function";
+    const setter = store.set && isWritable ? value => {
       store.set(atom, value);
     } : undefined;
     _jotaiStateStore.jotaiStateStore.registerAtom(label, () => {
@@ -74,7 +76,11 @@ function watchAtoms(store, atoms, options) {
       } catch {
         return undefined;
       }
-    }, setter);
+    }, setter,
+    // "value" = jotai's shared defaultWrite (a primitive atom: store.set
+    // stores the value). "action" = a custom write receiving the value as
+    // its argument — still writable, but the editor says so.
+    isWritable ? (0, _writeSemantics.classifyAtomWrite)(atom) : undefined);
 
     // Record initial value
     if (enabled) {

package/lib/commonjs/jotai/utils/writeSemantics.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.classifyAtomWrite = classifyAtomWrite;
+var _vanilla = require("jotai/vanilla");
+/**
+ * What does `store.set(atom, x)` DO with x?
+ *
+ * jotai's `atom(initialValue)` gives every primitive atom the SAME shared
+ * `defaultWrite` function (see jotai/src/vanilla/atom.ts): it stores x as the
+ * atom's new value (or calls it with the previous value when x is a
+ * function). Any other `write` is app code — `atomWithReducer` receives
+ * ACTIONS, `atomWithStorage` persists as a side effect, a custom write can do
+ * anything — so a raw value handed to `store.set` may not mean "set to this".
+ *
+ * The tool's editor needs that distinction to be honest: a "value" atom edits
+ * like plain data; an "action" atom is still writable (the MCP `setAtom` and
+ * Time Machine restore already write to them) but the editor says what the
+ * write actually does.
+ *
+ * Detection: a probe primitive atom exposes this jotai instance's
+ * `defaultWrite`; identity match is exact. The `toString` fallback covers an
+ * app that somehow bundles a second jotai copy (its atoms carry a different —
+ * but textually identical — defaultWrite instance). An unrecognized write
+ * classifies as "action", which only makes the editor more cautious.
+ */
+
+const probe = (0, _vanilla.atom)(null);
+const DEFAULT_WRITE = probe.write;
+const DEFAULT_WRITE_SOURCE = typeof DEFAULT_WRITE === "function" ? String(DEFAULT_WRITE) : null;
+
+/** Classify a writable atom's write. Call only when `atom.write` exists. */
+function classifyAtomWrite(candidate) {
+  const atomLike = candidate;
+  const write = atomLike?.write;
+  if (typeof write !== "function") return "action";
+  if (write === DEFAULT_WRITE) return "value";
+  // Dual-copy fallback: a primitive atom from another jotai instance holds
+  // its own value (`init` present) and its write's source is the library's
+  // defaultWrite verbatim.
+  if (atomLike !== null && "init" in atomLike && DEFAULT_WRITE_SOURCE !== null && String(write) === DEFAULT_WRITE_SOURCE) {
+    return "value";
+  }
+  return "action";
+}

package/lib/module/index.js

@@ -66,6 +66,7 @@ export { useJotaiAtomChanges } from "./jotai/hooks/useJotaiAtomChanges";
 export { JotaiModal, JotaiToolView } from "./jotai/components/JotaiModal";
 export { JotaiAtomChangeItem } from "./jotai/components/JotaiAtomChangeItem";
 export { JotaiAtomDetailContent, JotaiAtomDetailFooter } from "./jotai/components/JotaiAtomDetailContent";
+export { JotaiAtomValueDetailContent } from "./jotai/components/JotaiAtomValueDetailContent";
 export { JotaiIcon, JOTAI_ICON_COLOR } from "./jotai/components/JotaiIcon";
 
 // =============================================================================