@buoy-gg/jotai 7.0.30 → 7.0.32

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

@@ -10,27 +10,42 @@
 
 import { useState, useMemo, useRef, useCallback, useEffect } from "react";
 import { View, Text, StyleSheet, FlatList, TextInput, TouchableOpacity } from "react-native";
-import { JsModal, ModalHeader, TabSelector, macOSColors, night, Search, Filter, Power, X, Box, devToolsStorageKeys, ProUpgradeModal, PowerToggleButton, ToolbarCopyButton, ToolbarClearButton, truncatePayload, TickProvider, useLimit } from "@buoy-gg/shared-ui";
+import { JsModal, ModalHeader, TabSelector, macOSColors, night, Search, Filter, Power, X, Box, devToolsStorageKeys, ProUpgradeModal, PowerToggleButton, ToolbarCopyButton, ToolbarClearButton, truncatePayload, TickProvider, useLimit, windowDragProps } from "@buoy-gg/shared-ui";
 import { useIsPro } from "@buoy-gg/license";
 import { useJotaiAtomChanges } from "../hooks/useJotaiAtomChanges";
 import { JotaiAtomChangeItem } from "./JotaiAtomChangeItem";
 import { JotaiAtomDetailContent, JotaiAtomDetailFooter } from "./JotaiAtomDetailContent";
 import { JotaiAtomBrowser } from "./JotaiAtomBrowser";
+import { JotaiAtomValueDetailContent } from "./JotaiAtomValueDetailContent";
 import { JotaiEventFilterView } from "./JotaiEventFilterView";
+import { JOTAI_TEST_ID, buildChangeRowTestIDs } from "../utils/testIDs";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * 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__*/_jsxs(View, {
     style: styles.emptyState,
+    testID: `${JOTAI_TEST_ID}-empty`,
     children: [/*#__PURE__*/_jsx(Box, {
       size: 32,
       color: night.color.textTertiary
     }), /*#__PURE__*/_jsx(Text, {
       style: styles.emptyTitle,
+      testID: `${JOTAI_TEST_ID}-empty-title`,
       children: "No atom changes"
     }), /*#__PURE__*/_jsx(Text, {
       style: styles.emptyText,
+      testID: `${JOTAI_TEST_ID}-empty-text`,
       children: isEnabled ? "Atom changes will appear here as values update." : "Enable capture to start recording atom changes"
     })]
   });
@@ -53,6 +68,9 @@ export function JotaiModal({
   const [showProModal, setShowProModal] = useState(false);
   const [activeTab, setActiveTab] = useState(initialTab ?? "atoms");
   const [selectedHistoryAtom, setSelectedHistoryAtom] = 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] = useState(null);
   const [showFilters, setShowFilters] = useState(false);
   const [ignoredPatterns, setIgnoredPatterns] = useState(new Set());
   const {
@@ -137,6 +155,16 @@ export function JotaiModal({
       }));
     }
   };
+
+  /** Drop the query AND put the header back. The X, and only the X. */
+  const closeSearch = useCallback(() => {
+    setSearchText("");
+    setFilter(prev => ({
+      ...prev,
+      searchText: ""
+    }));
+    setIsSearchActive(false);
+  }, [setFilter]);
   const handleChangePress = useCallback(change => {
     setSelectedChangeId(change.id);
   }, []);
@@ -158,6 +186,16 @@ export function JotaiModal({
     setSelectedHistoryAtom(null);
     setSelectedChangeId(null);
   }, []);
+  const handleOpenAtom = 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 = useCallback(() => {
+    setSelectedAtomLabel(null);
+  }, []);
   const getAtomsSnapshot = useCallback(() => {
     return displayedAtoms.reduce((acc, atom) => {
       try {
@@ -216,12 +254,19 @@ export function JotaiModal({
     setIsSearchActive(false);
   }, [searchText, setFilter]);
   const keyExtractor = 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 = useMemo(() => buildChangeRowTestIDs(activeChanges), [activeChanges]);
   const renderItem = useCallback(({
     item
   }) => /*#__PURE__*/_jsx(JotaiAtomChangeItem, {
     change: item,
-    onPress: handleChangePress
-  }), [handleChangePress]);
+    onPress: handleChangePress,
+    testID: rowTestIDs.get(item.id)
+  }), [handleChangePress, rowTestIDs]);
 
   // ---- Header ----
 
@@ -233,7 +278,8 @@ export function JotaiModal({
           onBack: () => setShowFilters(false)
         }), /*#__PURE__*/_jsx(ModalHeader.Content, {
           title: "Filters",
-          centered: true
+          centered: true,
+          testID: `${JOTAI_TEST_ID}-filters-title`
         })]
       });
     }
