@buoy-gg/jotai 7.0.16 → 7.0.18

package/lib/commonjs/index.js

@@ -93,6 +93,7 @@ Object.defineProperty(exports, "watchDefaultStoreAtoms", {
     return _watchAtoms.watchDefaultStoreAtoms;
   }
 });
+require("./jotai/utils/snapshotProvider");
 var _preset = require("./preset");
 var _watchAtoms = require("./jotai/utils/watchAtoms");
 var _useJotaiAtomChanges = require("./jotai/hooks/useJotaiAtomChanges");

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

@@ -20,6 +20,9 @@ var _jsxRuntime = require("react/jsx-runtime");
 function getValuePreview(atom) {
   try {
     const value = atom.getValue();
+    if (value && typeof value === "object" && value.__buoyValueOnDevice === true) {
+      return "on device";
+    }
     if (value === undefined) return "undefined";
     if (value === null) return "null";
     if (Array.isArray(value)) {
@@ -125,7 +128,8 @@ function EmptyBrowserState() {
 function JotaiAtomBrowser({
   atoms,
   searchQuery,
-  onViewHistory
+  onViewHistory,
+  onAtomExpand
 }) {
   const [expandedAtom, setExpandedAtom] = (0, _react.useState)(null);
   const filteredAtoms = (0, _react.useMemo)(() => {
@@ -134,8 +138,12 @@ function JotaiAtomBrowser({
     return atoms.filter(a => a.label.toLowerCase().includes(search));
   }, [atoms, searchQuery]);
   const handleAtomPress = (0, _react.useCallback)(atom => {
-    setExpandedAtom(prev => prev === atom.label ? null : atom.label);
-  }, []);
+    setExpandedAtom(prev => {
+      const next = prev === atom.label ? null : atom.label;
+      if (next) onAtomExpand?.(atom.label);
+      return next;
+    });
+  }, [onAtomExpand]);
   if (filteredAtoms.length === 0 && !searchQuery) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyBrowserState, {});
   }

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

@@ -25,7 +25,6 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  */
 
 // ---- View Toggle ----
-
 const VIEW_CONFIGS = [{
   key: "change",
   label: "CHANGE",
@@ -277,9 +276,11 @@ function JotaiAtomDetailContent({
   changes,
   selectedIndex,
   onIndexChange,
-  disableInternalFooter = false
+  disableInternalFooter = false,
+  initialView = "change"
 }) {
-  const [activeView, setActiveView] = (0, _react.useState)("change");
+  // View state (initialView seeds it once; taps own it afterwards)
+  const [activeView, setActiveView] = (0, _react.useState)(initialView);
   const [diffMode, setDiffMode] = (0, _react.useState)("tree");
   const totalChanges = changes.length;
   const atomColor = _jotaiStateStore.jotaiStateStore.getAtomColor(change.atomLabel);

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

@@ -47,11 +47,16 @@ function JotaiModal({
   onBack,
   onMinimize,
   enableSharedModalDimensions = false,
-  inline = false
+  inline = false,
+  initialTab,
+  initialSelectedChangeId,
+  initialDetailView,
+  onChangeSelect,
+  onAtomExpand
 }) {
   const isPro = (0, _license.useIsPro)();
   const [showProModal, setShowProModal] = (0, _react.useState)(false);
-  const [activeTab, setActiveTab] = (0, _react.useState)("atoms");
+  const [activeTab, setActiveTab] = (0, _react.useState)(initialTab ?? "atoms");
   const [selectedHistoryAtom, setSelectedHistoryAtom] = (0, _react.useState)(null);
   const [showFilters, setShowFilters] = (0, _react.useState)(false);
   const [ignoredPatterns, setIgnoredPatterns] = (0, _react.useState)(new Set());
@@ -103,6 +108,30 @@ function JotaiModal({
   }, [selectedChangeId, activeChanges]);
   const selectedChange = selectedChangeIndex !== null ? activeChanges[selectedChangeIndex] : null;
 
+  // Notify the host on selection (keyed by change id so re-renders with the
+  // same selection don't re-fire; remote mirrors fetch atom values here).
+  const lastNotifiedSelectionRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (!onChangeSelect) return;
+    const id = selectedChange?.id ?? null;
+    if (id === null || id === lastNotifiedSelectionRef.current) return;
+    lastNotifiedSelectionRef.current = id;
+    onChangeSelect(selectedChange);
+  }, [selectedChange, onChangeSelect]);
+
+  // Deep link into a change's detail (see initialSelectedChangeId). Applied
+  // at most once per id, so the list re-rendering — or the user pressing Back
+  // — never re-opens it.
+  const appliedInitialSelectionRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (!initialSelectedChangeId) return;
+    if (appliedInitialSelectionRef.current === initialSelectedChangeId) return;
+    const exists = activeChanges.some(c => c.id === initialSelectedChangeId);
+    if (!exists) return;
+    appliedInitialSelectionRef.current = initialSelectedChangeId;
+    setSelectedChangeId(initialSelectedChangeId);
+  }, [initialSelectedChangeId, activeChanges]);
+
   // Search state
   const [searchText, setSearchText] = (0, _react.useState)("");
   const [isSearchActive, setIsSearchActive] = (0, _react.useState)(false);
@@ -343,7 +372,8 @@ function JotaiModal({
         changes: activeChanges,
         selectedIndex: selectedChangeIndex,
         onIndexChange: handleIndexChange,
-        disableInternalFooter: true
+        disableInternalFooter: true,
+        initialView: initialDetailView
       });
     }
     if (selectedHistoryAtom) {
@@ -376,7 +406,8 @@ function JotaiModal({
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_JotaiAtomBrowser.JotaiAtomBrowser, {
         atoms: displayedAtoms,
         searchQuery: searchText,
-        onViewHistory: handleViewHistory
+        onViewHistory: handleViewHistory,
+        onAtomExpand: onAtomExpand
       });
     }
 

package/lib/commonjs/jotai/sync/jotaiSyncAdapter.js

@@ -3,8 +3,62 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.jotaiSyncAdapter = void 0;
+exports.jotaiSyncAdapter = exports.VALUE_ON_DEVICE = void 0;
 var _jotaiStateStore = require("../utils/jotaiStateStore");
+/**
+ * Sentinel used in WIRE-FORM snapshots in place of raw prevValue/nextValue.
+ * Same hazard as redux/zustand: up to 200 changes × 2 values on every
+ * snapshot. Dashboards fetch values via `getChangeDetail`.
+ */
+const VALUE_ON_DEVICE = exports.VALUE_ON_DEVICE = Object.freeze({
+  __buoyValueOnDevice: true,
+  note: "Atom values stay on the device — fetched on demand via getChangeDetail / getAtomValue."
+});
+const MAX_CHANGE_DETAIL_BYTES = 8 * 1024 * 1024;
+const MAX_WIRE_PAYLOAD_BYTES = 16 * 1024;
+function jsonLongerThan(value, limit) {
+  let bytes = 0;
+  const stack = [value];
+  const seen = new Set();
+  while (stack.length > 0) {
+    if (bytes > limit) return true;
+    const v = stack.pop();
+    if (v === null || v === undefined) bytes += 4;else if (typeof v === "string") bytes += v.length + 2;else if (typeof v === "number") bytes += 8;else if (typeof v === "boolean") bytes += 5;else if (typeof v === "object") {
+      if (seen.has(v)) continue;
+      seen.add(v);
+      if (Array.isArray(v)) {
+        bytes += 2 + v.length;
+        for (let i = 0; i < v.length; i++) stack.push(v[i]);
+      } else {
+        bytes += 2;
+        for (const k in v) {
+          bytes += k.length + 4;
+          stack.push(v[k]);
+        }
+      }
+    } else bytes += 4;
+  }
+  return bytes > limit;
+}
+function toWireChange(change) {
+  return {
+    ...change,
+    prevValue: VALUE_ON_DEVICE,
+    nextValue: VALUE_ON_DEVICE
+  };
+}
+function toWireValue(value) {
+  try {
+    JSON.stringify(value);
+  } catch {
+    return VALUE_ON_DEVICE;
+  }
+  if (jsonLongerThan(value, MAX_WIRE_PAYLOAD_BYTES)) {
+    return VALUE_ON_DEVICE;
+  }
+  return value;
+}
+
 /**
  * Sync adapter for the jotai tool, consumed by @buoy-gg/external-sync's
  * `useExternalSync` (structurally matches its ToolSyncAdapter interface so
@@ -15,12 +69,19 @@ var _jotaiStateStore = require("../utils/jotaiStateStore");
  * already records. The snapshot carries both the change timeline and the
  * atom registry (with each atom's current value) so the dashboard can render
  * the atom browser.
+ *
+ * v2: change-log prevValue/nextValue are replaced with on-device markers.
+ * Dashboards fetch values via `getChangeDetail`. Oversized / unserializable
+ * `atoms[].currentValue` uses the same marker and is fetched via `getAtomValue`.
  */
 const jotaiSyncAdapter = exports.jotaiSyncAdapter = {
-  version: 1,
+  version: 2,
   getSnapshot: () => ({
-    changes: _jotaiStateStore.jotaiStateStore.getAtomChanges(),
-    atoms: _jotaiStateStore.jotaiStateStore.getAtomSnapshots()
+    changes: _jotaiStateStore.jotaiStateStore.getAtomChanges().map(toWireChange),
+    atoms: _jotaiStateStore.jotaiStateStore.getAtomSnapshots().map(atom => ({
+      ...atom,
+      currentValue: toWireValue(atom.currentValue)
+    }))
   }),
   subscribe: onChange => {
     const unsubscribeChanges = _jotaiStateStore.jotaiStateStore.subscribe(onChange);
@@ -34,6 +95,78 @@ const jotaiSyncAdapter = exports.jotaiSyncAdapter = {
     clearEvents: () => {
       _jotaiStateStore.jotaiStateStore.clearAtomChanges();
     },
+    /**
+     * On-demand detail: one change's real prevValue/nextValue.
+     * The per-snapshot stream stays value-free; this is the explicit,
+     * size-guarded channel for the detail pane.
+     */
+    getChangeDetail: params => {
+      const {
+        id
+      } = params ?? {};
+      if (!id) return {
+        found: false,
+        reason: "missing id"
+      };
+      const change = _jotaiStateStore.jotaiStateStore.getAtomChangeById(id);
+      if (!change) return {
+        found: false,
+        reason: "unknown id"
+      };
+      const cappedNote = {
+        __buoyTruncated: true,
+        note: `Exceeds the ${MAX_CHANGE_DETAIL_BYTES / (1024 * 1024)}MB detail limit — inspect it on-device.`
+      };
+      const cap = value => jsonLongerThan(value, MAX_CHANGE_DETAIL_BYTES) ? cappedNote : value;
+      return {
+        found: true,
+        id,
+        prevValue: cap(change.prevValue),
+        nextValue: cap(change.nextValue)
+      };
+    },
+    /**
+     * On-demand current value for one atom. Wire-form snapshots replace
+     * oversized / unserializable `currentValue` with VALUE_ON_DEVICE.
+     */
+    getAtomValue: params => {
+      const {
+        label
+      } = params ?? {};
+      if (!label) return {
+        found: false,
+        reason: "missing label"
+      };
+      const atom = _jotaiStateStore.jotaiStateStore.getAtom(label);
+      if (!atom) return {
+        found: false,
+        reason: "unknown label"
+      };
+      let currentValue;
+      try {
+        currentValue = atom.getValue();
+      } catch {
+        currentValue = undefined;
+      }
+      const cappedNote = {
+        __buoyTruncated: true,
+        note: `Exceeds the ${MAX_CHANGE_DETAIL_BYTES / (1024 * 1024)}MB detail limit — inspect it on-device.`
+      };
+      try {
+        JSON.stringify(currentValue);
+      } catch {
+        return {
+          found: true,
+          label,
+          currentValue: VALUE_ON_DEVICE
+        };
+      }
+      return {
+        found: true,
+        label,
+        currentValue: jsonLongerThan(currentValue, MAX_CHANGE_DETAIL_BYTES) ? cappedNote : currentValue
+      };
+    },
     /**
      * Compact current-value reader for a remote driver (MCP/LLM): registered
      * atoms with light metadata; each atom's `currentValue` stays on the device
@@ -77,7 +210,8 @@ const jotaiSyncAdapter = exports.jotaiSyncAdapter = {
       const {
         label,
         value
-      } = params;
+      } = params ?? {};
+      if (!label) throw new Error("setAtom requires a `label`");
       _jotaiStateStore.jotaiStateStore.setAtomValue(label, value);
     }
   }

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

@@ -290,17 +290,83 @@ class JotaiStateStore {
    */
   replaceFromSnapshot(changes, atomSnapshots) {
     if (!this.isEnabled) return;
-    this.atomChanges = changes.slice(0, this.maxChanges);
-    this.atoms = new Map(atomSnapshots.map(snapshot => [snapshot.label, {
-      label: snapshot.label,
-      changeCount: snapshot.changeCount,
-      color: snapshot.color,
-      getValue: () => snapshot.currentValue
-    }]));
+
+    // Preserve values a remote mirror already hydrated — wire-form snapshots
+    // always carry markers, and a later snapshot must not blank the detail pane.
+    const hydrated = new Map();
+    for (const existing of this.atomChanges) {
+      const prev = existing.prevValue;
+      if (!prev || prev.__buoyValueOnDevice !== true) {
+        hydrated.set(existing.id, existing);
+      }
+    }
+    this.atomChanges = changes.slice(0, this.maxChanges).map(change => {
+      const kept = hydrated.get(change.id);
+      const incoming = change.prevValue;
+      return kept && incoming?.__buoyValueOnDevice === true ? {
+        ...change,
+        prevValue: kept.prevValue,
+        nextValue: kept.nextValue
+      } : change;
+    });
+
+    // Preserve currentValue a remote mirror already hydrated — oversized
+    // atoms arrive as VALUE_ON_DEVICE markers on every snapshot.
+    const hydratedAtoms = new Map();
+    for (const [label, atom] of this.atoms) {
+      try {
+        const value = atom.getValue();
+        const marker = value;
+        if (!marker || marker.__buoyValueOnDevice !== true) {
+          hydratedAtoms.set(label, value);
+        }
+      } catch {
+        // ignore
+      }
+    }
+    this.atoms = new Map(atomSnapshots.map(snapshot => {
+      const incoming = snapshot.currentValue;
+      const kept = hydratedAtoms.get(snapshot.label);
+      const currentValue = kept !== undefined && incoming?.__buoyValueOnDevice === true ? kept : snapshot.currentValue;
+      return [snapshot.label, {
+        label: snapshot.label,
+        changeCount: snapshot.changeCount,
+        color: snapshot.color,
+        getValue: () => currentValue
+      }];
+    }));
     this.notifyListeners();
     this.notifyAtomListeners();
   }
 
+  /**
+   * Hydrate one mirrored change with real values fetched on demand from the
+   * device via the adapter's `getChangeDetail`. Remote-mirror (desktop) only.
+   */
+  hydrateChange(id, patch) {
+    const index = this.atomChanges.findIndex(c => c.id === id);
+    if (index === -1) return;
+    this.atomChanges = [...this.atomChanges.slice(0, index), {
+      ...this.atomChanges[index],
+      ...patch
+    }, ...this.atomChanges.slice(index + 1)];
+    this.notifyListeners();
+  }
+
+  /**
+   * Hydrate one mirrored atom's currentValue fetched on demand from the
+   * device via the adapter's `getAtomValue`. Remote-mirror (desktop) only.
+   */
+  hydrateAtomValue(label, currentValue) {
+    const atom = this.atoms.get(label);
+    if (!atom) return;
+    this.atoms.set(label, {
+      ...atom,
+      getValue: () => currentValue
+    });
+    this.notifyAtomListeners();
+  }
+
   // ---- Atom Registry ----
 
   registerAtom(label, getValue, setValue) {

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

@@ -0,0 +1,233 @@
+"use strict";
+
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _dataViewer = require("@buoy-gg/shared-ui/dataViewer");
+var _jotaiStateStore = require("./jotaiStateStore");
+/**
+ * Time Machine snapshot provider for Jotai.
+ *
+ * Registered into @buoy-gg/shared-ui's stateSnapshotRegistry at module init;
+ * consumed by @buoy-gg/time-machine.
+ *
+ * Coverage is opt-in by nature: only atoms the app passed to `watchAtoms` /
+ * `watchDefaultStoreAtoms` are visible. Derived (read-only) atoms are captured
+ * for inspection but never restored — they recompute from their sources.
+ * Caveat (documented): atoms with custom write functions (`atomWithReducer`)
+ * receive ACTIONS through `store.set`, so restoring a raw value can misbehave;
+ * nothing in the registry distinguishes them from plain atoms.
+ */
+
+function status() {
+  const atoms = _jotaiStateStore.jotaiStateStore.getAtoms();
+  if (atoms.length === 0) {
+    return {
+      canCapture: false,
+      canRestore: false,
+      detail: "No Jotai atoms registered — pass your atoms to watchAtoms() / watchDefaultStoreAtoms()"
+    };
+  }
+  const writable = atoms.filter(a => a.setValue).length;
+  return {
+    canCapture: true,
+    canRestore: writable > 0,
+    detail: writable < atoms.length ? `${atoms.length - writable} derived atom(s) recompute automatically and are not restored` : undefined
+  };
+}
+async function capture() {
+  const warnings = [];
+  const atoms = {};
+  let derived = 0;
+  for (const info of _jotaiStateStore.jotaiStateStore.getAtoms()) {
+    try {
+      const value = info.getValue();
+      if (typeof value === "function") {
+        warnings.push(`atom "${info.label}": function value not capturable`);
+        continue;
+      }
+      if (!info.setValue) derived += 1;
+      atoms[info.label] = {
+        value,
+        writable: Boolean(info.setValue)
+      };
+    } catch (e) {
+      warnings.push(`atom "${info.label}": capture failed (${String(e)})`);
+    }
+  }
+  if (derived > 0) {
+    warnings.push(`${derived} derived atom(s) captured for inspection only (recompute on restore)`);
+  }
+  return {
+    data: {
+      atoms
+    },
+    warnings
+  };
+}
+async function restore(data, options) {
+  const snapshot = data;
+  const excludedSet = new Set(options?.excludeKeys ?? []);
+  const includedSet = options?.includeKeys ? new Set(options.includeKeys) : null;
+  const touch = key => !excludedSet.has(key) && (!includedSet || includedSet.has(key));
+  let excludedHits = 0;
+  const result = {
+    ok: true,
+    applied: 0,
+    skipped: [],
+    warnings: []
+  };
+  if (!snapshot?.atoms) {
+    return {
+      ok: false,
+      applied: 0,
+      skipped: [],
+      warnings: ["empty jotai snapshot"]
+    };
+  }
+  let derived = 0;
+  for (const [label, entry] of Object.entries(snapshot.atoms)) {
+    if (!touch(label)) {
+      excludedHits += 1;
+      continue;
+    }
+    if (!entry.writable) {
+      derived += 1;
+      continue;
+    }
+    const info = _jotaiStateStore.jotaiStateStore.getAtom(label);
+    if (!info) {
+      result.skipped.push({
+        id: label,
+        reason: "atom not registered (renamed, or unwatched since snapshot?)"
+      });
+      continue;
+    }
+    if (!info.setValue) {
+      result.skipped.push({
+        id: label,
+        reason: "atom is now read-only (derived)"
+      });
+      continue;
+    }
+    try {
+      info.setValue(entry.value);
+      result.applied += 1;
+    } catch (e) {
+      result.skipped.push({
+        id: label,
+        reason: String(e)
+      });
+      result.ok = false;
+    }
+  }
+  if (derived > 0) {
+    result.warnings.push(`${derived} derived atom(s) left to recompute`);
+  }
+  if (excludedHits > 0) {
+    result.warnings.push(`${excludedHits} atom(s) excluded by you`);
+  }
+  return result;
+}
+
+/** Per-atom restore preview. `base` omitted = compare against live atoms. */
+async function previewItems(target, base) {
+  const targetAtoms = target?.atoms ?? {};
+  const liveMode = base === undefined;
+  const baseAtoms = {};
+  if (liveMode) {
+    for (const info of _jotaiStateStore.jotaiStateStore.getAtoms()) {
+      try {
+        baseAtoms[info.label] = {
+          value: info.getValue(),
+          writable: Boolean(info.setValue)
+        };
+      } catch {
+        // unreadable atom — treated as absent
+      }
+    }
+  } else {
+    Object.assign(baseAtoms, base?.atoms ?? {});
+  }
+  const items = [];
+  const notes = [];
+  const labels = new Set([...Object.keys(baseAtoms), ...Object.keys(targetAtoms)]);
+  for (const label of labels) {
+    const inTarget = label in targetAtoms;
+    if (!inTarget) {
+      if (liveMode) notes.push(`atom "${label}" not in snapshot — untouched`);else items.push({
+        key: label,
+        label,
+        verdict: "removed",
+        oldValue: baseAtoms[label]?.value
+      });
+      continue;
+    }
+    const entry = targetAtoms[label];
+    const equal = label in baseAtoms && (0, _dataViewer.boundedDeepEqual)(baseAtoms[label].value, entry.value);
+    if (!entry.writable) {
+      items.push({
+        key: label,
+        label,
+        verdict: equal ? "unchanged" : "recomputes",
+        reason: equal ? undefined : "derived atom — recomputes from its sources",
+        oldValue: baseAtoms[label]?.value,
+        newValue: entry.value
+      });
+      continue;
+    }
+    if (liveMode) {
+      const info = _jotaiStateStore.jotaiStateStore.getAtom(label);
+      if (!info) {
+        items.push({
+          key: label,
+          label,
+          verdict: "wont-apply",
+          reason: "atom not registered (renamed, or unwatched since snapshot?)"
+        });
+        continue;
+      }
+      if (!info.setValue) {
+        items.push({
+          key: label,
+          label,
+          verdict: "wont-apply",
+          reason: "atom is now read-only (derived)"
+        });
+        continue;
+      }
+    }
+    if (!(label in baseAtoms)) {
+      items.push({
+        key: label,
+        label,
+        verdict: "added",
+        newValue: entry.value
+      });
+    } else if (equal) {
+      items.push({
+        key: label,
+        label,
+        verdict: "unchanged"
+      });
+    } else {
+      items.push({
+        key: label,
+        label,
+        verdict: "changed",
+        oldValue: baseAtoms[label].value,
+        newValue: entry.value
+      });
+    }
+  }
+  return {
+    items,
+    notes
+  };
+}
+(0, _sharedUi.registerStateSnapshotProvider)({
+  id: "jotai",
+  label: "Jotai",
+  status,
+  capture,
+  restore,
+  previewItems
+});

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

@@ -61,9 +61,11 @@ function watchAtoms(store, atoms, options) {
     }
 
     // Register the atom for the browser view. A setter is captured only when
-    // the store supports `set` (writable atoms); read-only/derived atoms throw
-    // at set time and are reported as read-only.
-    const setter = store.set ? value => {
+    // the store supports `set` AND the atom itself is writable (has a `write`
+    // 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 => {
       store.set(atom, value);
     } : undefined;
     _jotaiStateStore.jotaiStateStore.registerAtom(label, () => {

package/lib/module/index.js

@@ -32,6 +32,9 @@
  * ```
  */
 
+// Side-effect: registers the Time Machine snapshot provider
+import "./jotai/utils/snapshotProvider";
+
 // =============================================================================
 // PRESET (Primary entry point for FloatingDevTools)
 // =============================================================================

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

@@ -16,6 +16,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function getValuePreview(atom) {
   try {
     const value = atom.getValue();
+    if (value && typeof value === "object" && value.__buoyValueOnDevice === true) {
+      return "on device";
+    }
     if (value === undefined) return "undefined";
     if (value === null) return "null";
     if (Array.isArray(value)) {
@@ -121,7 +124,8 @@ function EmptyBrowserState() {
 export function JotaiAtomBrowser({
   atoms,
   searchQuery,
-  onViewHistory
+  onViewHistory,
+  onAtomExpand
 }) {
   const [expandedAtom, setExpandedAtom] = useState(null);
   const filteredAtoms = useMemo(() => {
@@ -130,8 +134,12 @@ export function JotaiAtomBrowser({
     return atoms.filter(a => a.label.toLowerCase().includes(search));
   }, [atoms, searchQuery]);
   const handleAtomPress = useCallback(atom => {
-    setExpandedAtom(prev => prev === atom.label ? null : atom.label);
-  }, []);
+    setExpandedAtom(prev => {
+      const next = prev === atom.label ? null : atom.label;
+      if (next) onAtomExpand?.(atom.label);
+      return next;
+    });
+  }, [onAtomExpand]);
   if (filteredAtoms.length === 0 && !searchQuery) {
     return /*#__PURE__*/_jsx(EmptyBrowserState, {});
   }