@buoy-gg/jotai 7.0.40 → 7.0.42

package/README.md

@@ -1,92 +1,27 @@
-# @buoy-gg/jotai
+<div align="center">
 
-[![npm version](https://img.shields.io/npm/v/@buoy-gg/jotai?style=flat-square&labelColor=1c1c1c&color=10B981)](https://www.npmjs.com/package/@buoy-gg/jotai) [![npm downloads](https://img.shields.io/npm/dm/@buoy-gg/jotai?style=flat-square&labelColor=1c1c1c&color=10B981)](https://www.npmjs.com/package/@buoy-gg/jotai)
+# @buoy-gg/jotai
 
 Inspect registered Jotai atoms and their captured changes, with live values and per-atom history.
 
-Part of [Buoy](https://github.com/Buoy-gg/buoy). Install the package, complete account setup, and follow the integration steps below.
+<a href="https://buoy.gg/buoy/latest/docs/tools/jotai"><b>Jotai guide</b></a> &nbsp;·&nbsp; <a href="https://buoy.gg">buoy.gg</a> &nbsp;·&nbsp; <a href="https://github.com/Buoy-gg/buoy">All tools</a>
 
-## Install
+[![npm version](https://img.shields.io/npm/v/@buoy-gg/jotai?style=flat-square&labelColor=10302a&color=2a9d78)](https://www.npmjs.com/package/@buoy-gg/jotai) [![npm downloads](https://img.shields.io/npm/dm/@buoy-gg/jotai?style=flat-square&labelColor=10302a&color=2a9d78&label=downloads%2Fmonth)](https://www.npmjs.com/package/@buoy-gg/jotai)
 
-```bash
-npm install @buoy-gg/core @buoy-gg/jotai
-```
+<a href="https://buoy.gg/buoy/latest/docs/tools/jotai"><img src="https://raw.githubusercontent.com/Buoy-gg/buoy/main/.github/readme/tools/jotai.png" alt="Watch the Jotai film on buoy.gg" width="640" /></a>
 
-## Before you start
+</div>
 
-Use a development build with `@buoy-gg/core` and a Free or Pro Buoy account key. From your app’s directory, sign in:
+## Install
 
 ```bash
-npx --package=@buoy-gg/core buoy login
-```
-
-For Expo, initialize Buoy before rendering the menu:
-
-```tsx
-import { Buoy } from "@buoy-gg/core";
-
-Buoy.init({ licenseKey: process.env.EXPO_PUBLIC_BUOY_KEY });
-```
-
-The login command writes the Expo key to `.env.local`. For React Native CLI, pass the key from your app’s environment configuration; React Native does not load `.env.local` automatically. Mount `FloatingDevTools` inside the same providers as your screens and restart the development server after installation. The [Quick Start](https://buoy.gg/buoy/latest/docs/quick-start) shows the complete root component setup.
-
-## Quick start
-
-One `watchAtoms(store, atoms)` call at module scope — pass your Jotai store and a named map of atoms. No wrappers, no `atomWithDevTools`, no changes to existing atoms; observation is subscribe-only.
-
-```tsx
-import { getDefaultStore } from 'jotai';
-import { watchAtoms } from '@buoy-gg/jotai';
-import { countAtom } from './atoms/count';
-import { authAtom } from './atoms/auth';
-import { cartAtom } from './atoms/cart';
-
-watchAtoms(getDefaultStore(), {
-  countAtom,
-  authAtom,
-  cartAtom,
-});
-```
-
-Using a `<Provider>` with a custom store? Pass it instead:
-
-```tsx
-import { createStore, Provider } from "jotai";
-
-const myStore = createStore();
-watchAtoms(myStore, { countAtom, authAtom });
-
-// Use this same store in the provider around your app and Buoy menu.
-<Provider store={myStore}>{/* Existing app and FloatingDevTools */}</Provider>;
+npm install @buoy-gg/core @buoy-gg/jotai
 ```
 
-Registered atoms appear in the Jotai tool inside the floating menu.
-
-## Check the integration
+Call `watchAtoms(store, atoms)` once at module scope with your Jotai store and a named map of atoms. Existing atoms stay as they are.
 
-Change a registered atom through your app and inspect its history. Use the same store as your Jotai provider. Whether an atom can be edited depends on whether it is writable; a derived atom can also be writable.
-
-## What you get
-
-- **`prev → next` on every event** — see `0 → 5` or `null → {name, email}` at a glance, no tapping in for simple updates
-- **Live Atoms tab** — every registered atom with its current value, value type, and change count, updated in real time
-- **Per-atom history** — jump from any atom straight to its filtered event timeline to trace one piece of state through a flow
-- **No-change flags** — writes that fired but didn't actually change the value are called out
-- **Three-tab detail view** — change metadata, full value tree, and a side-by-side before/after diff
-- **Atom color coding** — each atom keeps a consistent color across tabs and detail views
-- **Search & filter** — find events by atom name or value content; hide noisy atoms everywhere at once
-- **Recording toggle** — pause atom capture when you need to focus, resume when ready
-
-## Desktop & AI
-
-To connect a React Native app to [Buoy Desktop](https://github.com/Buoy-gg/Buoy-Desktop) or MCP, install `@buoy-gg/external-sync` and follow the [Desktop connection guide](https://buoy.gg/buoy/latest/docs/desktop). Sign in to Desktop separately. [MCP setup](https://buoy.gg/buoy/latest/docs/mcp) also requires a process account and Pro access. Available remote actions depend on the tool and app integration.
-
-## Account and plan requirements
-
-Use a Free or Pro Buoy account. History limits and paid features vary by tool; see [pricing](https://buoy.gg/pricing). Production access requires Pro where supported. Development-only hooks and actions remain unavailable in release builds.
+The [Jotai guide](https://buoy.gg/buoy/latest/docs/tools/jotai) covers setup, what it captures and its limits. New to Buoy? Start with the [Quick start](https://buoy.gg/buoy/latest/docs/quick-start).
 
 ---
 
-📚 [Full docs](https://buoy.gg/buoy/latest/docs/tools/jotai) · [All Buoy tools](https://github.com/Buoy-gg/buoy)
-
-Proprietary software. © Buoy LLC. [Terms](https://buoy.gg/terms)
+<sub>Part of <a href="https://buoy.gg">Buoy</a>, developer tools that live inside your app. Proprietary software. © Buoy LLC. <a href="https://buoy.gg/terms">Terms</a></sub>

package/lib/commonjs/index.js

@@ -1,112 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "JOTAI_ICON_COLOR", {
-  enumerable: true,
-  get: function () {
-    return _JotaiIcon.JOTAI_ICON_COLOR;
-  }
-});
-Object.defineProperty(exports, "JotaiAtomChangeItem", {
-  enumerable: true,
-  get: function () {
-    return _JotaiAtomChangeItem.JotaiAtomChangeItem;
-  }
-});
-Object.defineProperty(exports, "JotaiAtomDetailContent", {
-  enumerable: true,
-  get: function () {
-    return _JotaiAtomDetailContent.JotaiAtomDetailContent;
-  }
-});
-Object.defineProperty(exports, "JotaiAtomDetailFooter", {
-  enumerable: true,
-  get: function () {
-    return _JotaiAtomDetailContent.JotaiAtomDetailFooter;
-  }
-});
-Object.defineProperty(exports, "JotaiAtomValueDetailContent", {
-  enumerable: true,
-  get: function () {
-    return _JotaiAtomValueDetailContent.JotaiAtomValueDetailContent;
-  }
-});
-Object.defineProperty(exports, "JotaiIcon", {
-  enumerable: true,
-  get: function () {
-    return _JotaiIcon.JotaiIcon;
-  }
-});
-Object.defineProperty(exports, "JotaiModal", {
-  enumerable: true,
-  get: function () {
-    return _JotaiModal.JotaiModal;
-  }
-});
-Object.defineProperty(exports, "JotaiToolView", {
-  enumerable: true,
-  get: function () {
-    return _JotaiModal.JotaiToolView;
-  }
-});
-Object.defineProperty(exports, "createJotaiTool", {
-  enumerable: true,
-  get: function () {
-    return _preset.createJotaiTool;
-  }
-});
-Object.defineProperty(exports, "isAtomWatched", {
-  enumerable: true,
-  get: function () {
-    return _watchAtoms.isAtomWatched;
-  }
-});
-Object.defineProperty(exports, "jotaiStateStore", {
-  enumerable: true,
-  get: function () {
-    return _jotaiStateStore.jotaiStateStore;
-  }
-});
-Object.defineProperty(exports, "jotaiSyncAdapter", {
-  enumerable: true,
-  get: function () {
-    return _jotaiSyncAdapter.jotaiSyncAdapter;
-  }
-});
-Object.defineProperty(exports, "jotaiToolPreset", {
-  enumerable: true,
-  get: function () {
-    return _preset.jotaiToolPreset;
-  }
-});
-Object.defineProperty(exports, "useJotaiAtomChanges", {
-  enumerable: true,
-  get: function () {
-    return _useJotaiAtomChanges.useJotaiAtomChanges;
-  }
-});
-Object.defineProperty(exports, "watchAtoms", {
-  enumerable: true,
-  get: function () {
-    return _watchAtoms.watchAtoms;
-  }
-});
-Object.defineProperty(exports, "watchDefaultStoreAtoms", {
-  enumerable: true,
-  get: function () {
-    return _watchAtoms.watchDefaultStoreAtoms;
-  }
-});
-require("./jotai/utils/snapshotProvider");
-var _preset = require("./preset");
-var _watchAtoms = require("./jotai/utils/watchAtoms");
-var _useJotaiAtomChanges = require("./jotai/hooks/useJotaiAtomChanges");
-var _JotaiModal = require("./jotai/components/JotaiModal");
-var _JotaiAtomChangeItem = require("./jotai/components/JotaiAtomChangeItem");
-var _JotaiAtomDetailContent = require("./jotai/components/JotaiAtomDetailContent");
-var _JotaiAtomValueDetailContent = require("./jotai/components/JotaiAtomValueDetailContent");
-var _JotaiIcon = require("./jotai/components/JotaiIcon");
-var _jotaiSyncAdapter = require("./jotai/sync/jotaiSyncAdapter");
-var _jotaiStateStore = require("./jotai/utils/jotaiStateStore");
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"JOTAI_ICON_COLOR",{enumerable:true,get:function(){return _JotaiIcon.JOTAI_ICON_COLOR}});Object.defineProperty(exports,"JotaiAtomChangeItem",{enumerable:true,get:function(){return _JotaiAtomChangeItem.JotaiAtomChangeItem}});Object.defineProperty(exports,"JotaiAtomDetailContent",{enumerable:true,get:function(){return _JotaiAtomDetailContent.JotaiAtomDetailContent}});Object.defineProperty(exports,"JotaiAtomDetailFooter",{enumerable:true,get:function(){return _JotaiAtomDetailContent.JotaiAtomDetailFooter}});Object.defineProperty(exports,"JotaiAtomValueDetailContent",{enumerable:true,get:function(){return _JotaiAtomValueDetailContent.JotaiAtomValueDetailContent}});Object.defineProperty(exports,"JotaiIcon",{enumerable:true,get:function(){return _JotaiIcon.JotaiIcon}});Object.defineProperty(exports,"JotaiModal",{enumerable:true,get:function(){return _JotaiModal.JotaiModal}});Object.defineProperty(exports,"JotaiToolView",{enumerable:true,get:function(){return _JotaiModal.JotaiToolView}});Object.defineProperty(exports,"createJotaiTool",{enumerable:true,get:function(){return _preset.createJotaiTool}});Object.defineProperty(exports,"isAtomWatched",{enumerable:true,get:function(){return _watchAtoms.isAtomWatched}});Object.defineProperty(exports,"jotaiStateStore",{enumerable:true,get:function(){return _jotaiStateStore.jotaiStateStore}});Object.defineProperty(exports,"jotaiSyncAdapter",{enumerable:true,get:function(){return _jotaiSyncAdapter.jotaiSyncAdapter}});Object.defineProperty(exports,"jotaiToolPreset",{enumerable:true,get:function(){return _preset.jotaiToolPreset}});Object.defineProperty(exports,"useJotaiAtomChanges",{enumerable:true,get:function(){return _useJotaiAtomChanges.useJotaiAtomChanges}});Object.defineProperty(exports,"watchAtoms",{enumerable:true,get:function(){return _watchAtoms.watchAtoms}});Object.defineProperty(exports,"watchDefaultStoreAtoms",{enumerable:true,get:function(){return _watchAtoms.watchDefaultStoreAtoms}});require("./jotai/utils/snapshotProvider");var _preset=require("./preset");var _watchAtoms=require("./jotai/utils/watchAtoms");var _useJotaiAtomChanges=require("./jotai/hooks/useJotaiAtomChanges");var _JotaiModal=require("./jotai/components/JotaiModal");var _JotaiAtomChangeItem=require("./jotai/components/JotaiAtomChangeItem");var _JotaiAtomDetailContent=require("./jotai/components/JotaiAtomDetailContent");var _JotaiAtomValueDetailContent=require("./jotai/components/JotaiAtomValueDetailContent");var _JotaiIcon=require("./jotai/components/JotaiIcon");var _jotaiSyncAdapter=require("./jotai/sync/jotaiSyncAdapter");var _jotaiStateStore=require("./jotai/utils/jotaiStateStore");

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

@@ -1,199 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.JotaiAtomBrowser = JotaiAtomBrowser;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _sharedUi = require("@buoy-gg/shared-ui");
-var _jotaiStateStore = require("../utils/jotaiStateStore");
-var _testIDs = require("../utils/testIDs");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * JotaiAtomBrowser
- *
- * Atoms tab — shows all registered Jotai atoms and their current value.
- * 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.
- */
-
-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)) {
-      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 "";
-  }
-}
-
-/**
- * The card's categorical slot — the atom's write story, mirroring the
- * zustand card's "persisted"/"in-memory" backing label.
- */
-function getWriteKindLabel(atom) {
-  if (atom.writeKind === "value") return "primitive";
-  if (atom.writeKind === "action") return "custom write";
-  return atom.setValue ? "writable" : "derived";
-}
-function EmptyBrowserState() {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolEmptyState, {
-    testID: `${_testIDs.JOTAI_TEST_ID}-atoms-empty`
-    // scanning = "scanning for targets… and finding none". The registry is
-    // discovered, not configured, so an empty one is a scan result.
-    ,
-    otto: "scanning",
-    title: "No atoms registered",
-    message: "Use watchAtoms(store, { atomName }) to register your Jotai atoms.\nThey will appear here with their current value."
-  });
-}
-function JotaiAtomBrowser({
-  atoms,
-  searchQuery,
-  onOpenAtom
-}) {
-  const filteredAtoms = (0, _react.useMemo)(() => {
-    if (!searchQuery) return atoms;
-    const search = searchQuery.toLowerCase();
-    return atoms.filter(a => a.label.toLowerCase().includes(search));
-  }, [atoms, searchQuery]);
-  if (filteredAtoms.length === 0 && !searchQuery) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyBrowserState, {});
-  }
-  if (filteredAtoms.length === 0 && searchQuery) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolEmptyState, {
-      testID: `${_testIDs.JOTAI_TEST_ID}-atoms-no-match`,
-      ...(0, _sharedUi.resolveListEmptyState)({
-        subject: "atoms",
-        verb: "registered",
-        search: searchQuery,
-        total: atoms.length,
-        waiting: {
-          otto: "scanning",
-          title: "No atoms registered",
-          message: "Use watchAtoms() to register your Jotai atoms."
-        }
-      })
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
-    style: styles.container,
-    contentContainerStyle: styles.scrollContent,
-    showsVerticalScrollIndicator: true,
-    testID: `${_testIDs.JOTAI_TEST_ID}-atoms-scroll`,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.sectionHeader,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.sectionTitle,
-        children: "ATOMS"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.sectionCountBadge,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.sectionCountText,
-          testID: `${_testIDs.JOTAI_TEST_ID}-atoms-count`,
-          children: filteredAtoms.length
-        })
-      })]
-    }), filteredAtoms.map(atom => {
-      const valuePreview = getValuePreview(atom);
-      const atomColor = _jotaiStateStore.jotaiStateStore.getAtomColor(atom.label);
-      const rowID = (0, _testIDs.atomRowTestID)(atom.label);
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.atomRowWrapper,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CompactRow, {
-          statusDotColor: atomColor,
-          statusLabel: getWriteKindLabel(atom),
-          primaryText: atom.label,
-          secondaryText: valuePreview || undefined,
-          showChevron: true,
-          onPress: () => onOpenAtom(atom.label),
-          testID: rowID,
-          statusTestID: `${rowID}-kind`,
-          primaryTestID: `${rowID}-name`,
-          secondaryTestID: `${rowID}-preview`
-        }), atom.changeCount > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: [styles.absCountBadge, {
-            backgroundColor: atomColor + "22",
-            borderColor: atomColor + "55"
-          }],
-          pointerEvents: "none",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: [styles.absCountText, {
-              color: atomColor
-            }],
-            testID: `${rowID}-count`,
-            children: String(atom.changeCount)
-          })
-        })]
-      }, atom.label);
-    })]
-  });
-}
-const styles = _reactNative.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: _sharedUi.monoFont
-  },
-  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: _sharedUi.night.color.textTertiary
-  },
-  sectionCountBadge: {
-    backgroundColor: _sharedUi.night.color.accentFill,
-    paddingHorizontal: 8,
-    paddingVertical: 2,
-    borderRadius: 4
-  },
-  sectionCountText: {
-    fontSize: 10,
-    fontWeight: "700",
-    color: _sharedUi.night.color.accent,
-    fontFamily: _sharedUi.monoFont
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.JotaiAtomBrowser=JotaiAtomBrowser;var _react=require("react");var _reactNative=require("react-native");var _sharedUi=require("@buoy-gg/shared-ui");var _jotaiStateStore=require("../utils/jotaiStateStore");var _testIDs=require("../utils/testIDs");var _jsxRuntime=require("react/jsx-runtime");function getValuePreview(r){try{const e=r.getValue();if(e&&typeof e==="object"&&e.__buoyValueOnDevice===true){return"on device"}if(e===void 0)return"undefined";if(e===null)return"null";if(Array.isArray(e)){if(e.length===0)return"[]";return`[${e.length} item${e.length===1?"":"s"}]`}if(typeof e==="object"){const o=Object.keys(e);if(o.length===0)return"{}";if(o.length<=3)return o.join(", ");return`${o.slice(0,2).join(", ")} +${o.length-2}`}return String(e).slice(0,40)}catch{return""}}function getWriteKindLabel(r){if(r.writeKind==="value")return"primitive";if(r.writeKind==="action")return"custom write";return r.setValue?"writable":"derived"}function EmptyBrowserState(){return(0,_jsxRuntime.jsx)(_sharedUi.ToolEmptyState,{testID:`${_testIDs.JOTAI_TEST_ID}-atoms-empty`,otto:"scanning",title:"No atoms registered",message:"Use watchAtoms(store, { atomName }) to register your Jotai atoms.\nThey will appear here with their current value."})}function JotaiAtomBrowser({atoms:r,searchQuery:e,onOpenAtom:o}){const i=(0,_react.useMemo)(()=>{if(!e)return r;const t=e.toLowerCase();return r.filter(a=>a.label.toLowerCase().includes(t))},[r,e]);if(i.length===0&&!e){return(0,_jsxRuntime.jsx)(EmptyBrowserState,{})}if(i.length===0&&e){return(0,_jsxRuntime.jsx)(_sharedUi.ToolEmptyState,{testID:`${_testIDs.JOTAI_TEST_ID}-atoms-no-match`,...(0,_sharedUi.resolveListEmptyState)({subject:"atoms",verb:"registered",search:e,total:r.length,waiting:{otto:"scanning",title:"No atoms registered",message:"Use watchAtoms() to register your Jotai atoms."}})})}return(0,_jsxRuntime.jsxs)(_reactNative.ScrollView,{style:styles.container,contentContainerStyle:styles.scrollContent,showsVerticalScrollIndicator:true,testID:`${_testIDs.JOTAI_TEST_ID}-atoms-scroll`,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.sectionHeader,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.sectionTitle,children:"ATOMS"}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.sectionCountBadge,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.sectionCountText,testID:`${_testIDs.JOTAI_TEST_ID}-atoms-count`,children:i.length})})]}),i.map(t=>{const a=getValuePreview(t);const s=_jotaiStateStore.jotaiStateStore.getAtomColor(t.label);const n=(0,_testIDs.atomRowTestID)(t.label);return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.atomRowWrapper,children:[(0,_jsxRuntime.jsx)(_sharedUi.CompactRow,{statusDotColor:s,statusLabel:getWriteKindLabel(t),primaryText:t.label,secondaryText:a||void 0,showChevron:true,onPress:()=>o(t.label),testID:n,statusTestID:`${n}-kind`,primaryTestID:`${n}-name`,secondaryTestID:`${n}-preview`}),t.changeCount>0&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.absCountBadge,{backgroundColor:s+"22",borderColor:s+"55"}],pointerEvents:"none",children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.absCountText,{color:s}],testID:`${n}-count`,children:String(t.changeCount)})})]},t.label)})]})}const styles=_reactNative.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:_sharedUi.monoFont},scrollContent:{paddingTop:8,paddingBottom:20},sectionHeader:{flexDirection:"row",alignItems:"center",paddingHorizontal:16,paddingVertical:8,gap:8},sectionTitle:{fontSize:11,fontWeight:"700",letterSpacing:.5,color:_sharedUi.night.color.textTertiary},sectionCountBadge:{backgroundColor:_sharedUi.night.color.accentFill,paddingHorizontal:8,paddingVertical:2,borderRadius:4},sectionCountText:{fontSize:10,fontWeight:"700",color:_sharedUi.night.color.accent,fontFamily:_sharedUi.monoFont}});

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

