@buoy-gg/jotai 7.0.41 → 7.0.42

package/README.md

@@ -1,96 +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
-
-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.
+Call `watchAtoms(store, atoms)` once at module scope with your Jotai store and a named map of atoms. Existing atoms stay as they are.
 
-## 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)
-
-## Web support (unreleased)
-
-Register the app’s atoms and store with watchAtoms. The shared panel and snapshot provider use those registrations. The browser build is available in this checkout and has not been published yet. See the [web setup guide](https://buoy.gg/buoy/latest/docs/web-preview) for registration, dependencies, and browser boundaries.
+<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,95 +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
- */
-
-/**
- * The atom's name, exactly as registered. INIT rows used to read "Initial",
- * so five registrations were five identical rows, and the name was
- * capitalized ("VisibleCountAtom") into something the code doesn't contain.
- * The INIT badge already says what kind of event it is.
- */
-function getStatusLabel(_category, atomLabel) {
-  return atomLabel;
-}
-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) {
-  // Changed keys only mean something for a plain object. For an array they
-  // are indices ("15, 16 +18"), so show the new value instead.
-  const next = change.nextValue;
-  const isPlainObject = typeof next === "object" && next !== null && !Array.isArray(next);
-  if (!isPlainObject) return formatCompact(next);
-  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})});