@buoy-gg/jotai 3.0.1 → 4.0.1

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

@@ -1 +1,149 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.isAtomWatched=isAtomWatched,exports.watchAtoms=watchAtoms,exports.watchDefaultStoreAtoms=watchDefaultStoreAtoms;var _jotaiStateStore=require("./jotaiStateStore");function watchAtoms(t,e,o){const a=!1!==o?.enabled,r=[];for(const[o,i]of Object.entries(e)){const e=i,c=Symbol.for(`@@buoy-jotai/watched/${o}`);if(e[c])continue;let s;e[c]=!0;try{s=t.get(i)}catch{s=void 0}_jotaiStateStore.jotaiStateStore.registerAtom(o,()=>{try{return t.get(i)}catch{return}}),a&&_jotaiStateStore.jotaiStateStore.addAtomChange({atomLabel:o,prevValue:void 0,nextValue:s,category:"initial"});const n=t.sub(i,()=>{try{const e=t.get(i);_jotaiStateStore.jotaiStateStore.addAtomChange({atomLabel:o,prevValue:s,nextValue:e,category:"write"}),s=e}catch{}});r.push(()=>{n(),delete e[c],_jotaiStateStore.jotaiStateStore.unregisterAtom(o)})}return()=>r.forEach(t=>t())}function watchDefaultStoreAtoms(t,e){let o;try{const{getDefaultStore:t}=require("jotai/vanilla");o=t()}catch{try{const{getDefaultStore:t}=require("jotai");o=t()}catch{return console.warn("[@buoy-gg/jotai] Could not find getDefaultStore from jotai. Pass the store explicitly via watchAtoms(store, atoms) instead."),()=>{}}}return watchAtoms(o,t,e)}function isAtomWatched(t){return void 0!==_jotaiStateStore.jotaiStateStore.getAtom(t)}
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isAtomWatched = isAtomWatched;
+exports.watchAtoms = watchAtoms;
+exports.watchDefaultStoreAtoms = watchDefaultStoreAtoms;
+var _jotaiStateStore = require("./jotaiStateStore");
+/**
+ * Buoy Jotai DevTools — Atom instrumentation
+ *
+ * watchAtoms() — RECOMMENDED. Pass a Jotai store and a named atom map.
+ * Uses store.sub() to observe each atom externally. Never touches atom internals.
+ *
+ * watchDefaultStoreAtoms() — Convenience wrapper that uses getDefaultStore().
+ */
+
+/** Any Jotai atom — alias for Atom<unknown> for readability */
+
+/** Minimal store shape — what Jotai's createStore() / getDefaultStore() returns */
+
+/**
+ * Watch a set of Jotai atoms for value changes.
+ *
+ * Pass a Jotai store and an object mapping display names to atoms.
+ * Uses store.sub() to observe each atom — never modifies atom internals.
+ *
+ * @example
+ * ```tsx
+ * import { getDefaultStore } from 'jotai';
+ * import { watchAtoms } from '@buoy-gg/jotai';
+ * import { countAtom } from './atoms/count';
+ * import { authAtom } from './atoms/auth';
+ *
+ * watchAtoms(getDefaultStore(), {
+ *   countAtom,
+ *   authAtom,
+ * });
+ * ```
+ *
+ * @param store  - Jotai store (from createStore() or getDefaultStore())
+ * @param atoms  - Object mapping display labels to Jotai atoms
+ * @param options - Optional configuration
+ * @returns Cleanup function that removes all subscriptions
+ */
+function watchAtoms(store, atoms, options) {
+  const enabled = options?.enabled !== false;
+  const cleanups = [];
+  for (const [label, atom] of Object.entries(atoms)) {
+    // Skip if already watched under this label
+    const atomAny = atom;
+    const watchedKey = Symbol.for(`@@buoy-jotai/watched/${label}`);
+    if (atomAny[watchedKey]) continue;
+    atomAny[watchedKey] = true;
+    let prevValue;
+    try {
+      prevValue = store.get(atom);
+    } catch {
+      prevValue = undefined;
+    }
+
+    // Register the atom for the browser view
+    _jotaiStateStore.jotaiStateStore.registerAtom(label, () => {
+      try {
+        return store.get(atom);
+      } catch {
+        return undefined;
+      }
+    });
+
+    // Record initial value
+    if (enabled) {
+      _jotaiStateStore.jotaiStateStore.addAtomChange({
+        atomLabel: label,
+        prevValue: undefined,
+        nextValue: prevValue,
+        category: "initial"
+      });
+    }
+
+    // Subscribe to future changes
+    const unsubscribe = store.sub(atom, () => {
+      try {
+        const nextValue = store.get(atom);
+        _jotaiStateStore.jotaiStateStore.addAtomChange({
+          atomLabel: label,
+          prevValue,
+          nextValue,
+          category: "write"
+        });
+        prevValue = nextValue;
+      } catch {
+        // Silently catch — our bug must never propagate into the store
+      }
+    });
+    cleanups.push(() => {
+      unsubscribe();
+      delete atomAny[watchedKey];
+      _jotaiStateStore.jotaiStateStore.unregisterAtom(label);
+    });
+  }
+  return () => cleanups.forEach(fn => fn());
+}
+
+/**
+ * Watch atoms using Jotai's default store (no Provider setup required).
+ *
+ * Convenience wrapper around watchAtoms() — auto-imports getDefaultStore.
+ *
+ * @example
+ * ```tsx
+ * import { watchDefaultStoreAtoms } from '@buoy-gg/jotai';
+ * import { countAtom, authAtom } from './atoms';
+ *
+ * watchDefaultStoreAtoms({ countAtom, authAtom });
+ * ```
+ */
+function watchDefaultStoreAtoms(atoms, options) {
+  // Dynamic import to avoid bundling jotai internals when not needed
+  let store;
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const {
+      getDefaultStore
+    } = require("jotai/vanilla");
+    store = getDefaultStore();
+  } catch {
+    // Try the main jotai entry (React Native)
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      const {
+        getDefaultStore
+      } = require("jotai");
+      store = getDefaultStore();
+    } catch {
+      console.warn("[@buoy-gg/jotai] Could not find getDefaultStore from jotai. " + "Pass the store explicitly via watchAtoms(store, atoms) instead.");
+      return () => {};
+    }
+  }
+  return watchAtoms(store, atoms, options);
+}
+
+/**
+ * Check if an atom label is currently being watched
+ */
+function isAtomWatched(label) {
+  return _jotaiStateStore.jotaiStateStore.getAtom(label) !== undefined;
+}