@@ -1,85 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.JotaiAtomChangeItem = void 0;
-var _react = require("react");
-var _sharedUi = require("@buoy-gg/shared-ui");
-var _jotaiStateStore = require("../utils/jotaiStateStore");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * Compact list item for displaying a Jotai atom change
- *
- * Mirrors ZustandStateChangeItem.tsx — uses shared CompactRow for consistent styling
- */
-
-function getStatusLabel(category, atomLabel) {
-  if (category === "initial") return "Initial";
-  return atomLabel.charAt(0).toUpperCase() + atomLabel.slice(1);
-}
-function getCategoryColor(category, atomLabel) {
-  if (category === "initial") return _sharedUi.night.color.textTertiary;
-  return _jotaiStateStore.jotaiStateStore.getAtomColor(atomLabel);
-}
-function formatCompact(value, maxLen = 20) {
-  if (value === undefined) return "undefined";
-  if (value === null) return "null";
-  if (typeof value === "boolean") return String(value);
-  if (typeof value === "number") return String(value);
-  if (typeof value === "string") {
-    const truncated = value.length > maxLen ? value.slice(0, maxLen - 1) + "…" : value;
-    return `"${truncated}"`;
-  }
-  if (Array.isArray(value)) {
-    return value.length === 0 ? "[]" : `[${value.length} item${value.length === 1 ? "" : "s"}]`;
-  }
-  if (typeof value === "object") {
-    const keys = Object.keys(value);
-    if (keys.length === 0) return "{}";
-    return `{${keys.slice(0, 2).join(", ")}${keys.length > 2 ? "…" : ""}}`;
-  }
-  return String(value).slice(0, maxLen);
-}
-function getSublabel(change) {
-  if (!change.hasValueChange) return "no change";
-  return `${formatCompact(change.prevValue)} → ${formatCompact(change.nextValue)}`;
-}
-function getBadgeText(change) {
-  if (change.category === "initial") return "INIT";
-  return "WRITE";
-}
-function getPrimaryText(change) {
-  if (change.changedKeys.length > 0 && change.changedKeys.length <= 3) {
-    return change.changedKeys.join(", ");
-  }
-  if (change.changedKeys.length > 3) {
-    return `${change.changedKeys.slice(0, 2).join(", ")} +${change.changedKeys.length - 2}`;
-  }
-  return change.valuePreview || "atom()";
-}
-
-// Memo justified by profiling (tool-bench 2026-07-06) — see
-// ZustandStateChangeItem (same pattern).
-const JotaiAtomChangeItem = exports.JotaiAtomChangeItem = /*#__PURE__*/(0, _react.memo)(function JotaiAtomChangeItem({
-  change,
-  onPress,
-  testID
-}) {
-  const statusColor = getCategoryColor(change.category, change.atomLabel);
-  const statusLabel = getStatusLabel(change.category, change.atomLabel);
-  const sublabel = getSublabel(change);
-  const primaryText = getPrimaryText(change);
-  const badgeText = getBadgeText(change);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChangeRow, {
-    statusColor: statusColor,
-    statusLabel: statusLabel,
-    sublabel: sublabel,
-    primaryText: primaryText,
-    timestamp: change.timestamp,
-    badgeText: badgeText,
-    changed: change.hasValueChange,
-    onPress: () => onPress(change),
-    testID: testID
-  });
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.JotaiAtomChangeItem=void 0;var _react=require("react");var _sharedUi=require("@buoy-gg/shared-ui");var _jotaiStateStore=require("../utils/jotaiStateStore");var _jsxRuntime=require("react/jsx-runtime");function getStatusLabel(t,e){return e}function getCategoryColor(t,e){if(t==="initial")return _sharedUi.night.color.textTertiary;return _jotaiStateStore.jotaiStateStore.getAtomColor(e)}function formatCompact(t,e=20){if(t===void 0)return"undefined";if(t===null)return"null";if(typeof t==="boolean")return String(t);if(typeof t==="number")return String(t);if(typeof t==="string"){const r=t.length>e?t.slice(0,e-1)+"\u2026":t;return`"${r}"`}if(Array.isArray(t)){return t.length===0?"[]":`[${t.length} item${t.length===1?"":"s"}]`}if(typeof t==="object"){const r=Object.keys(t);if(r.length===0)return"{}";return`{${r.slice(0,2).join(", ")}${r.length>2?"\u2026":""}}`}return String(t).slice(0,e)}function getSublabel(t){if(!t.hasValueChange)return"no change";return`${formatCompact(t.prevValue)} \u2192 ${formatCompact(t.nextValue)}`}function getBadgeText(t){if(t.category==="initial")return"INIT";return"WRITE"}function getPrimaryText(t){const e=t.nextValue;const r=typeof e==="object"&&e!==null&&!Array.isArray(e);if(!r)return formatCompact(e);if(t.changedKeys.length>0&&t.changedKeys.length<=3){return t.changedKeys.join(", ")}if(t.changedKeys.length>3){return`${t.changedKeys.slice(0,2).join(", ")} +${t.changedKeys.length-2}`}return t.valuePreview||"atom()"}const JotaiAtomChangeItem=exports.JotaiAtomChangeItem=(0,_react.memo)(function t({change:e,onPress:r,testID:n}){const o=getCategoryColor(e.category,e.atomLabel);const i=getStatusLabel(e.category,e.atomLabel);const s=getSublabel(e);const a=getPrimaryText(e);const u=getBadgeText(e);return(0,_jsxRuntime.jsx)(_sharedUi.ChangeRow,{statusColor:o,statusLabel:i,sublabel:s,primaryText:a,timestamp:e.timestamp,badgeText:u,changed:e.hasValueChange,onPress:()=>r(e),testID:n})});