@@ -243,7 +289,8 @@ export function JotaiModal({
           onBack: handleBack
         }), /*#__PURE__*/_jsx(ModalHeader.Content, {
           title: `${selectedChange.atomLabel}/${selectedChange.category}`,
-          centered: true
+          centered: true,
+          testID: `${JOTAI_TEST_ID}-detail-title`
         })]
       });
     }
@@ -253,16 +300,33 @@ export function JotaiModal({
           onBack: handleBackFromHistory
         }), /*#__PURE__*/_jsx(ModalHeader.Content, {
           title: `${selectedHistoryAtom} History`,
-          centered: true
+          centered: true,
+          testID: `${JOTAI_TEST_ID}-history-title`
         }), /*#__PURE__*/_jsx(ModalHeader.Actions, {
           children: /*#__PURE__*/_jsx(ToolbarCopyButton, {
             value: getHistorySnapshot,
             disabled: activeChanges.length === 0,
-            buttonStyle: styles.headerActionButton
+            buttonStyle: styles.headerActionButton,
+            testID: `${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__*/_jsxs(ModalHeader, {
+        children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
+          onBack: handleBackFromAtom
+        }), /*#__PURE__*/_jsx(ModalHeader.Content, {
+          title: selectedAtomLabel,
+          centered: true,
+          testID: `${JOTAI_TEST_ID}-atom-detail-title`
+        })]
+      });
+    }
     return /*#__PURE__*/_jsxs(ModalHeader, {
       children: [onBack && /*#__PURE__*/_jsx(ModalHeader.Navigation, {
         onBack: onBack
@@ -270,27 +334,42 @@ export function JotaiModal({
         title: "",
         children: isSearchActive ? /*#__PURE__*/_jsxs(View, {
           style: styles.headerSearchContainer,
+          testID: `${JOTAI_TEST_ID}-search`,
           children: [/*#__PURE__*/_jsx(Search, {
             size: 14,
             color: night.color.textSecondary
           }), /*#__PURE__*/_jsx(TextInput, {
             ref: searchInputRef,
+            testID: `${JOTAI_TEST_ID}-search-field`,
             style: styles.headerSearchInput,
             placeholder: activeTab === "atoms" ? "Search atoms..." : "Search events...",
             placeholderTextColor: 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__*/_jsx(TouchableOpacity, {
-            onPress: () => {
-              handleSearch("");
-              setIsSearchActive(false);
-            },
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            onPress: closeSearch,
             style: styles.headerSearchClear,
+            testID: `${JOTAI_TEST_ID}-search-clear`,
+            accessibilityRole: "button",
+            accessibilityLabel: "Close search",
             children: /*#__PURE__*/_jsx(X, {
               size: 14,
               color: night.color.textSecondary
@@ -305,12 +384,16 @@ export function JotaiModal({
             label: `Events${displayedChanges.length > 0 ? ` (${displayedChanges.length})` : ""}`
           }],
           activeTab: activeTab,
-          onTabChange: handleTabChange
+          onTabChange: handleTabChange,
+          testIDPrefix: `${JOTAI_TEST_ID}-tab`
         })
       }), /*#__PURE__*/_jsxs(ModalHeader.Actions, {
         children: [/*#__PURE__*/_jsx(TouchableOpacity, {
           onPress: () => setIsSearchActive(true),
           style: styles.headerActionButton,
+          testID: `${JOTAI_TEST_ID}-search-open`,
+          accessibilityRole: "button",
+          accessibilityLabel: "Search",
           children: /*#__PURE__*/_jsx(Search, {
             size: 14,
             color: night.color.textSecondary
@@ -318,6 +401,9 @@ export function JotaiModal({
         }), /*#__PURE__*/_jsx(TouchableOpacity, {
           onPress: () => setShowFilters(true),
           style: [styles.headerActionButton, hasActiveFilters && styles.headerActionButtonActive],
+          testID: `${JOTAI_TEST_ID}-filters-open`,
+          accessibilityRole: "button",
+          accessibilityLabel: "Filters",
           children: /*#__PURE__*/_jsx(Filter, {
             size: 14,
             color: hasActiveFilters ? night.color.accent : night.color.textSecondary
@@ -325,20 +411,24 @@ export function JotaiModal({
         }), activeTab === "atoms" && /*#__PURE__*/_jsx(ToolbarCopyButton, {
           value: getAtomsSnapshot,
           disabled: displayedAtoms.length === 0,
-          buttonStyle: styles.headerActionButton
+          buttonStyle: styles.headerActionButton,
+          testID: `${JOTAI_TEST_ID}-copy`
         }), activeTab === "events" && /*#__PURE__*/_jsxs(_Fragment, {
           children: [/*#__PURE__*/_jsx(ToolbarCopyButton, {
             value: getEventsSnapshot,
             disabled: displayedChanges.length === 0,
-            buttonStyle: styles.headerActionButton
+            buttonStyle: styles.headerActionButton,
+            testID: `${JOTAI_TEST_ID}-copy`
           }), /*#__PURE__*/_jsx(PowerToggleButton, {
             isEnabled: isEnabled,
             onToggle: toggleCapture,
-            accessibilityLabel: "Toggle Jotai atom capture"
+            accessibilityLabel: "Toggle Jotai atom capture",
+            testID: `${JOTAI_TEST_ID}-power`
           }), /*#__PURE__*/_jsx(ToolbarClearButton, {
             onPress: clearChanges,
             disabled: displayedChanges.length === 0,
-            buttonStyle: styles.headerActionButton
+            buttonStyle: styles.headerActionButton,
+            testID: `${JOTAI_TEST_ID}-clear`
           })]
         })]
       })]
@@ -368,18 +458,20 @@ export function JotaiModal({
     }
     if (selectedHistoryAtom) {
       return activeChanges.length > 0 ? /*#__PURE__*/_jsx(FlatList, {
+        testID: `${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__*/_jsxs(View, {
         style: styles.emptyState,
+        testID: `${JOTAI_TEST_ID}-history-empty`,
         children: [/*#__PURE__*/_jsx(Box, {
           size: 32,
           color: night.color.textTertiary
@@ -392,12 +484,39 @@ export 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__*/_jsx(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.
+      _jsxs(View, {
+        style: styles.emptyState,
+        testID: `${JOTAI_TEST_ID}-atom-detail-gone`,
+        children: [/*#__PURE__*/_jsx(Box, {
+          size: 32,
+          color: night.color.textTertiary
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.emptyTitle,
+          children: "Atom no longer registered"
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: styles.emptyText,
+          children: [selectedAtomLabel, " is not in the registry any more."]
+        })]
+      });
+    }
     if (activeTab === "atoms") {
       return /*#__PURE__*/_jsx(JotaiAtomBrowser, {
         atoms: displayedAtoms,
         searchQuery: searchText,
-        onViewHistory: handleViewHistory,
-        onAtomExpand: onAtomExpand
+        onOpenAtom: handleOpenAtom
       });
     }
 
@@ -405,6 +524,7 @@ export function JotaiModal({
     return /*#__PURE__*/_jsxs(_Fragment, {
       children: [!isEnabled && /*#__PURE__*/_jsxs(View, {
         style: styles.disabledBanner,
+        testID: `${JOTAI_TEST_ID}-banner-disabled`,
         children: [/*#__PURE__*/_jsx(Power, {
           size: 14,
           color: night.color.warning
@@ -416,8 +536,11 @@ export function JotaiModal({
         style: styles.lockedBanner,
         onPress: handleUpgradePress,
         activeOpacity: 0.8,
+        testID: `${JOTAI_TEST_ID}-locked`,
+        accessibilityRole: "button",
         children: [/*#__PURE__*/_jsxs(Text, {
           style: styles.lockedText,
+          testID: `${JOTAI_TEST_ID}-locked-text`,
           children: [lockedChangeCount, " older", " ", lockedChangeCount === 1 ? "change" : "changes", " locked"]
         }), /*#__PURE__*/_jsx(View, {
           style: styles.upgradeBadge,
@@ -428,12 +551,13 @@ export function JotaiModal({
         })]
       }), visibleChanges.length > 0 ? /*#__PURE__*/_jsx(FlatList, {
         ref: flatListRef,
+        testID: `${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,
@@ -455,7 +579,18 @@ export 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__*/_jsx(View, {
     style: styles.container,
     children: renderContent()
@@ -474,6 +609,7 @@ export function JotaiModal({
         style: styles.inlineRoot,
         children: [/*#__PURE__*/_jsx(View, {
           style: styles.inlineHeader,
+          ...windowDragProps,
           children: renderHeaderContent()
         }), body, footerNode]
       }), upgradeModal]

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

@@ -273,7 +273,8 @@ class JotaiStateStore {
         label: atom.label,
         changeCount: atom.changeCount,
         color: atom.color,
-        currentValue
+        currentValue,
+        writeKind: atom.writeKind
       };
     });
   }
@@ -328,7 +329,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();
@@ -365,14 +369,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/module/jotai/utils/testIDs.js

@@ -0,0 +1,82 @@
+"use strict";
+
+/**
+ * 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. */
+export const JOTAI_TEST_ID = "buoy-jotai";
+
+/** `jbenchCount` → `jbenchcount`. Shared with every Buoy tool. */
+export 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.
+ */
+export function changeRowTestID(atomLabel, ordinal) {
+  return `${JOTAI_TEST_ID}-row-${slugForTestID(atomLabel)}-${ordinal}`;
+}
+
+/** Handle for one atom row in the browser: `buoy-jotai-atom-jbenchcount`. */
+export 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.
+ */
+export 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/module/jotai/utils/watchAtoms.js

@@ -10,6 +10,7 @@
  */
 
 import { jotaiStateStore } from "./jotaiStateStore";
+import { classifyAtomWrite } from "./writeSemantics";
 
 /** Any Jotai atom — alias for Atom<unknown> for readability */
 
@@ -60,7 +61,8 @@ export 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.registerAtom(label, () => {
@@ -69,7 +71,11 @@ export 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 ? classifyAtomWrite(atom) : undefined);
 
     // Record initial value
     if (enabled) {

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

@@ -0,0 +1,43 @@
+"use strict";
+
+/**
+ * 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.
+ */
+
+import { atom as probeAtom } from "jotai/vanilla";
+const probe = probeAtom(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. */
+export 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/typescript/index.d.ts

@@ -40,6 +40,7 @@ export type { UseJotaiAtomChangesResult } from "./jotai/hooks/useJotaiAtomChange
 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";
 export { jotaiSyncAdapter } from "./jotai/sync/jotaiSyncAdapter";
 export type { JotaiModalProps, JotaiDetailViewMode, JotaiAtomChange, JotaiAtomInfo, JotaiAtomSnapshot, JotaiFilter, AtomChangeCategory, WatchAtomsOptions, } from "./jotai/types";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAGH,OAAO,gCAAgC,CAAC;AAKxC,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAK5D,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAKtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAKlE,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,YAAY,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAK9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AACxE,YAAY,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAOnF,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC1E,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAC7E,OAAO,EACL,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,2CAA2C,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAK3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAKjE,YAAY,EACV,eAAe,EACf,mBAAmB,EACnB,eAAe,EACf,aAAa,EACb,iBAAiB,EACjB,WAAW,EACX,kBAAkB,EAClB,iBAAiB,GAClB,MAAM,eAAe,CAAC;AAKvB,gBAAgB;AAChB,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAGH,OAAO,gCAAgC,CAAC;AAKxC,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAK5D,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAKtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAKlE,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,YAAY,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAK9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AACxE,YAAY,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAOnF,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC1E,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAC7E,OAAO,EACL,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,2CAA2C,CAAC;AACnD,OAAO,EAAE,2BAA2B,EAAE,MAAM,gDAAgD,CAAC;AAC7F,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAK3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAKjE,YAAY,EACV,eAAe,EACf,mBAAmB,EACnB,eAAe,EACf,aAAa,EACb,iBAAiB,EACjB,WAAW,EACX,kBAAkB,EAClB,iBAAiB,GAClB,MAAM,eAAe,CAAC;AAKvB,gBAAgB;AAChB,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC"}

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

@@ -2,16 +2,17 @@
  * JotaiAtomBrowser
  *
  * Atoms tab — shows all registered Jotai atoms and their current value.
- * Mirrors ZustandStoreBrowser.tsx from @buoy-gg/zustand.
+ * Mirrors ZustandStoreBrowser.tsx from @buoy-gg/zustand: tapping a card
+ * NAVIGATES to the atom's detail screen (live editor + details + read-only
+ * tree) rather than expanding in place — the modal owns that selection.
  */
 import type { JotaiAtomInfo } from "../types";
 interface JotaiAtomBrowserProps {
     atoms: JotaiAtomInfo[];
     searchQuery: string;
-    onViewHistory: (atomLabel: string) => void;
-    /** Fired when an atom row is expanded (not when collapsed). */
-    onAtomExpand?: (label: string) => void;
+    /** Open an atom's detail screen (live editor). */
+    onOpenAtom: (label: string) => void;
 }
-export declare function JotaiAtomBrowser({ atoms, searchQuery, onViewHistory, onAtomExpand, }: JotaiAtomBrowserProps): import("react").JSX.Element;
+export declare function JotaiAtomBrowser({ atoms, searchQuery, onOpenAtom, }: JotaiAtomBrowserProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=JotaiAtomBrowser.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"JotaiAtomBrowser.d.ts","sourceRoot":"","sources":["../../../../src/jotai/components/JotaiAtomBrowser.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAoBH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAG9C,UAAU,qBAAqB;IAC7B,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,+DAA+D;IAC/D,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAgHD,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,WAAW,EACX,aAAa,EACb,YAAY,GACb,EAAE,qBAAqB,+BAwFvB"}
+{"version":3,"file":"JotaiAtomBrowser.d.ts","sourceRoot":"","sources":["../../../../src/jotai/components/JotaiAtomBrowser.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAUH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAI9C,UAAU,qBAAqB;IAC7B,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,kDAAkD;IAClD,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAyDD,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,WAAW,EACX,UAAU,GACX,EAAE,qBAAqB,+BAuFvB"}

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

@@ -7,6 +7,11 @@ import type { JotaiAtomChange } from "../types";
 interface JotaiAtomChangeItemProps {
     change: JotaiAtomChange;
     onPress: (change: JotaiAtomChange) => void;
+    /**
+     * Row handle, built for the whole list by `buildChangeRowTestIDs` — a row
+     * carries an ordinal it cannot compute on its own. See ../utils/testIDs.ts.
+     */
+    testID?: string;
 }
 export declare const JotaiAtomChangeItem: import("react").NamedExoticComponent<JotaiAtomChangeItemProps>;
 export {};

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;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"}
+{"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;IAC3C;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAsDD,eAAO,MAAM,mBAAmB,gEAoD9B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"JotaiAtomDetailContent.d.ts","sourceRoot":"","sources":["../../../../src/jotai/components/JotaiAtomDetailContent.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAA+C,MAAM,OAAO,CAAC;AA0BpE,OAAO,KAAK,EACV,eAAe,EAEf,mBAAmB,EACpB,MAAM,UAAU,CAAC;AAiQlB,UAAU,2BAA2B;IACnC,MAAM,EAAE,eAAe,CAAC;IACxB,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;OAGG;IACH,WAAW,CAAC,EAAE,mBAAmB,CAAC;CACnC;AAED,wBAAgB,sBAAsB,CAAC,EACrC,MAAM,EACN,OAAO,EACP,aAAa,EACb,aAAa,EACb,qBAA6B,EAC7B,WAAsB,GACvB,EAAE,2BAA2B,qBA2J7B;AAED,wBAAgB,qBAAqB,CAAC,EACpC,MAAM,EACN,OAAO,EACP,aAAa,EACb,aAAa,GACd,EAAE;IACD,MAAM,EAAE,eAAe,CAAC;IACxB,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,4BAcA"}
+{"version":3,"file":"JotaiAtomDetailContent.d.ts","sourceRoot":"","sources":["../../../../src/jotai/components/JotaiAtomDetailContent.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAA+C,MAAM,OAAO,CAAC;AA0BpE,OAAO,KAAK,EACV,eAAe,EAEf,mBAAmB,EACpB,MAAM,UAAU,CAAC;AAmSlB,UAAU,2BAA2B;IACnC,MAAM,EAAE,eAAe,CAAC;IACxB,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;OAGG;IACH,WAAW,CAAC,EAAE,mBAAmB,CAAC;CACnC;AAED,wBAAgB,sBAAsB,CAAC,EACrC,MAAM,EACN,OAAO,EACP,aAAa,EACb,aAAa,EACb,qBAA6B,EAC7B,WAAsB,GACvB,EAAE,2BAA2B,qBAgL7B;AAED,wBAAgB,qBAAqB,CAAC,EACpC,MAAM,EACN,OAAO,EACP,aAAa,EACb,aAAa,GACd,EAAE;IACD,MAAM,EAAE,eAAe,CAAC;IACxB,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,4BAcA"}