package/lib/commonjs/preset.js

@@ -1 +1,98 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.createJotaiTool=createJotaiTool,exports.jotaiToolPreset=void 0;var _JotaiModal=require("./jotai/components/JotaiModal"),_JotaiIcon=require("./jotai/components/JotaiIcon"),_jsxRuntime=require("react/jsx-runtime");const jotaiToolPreset=exports.jotaiToolPreset={id:"jotai",name:"JOTAI",description:"Jotai atom & state inspector",slot:"both",icon:({size:o})=>(0,_jsxRuntime.jsx)(_JotaiIcon.JotaiIcon,{size:o}),component:_JotaiModal.JotaiModal,props:{enableSharedModalDimensions:!1}};function createJotaiTool(o){return{id:o?.id||"jotai",name:o?.name||"JOTAI",description:o?.description||"Jotai atom & state inspector",slot:"both",icon:({size:e})=>(0,_jsxRuntime.jsx)(_JotaiIcon.JotaiIcon,{size:e,color:o?.iconColor}),component:_JotaiModal.JotaiModal,props:{enableSharedModalDimensions:void 0!==o?.enableSharedModalDimensions&&o.enableSharedModalDimensions}}}
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createJotaiTool = createJotaiTool;
+exports.jotaiToolPreset = void 0;
+var _JotaiModal = require("./jotai/components/JotaiModal");
+var _JotaiIcon = require("./jotai/components/JotaiIcon");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Pre-configured Jotai DevTools preset for FloatingDevTools
+ *
+ * ZERO-CONFIG: This preset is auto-discovered by FloatingDevTools!
+ * Just install @buoy-gg/jotai and call watchAtoms() with your atoms.
+ *
+ * @example Automatic (recommended)
+ * ```tsx
+ * import { getDefaultStore } from 'jotai';
+ * import { watchAtoms } from '@buoy-gg/jotai';
+ * import { countAtom, authAtom } from './atoms';
+ *
+ * watchAtoms(getDefaultStore(), { countAtom, authAtom });
+ *
+ * // The Jotai tool appears automatically in FloatingDevTools!
+ * <FloatingDevTools />
+ * ```
+ *
+ * @example Manual (only for custom configuration)
+ * ```tsx
+ * import { createJotaiTool } from '@buoy-gg/jotai';
+ *
+ * const customJotaiTool = createJotaiTool({
+ *   name: "ATOMS",
+ *   iconColor: "#6C47FF",
+ * });
+ *
+ * <FloatingDevTools apps={[customJotaiTool]} />
+ * ```
+ */
+
+/**
+ * Pre-configured Jotai DevTools preset for FloatingDevTools.
+ * Includes:
+ * - Live atom change monitoring
+ * - Atom value inspection (JSON viewer)
+ * - Value diff visualization (tree + split)
+ * - Filter by atom label
+ * - Changed keys tracking for object atoms
+ */
+const jotaiToolPreset = exports.jotaiToolPreset = {
+  id: "jotai",
+  name: "JOTAI",
+  description: "Jotai atom & state inspector",
+  slot: "both",
+  icon: ({
+    size
+  }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_JotaiIcon.JotaiIcon, {
+    size: size
+  }),
+  component: _JotaiModal.JotaiModal,
+  props: {
+    enableSharedModalDimensions: false
+  }
+};
+
+/**
+ * Create a custom Jotai DevTools configuration.
+ * Use this if you want to override default settings.
+ *
+ * @example
+ * ```tsx
+ * import { createJotaiTool } from '@buoy-gg/jotai';
+ *
+ * const myJotaiTool = createJotaiTool({
+ *   name: "ATOMS",
+ *   iconColor: "#6C47FF",
+ * });
+ * ```
+ */
+function createJotaiTool(options) {
+  return {
+    id: options?.id || "jotai",
+    name: options?.name || "JOTAI",
+    description: options?.description || "Jotai atom & state inspector",
+    slot: "both",
+    icon: ({
+      size
+    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_JotaiIcon.JotaiIcon, {
+      size: size,
+      color: options?.iconColor
+    }),
+    component: _JotaiModal.JotaiModal,
+    props: {
+      enableSharedModalDimensions: options?.enableSharedModalDimensions !== undefined ? options.enableSharedModalDimensions : false
+    }
+  };
+}

package/lib/module/index.js

@@ -1 +1,79 @@
-"use strict";export{jotaiToolPreset,createJotaiTool}from"./preset";export{watchAtoms}from"./jotai/utils/watchAtoms";export{watchDefaultStoreAtoms}from"./jotai/utils/watchAtoms";export{isAtomWatched}from"./jotai/utils/watchAtoms";export{useJotaiAtomChanges}from"./jotai/hooks/useJotaiAtomChanges";export{JotaiModal}from"./jotai/components/JotaiModal";export{JotaiAtomChangeItem}from"./jotai/components/JotaiAtomChangeItem";export{JotaiAtomDetailContent,JotaiAtomDetailFooter}from"./jotai/components/JotaiAtomDetailContent";export{JotaiIcon,JOTAI_ICON_COLOR}from"./jotai/components/JotaiIcon";export{jotaiStateStore}from"./jotai/utils/jotaiStateStore";
+"use strict";
+
+/**
+ * @buoy-gg/jotai
+ *
+ * Jotai Atom DevTools for React Native
+ *
+ * PUBLIC API - Only these exports are supported for external use.
+ *
+ * @example Recommended setup (one line, pass your atoms)
+ * ```tsx
+ * import { getDefaultStore } from 'jotai';
+ * import { watchAtoms } from '@buoy-gg/jotai';
+ * import { countAtom } from './atoms/count';
+ * import { authAtom } from './atoms/auth';
+ *
+ * // One call, anywhere at module scope or in your root layout:
+ * watchAtoms(getDefaultStore(), {
+ *   countAtom,
+ *   authAtom,
+ * });
+ * ```
+ *
+ * @example With a custom store (Provider-based)
+ * ```tsx
+ * import { createStore } from 'jotai';
+ * import { watchAtoms } from '@buoy-gg/jotai';
+ *
+ * const myStore = createStore();
+ *
+ * watchAtoms(myStore, { countAtom, authAtom });
+ * ```
+ */
+
+// =============================================================================
+// PRESET (Primary entry point for FloatingDevTools)
+// =============================================================================
+export { jotaiToolPreset, createJotaiTool } from "./preset";
+
+// =============================================================================
+// WATCH ATOMS (Recommended — subscribe-only, non-intrusive)
+// =============================================================================
+export { watchAtoms } from "./jotai/utils/watchAtoms";
+
+// =============================================================================
+// CONVENIENCE (Default store shortcut)
+// =============================================================================
+export { watchDefaultStoreAtoms } from "./jotai/utils/watchAtoms";
+
+// =============================================================================
+// UTILITIES
+// =============================================================================
+export { isAtomWatched } from "./jotai/utils/watchAtoms";
+// =============================================================================
+// HOOKS (For consuming Jotai atom data)
+// =============================================================================
+export { useJotaiAtomChanges } from "./jotai/hooks/useJotaiAtomChanges";
+// =============================================================================
+// COMPONENTS (For custom UI implementations)
+// =============================================================================
+export { JotaiModal } from "./jotai/components/JotaiModal";
+export { JotaiAtomChangeItem } from "./jotai/components/JotaiAtomChangeItem";
+export { JotaiAtomDetailContent, JotaiAtomDetailFooter } from "./jotai/components/JotaiAtomDetailContent";
+export { JotaiIcon, JOTAI_ICON_COLOR } from "./jotai/components/JotaiIcon";
+
+// =============================================================================
+// EXTERNAL SYNC (Adapter for @buoy-gg/external-sync's useExternalSync)
+// =============================================================================
+export { jotaiSyncAdapter } from "./jotai/sync/jotaiSyncAdapter";
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+// =============================================================================
+// INTERNAL EXPORTS (For @buoy-gg/* packages only - not part of public API)
+// =============================================================================
+/** @internal */
+export { jotaiStateStore } from "./jotai/utils/jotaiStateStore";

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

@@ -1 +1,296 @@
-"use strict";import{useState,useMemo,useCallback}from"react";import{View,Text,StyleSheet,ScrollView,TouchableOpacity}from"react-native";import{CompactRow,macOSColors,buoyColors,Box,ExpandedInfoRow,PillBadge,parseValue}from"@buoy-gg/shared-ui";import{DataViewer}from"@buoy-gg/shared-ui/dataViewer";import{jotaiStateStore}from"../utils/jotaiStateStore";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";function getValuePreview(e){try{const t=e.getValue();if(void 0===t)return"undefined";if(null===t)return"null";if(Array.isArray(t))return 0===t.length?"[]":`[${t.length} item${1===t.length?"":"s"}]`;if("object"==typeof t){const e=Object.keys(t);return 0===e.length?"{}":e.length<=3?e.join(", "):`${e.slice(0,2).join(", ")} +${e.length-2}`}return String(t).slice(0,40)}catch{return""}}function getValueType(e){try{const t=e.getValue();return null===t?"null":void 0===t?"undefined":Array.isArray(t)?`array · ${t.length}`:typeof t}catch{return"unknown"}}function AtomExpandedContent({atom:e,onViewHistory:t}){const o=e.getValue(),r=useMemo(()=>{if(o&&"object"==typeof o){const e={};for(const[t,r]of Object.entries(o))"function"!=typeof r&&(e[t]=r);return parseValue(e)}return parseValue(o)},[o]);return _jsxs(View,{style:expandedStyles.container,children:[_jsx(ExpandedInfoRow,{label:"Type",children:_jsx(PillBadge,{color:e.color,children:"JOTAI"})}),e.changeCount>0&&_jsxs(ExpandedInfoRow,{label:"Changes",children:[_jsx(PillBadge,{color:buoyColors.warning,children:String(e.changeCount)}),_jsx(TouchableOpacity,{onPress:()=>t(e.label),style:expandedStyles.viewHistoryButton,hitSlop:{top:6,bottom:6,left:6,right:6},children:_jsx(Text,{style:[expandedStyles.viewHistoryText,{color:e.color}],children:"view history →"})})]}),_jsx(View,{style:expandedStyles.dataContainer,children:r&&"object"==typeof r?_jsx(DataViewer,{title:"",data:r,showTypeFilter:!0,rawMode:!0,initialExpanded:!0}):_jsx(Text,{style:expandedStyles.primitiveText,children:String(o??"undefined")})})]})}function EmptyBrowserState(){return _jsxs(View,{style:styles.emptyState,children:[_jsx(Box,{size:32,color:macOSColors.text.muted}),_jsx(Text,{style:styles.emptyTitle,children:"No atoms registered"}),_jsx(Text,{style:styles.emptyText,children:"Use watchAtoms(store, { atomName }) to register your Jotai atoms.\nThey will appear here with their current value."})]})}export function JotaiAtomBrowser({atoms:e,searchQuery:t,onViewHistory:o}){const[r,n]=useState(null),i=useMemo(()=>{if(!t)return e;const o=t.toLowerCase();return e.filter(e=>e.label.toLowerCase().includes(o))},[e,t]),l=useCallback(e=>{n(t=>t===e.label?null:e.label)},[]);return 0!==i.length||t?0===i.length&&t?_jsxs(View,{style:styles.emptyState,children:[_jsx(Text,{style:styles.emptyTitle,children:"No matching atoms"}),_jsxs(Text,{style:styles.emptyText,children:['No atoms match "',t,'"']})]}):_jsxs(ScrollView,{style:styles.container,contentContainerStyle:styles.scrollContent,showsVerticalScrollIndicator:!0,children:[_jsxs(View,{style:styles.sectionHeader,children:[_jsx(Text,{style:styles.sectionTitle,children:"ATOMS"}),_jsx(View,{style:styles.sectionCountBadge,children:_jsx(Text,{style:styles.sectionCountText,children:i.length})})]}),i.map(e=>{const t=r===e.label,n=getValuePreview(e),i=jotaiStateStore.getAtomColor(e.label);return _jsxs(View,{style:styles.atomRowWrapper,children:[_jsx(CompactRow,{statusDotColor:i,statusLabel:e.label,statusSublabel:getValueType(e),primaryText:n,showChevron:!0,isExpanded:t,onPress:()=>l(e),expandedContent:t?_jsx(AtomExpandedContent,{atom:e,onViewHistory:o}):void 0}),e.changeCount>0&&_jsx(View,{style:[styles.absCountBadge,{backgroundColor:i+"22",borderColor:i+"55"}],pointerEvents:"none",children:_jsx(Text,{style:[styles.absCountText,{color:i}],children:String(e.changeCount)})})]},e.label)})]}):_jsx(EmptyBrowserState,{})}const styles=StyleSheet.create({container:{flex:1},atomRowWrapper:{position:"relative"},absCountBadge:{position:"absolute",top:4,right:10,paddingHorizontal:5,paddingVertical:1,borderRadius:4,borderWidth:1,zIndex:1},absCountText:{fontSize:9,fontWeight:"700",fontFamily:"monospace"},scrollContent:{paddingTop:8,paddingBottom:20},sectionHeader:{flexDirection:"row",alignItems:"center",paddingHorizontal:16,paddingVertical:8,gap:8},sectionTitle:{fontSize:11,fontWeight:"700",letterSpacing:.5,color:macOSColors.text.muted},sectionCountBadge:{backgroundColor:buoyColors.primary+"26",paddingHorizontal:8,paddingVertical:2,borderRadius:4},sectionCountText:{fontSize:10,fontWeight:"700",color:buoyColors.primary,fontFamily:"monospace"},emptyState:{alignItems:"center",paddingVertical:40},emptyTitle:{color:macOSColors.text.primary,fontSize:14,fontWeight:"600",marginTop:12,marginBottom:6},emptyText:{color:macOSColors.text.muted,fontSize:12,textAlign:"center",lineHeight:18}}),expandedStyles=StyleSheet.create({container:{gap:10},viewHistoryButton:{marginLeft:4},viewHistoryText:{fontSize:10,fontWeight:"600",fontFamily:"monospace"},dataContainer:{backgroundColor:buoyColors.base,borderRadius:6,borderWidth:1,borderColor:buoyColors.border,overflow:"hidden",minHeight:60},primitiveText:{color:buoyColors.text,fontSize:12,fontFamily:"monospace",padding:14}});
+"use strict";
+
+/**
+ * JotaiAtomBrowser
+ *
+ * Atoms tab — shows all registered Jotai atoms and their current value.
+ * Mirrors ZustandStoreBrowser.tsx from @buoy-gg/zustand.
+ */
+
+import { useState, useMemo, useCallback } from "react";
+import { View, Text, StyleSheet, ScrollView, TouchableOpacity } from "react-native";
+import { CompactRow, macOSColors, buoyColors, Box, ExpandedInfoRow, PillBadge, parseValue } from "@buoy-gg/shared-ui";
+import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
+import { jotaiStateStore } from "../utils/jotaiStateStore";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function getValuePreview(atom) {
+  try {
+    const value = atom.getValue();
+    if (value === undefined) return "undefined";
+    if (value === null) return "null";
+    if (Array.isArray(value)) {
+      if (value.length === 0) return "[]";
+      return `[${value.length} item${value.length === 1 ? "" : "s"}]`;
+    }
+    if (typeof value === "object") {
+      const keys = Object.keys(value);
+      if (keys.length === 0) return "{}";
+      if (keys.length <= 3) return keys.join(", ");
+      return `${keys.slice(0, 2).join(", ")} +${keys.length - 2}`;
+    }
+    return String(value).slice(0, 40);
+  } catch {
+    return "";
+  }
+}
+function getValueType(atom) {
+  try {
+    const value = atom.getValue();
+    if (value === null) return "null";
+    if (value === undefined) return "undefined";
+    if (Array.isArray(value)) return `array · ${value.length}`;
+    return typeof value;
+  } catch {
+    return "unknown";
+  }
+}
+function AtomExpandedContent({
+  atom,
+  onViewHistory
+}) {
+  const value = atom.getValue();
+  const displayValue = useMemo(() => {
+    if (value && typeof value === "object") {
+      const filtered = {};
+      for (const [key, v] of Object.entries(value)) {
+        if (typeof v !== "function") filtered[key] = v;
+      }
+      return parseValue(filtered);
+    }
+    return parseValue(value);
+  }, [value]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: expandedStyles.container,
+    children: [/*#__PURE__*/_jsx(ExpandedInfoRow, {
+      label: "Type",
+      children: /*#__PURE__*/_jsx(PillBadge, {
+        color: atom.color,
+        children: "JOTAI"
+      })
+    }), atom.changeCount > 0 && /*#__PURE__*/_jsxs(ExpandedInfoRow, {
+      label: "Changes",
+      children: [/*#__PURE__*/_jsx(PillBadge, {
+        color: buoyColors.warning,
+        children: String(atom.changeCount)
+      }), /*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: () => onViewHistory(atom.label),
+        style: expandedStyles.viewHistoryButton,
+        hitSlop: {
+          top: 6,
+          bottom: 6,
+          left: 6,
+          right: 6
+        },
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [expandedStyles.viewHistoryText, {
+            color: atom.color
+          }],
+          children: "view history \u2192"
+        })
+      })]
+    }), /*#__PURE__*/_jsx(View, {
+      style: expandedStyles.dataContainer,
+      children: displayValue && typeof displayValue === "object" ? /*#__PURE__*/_jsx(DataViewer, {
+        title: "",
+        data: displayValue,
+        showTypeFilter: true,
+        rawMode: true,
+        initialExpanded: true
+      }) : /*#__PURE__*/_jsx(Text, {
+        style: expandedStyles.primitiveText,
+        children: String(value ?? "undefined")
+      })
+    })]
+  });
+}
+function EmptyBrowserState() {
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.emptyState,
+    children: [/*#__PURE__*/_jsx(Box, {
+      size: 32,
+      color: macOSColors.text.muted
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.emptyTitle,
+      children: "No atoms registered"
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.emptyText,
+      children: "Use watchAtoms(store, { atomName }) to register your Jotai atoms.\nThey will appear here with their current value."
+    })]
+  });
+}
+export function JotaiAtomBrowser({
+  atoms,
+  searchQuery,
+  onViewHistory
+}) {
+  const [expandedAtom, setExpandedAtom] = useState(null);
+  const filteredAtoms = useMemo(() => {
+    if (!searchQuery) return atoms;
+    const search = searchQuery.toLowerCase();
+    return atoms.filter(a => a.label.toLowerCase().includes(search));
+  }, [atoms, searchQuery]);
+  const handleAtomPress = useCallback(atom => {
+    setExpandedAtom(prev => prev === atom.label ? null : atom.label);
+  }, []);
+  if (filteredAtoms.length === 0 && !searchQuery) {
+    return /*#__PURE__*/_jsx(EmptyBrowserState, {});
+  }
+  if (filteredAtoms.length === 0 && searchQuery) {
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.emptyState,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.emptyTitle,
+        children: "No matching atoms"
+      }), /*#__PURE__*/_jsxs(Text, {
+        style: styles.emptyText,
+        children: ["No atoms match \"", searchQuery, "\""]
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsxs(ScrollView, {
+    style: styles.container,
+    contentContainerStyle: styles.scrollContent,
+    showsVerticalScrollIndicator: true,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.sectionHeader,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.sectionTitle,
+        children: "ATOMS"
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.sectionCountBadge,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.sectionCountText,
+          children: filteredAtoms.length
+        })
+      })]
+    }), filteredAtoms.map(atom => {
+      const isExpanded = expandedAtom === atom.label;
+      const valuePreview = getValuePreview(atom);
+      const atomColor = jotaiStateStore.getAtomColor(atom.label);
+      return /*#__PURE__*/_jsxs(View, {
+        style: styles.atomRowWrapper,
+        children: [/*#__PURE__*/_jsx(CompactRow, {
+          statusDotColor: atomColor,
+          statusLabel: atom.label,
+          statusSublabel: getValueType(atom),
+          primaryText: valuePreview,
+          showChevron: true,
+          isExpanded: isExpanded,
+          onPress: () => handleAtomPress(atom),
+          expandedContent: isExpanded ? /*#__PURE__*/_jsx(AtomExpandedContent, {
+            atom: atom,
+            onViewHistory: onViewHistory
+          }) : undefined
+        }), atom.changeCount > 0 && /*#__PURE__*/_jsx(View, {
+          style: [styles.absCountBadge, {
+            backgroundColor: atomColor + "22",
+            borderColor: atomColor + "55"
+          }],
+          pointerEvents: "none",
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [styles.absCountText, {
+              color: atomColor
+            }],
+            children: String(atom.changeCount)
+          })
+        })]
+      }, atom.label);
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  atomRowWrapper: {
+    position: "relative"
+  },
+  absCountBadge: {
+    position: "absolute",
+    top: 4,
+    right: 10,
+    paddingHorizontal: 5,
+    paddingVertical: 1,
+    borderRadius: 4,
+    borderWidth: 1,
+    zIndex: 1
+  },
+  absCountText: {
+    fontSize: 9,
+    fontWeight: "700",
+    fontFamily: "monospace"
+  },
+  scrollContent: {
+    paddingTop: 8,
+    paddingBottom: 20
+  },
+  sectionHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    gap: 8
+  },
+  sectionTitle: {
+    fontSize: 11,
+    fontWeight: "700",
+    letterSpacing: 0.5,
+    color: macOSColors.text.muted
+  },
+  sectionCountBadge: {
+    backgroundColor: buoyColors.primary + "26",
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 4
+  },
+  sectionCountText: {
+    fontSize: 10,
+    fontWeight: "700",
+    color: buoyColors.primary,
+    fontFamily: "monospace"
+  },
+  emptyState: {
+    alignItems: "center",
+    paddingVertical: 40
+  },
+  emptyTitle: {
+    color: macOSColors.text.primary,
+    fontSize: 14,
+    fontWeight: "600",
+    marginTop: 12,
+    marginBottom: 6
+  },
+  emptyText: {
+    color: macOSColors.text.muted,
+    fontSize: 12,
+    textAlign: "center",
+    lineHeight: 18
+  }
+});
+const expandedStyles = StyleSheet.create({
+  container: {
+    gap: 10
+  },
+  viewHistoryButton: {
+    marginLeft: 4
+  },
+  viewHistoryText: {
+    fontSize: 10,
+    fontWeight: "600",
+    fontFamily: "monospace"
+  },
+  dataContainer: {
+    backgroundColor: buoyColors.base,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: buoyColors.border,
+    overflow: "hidden",
+    minHeight: 60
+  },
+  primitiveText: {
+    color: buoyColors.text,
+    fontSize: 12,
+    fontFamily: "monospace",
+    padding: 14
+  }
+});