@buoy-gg/jotai 2.1.10 → 2.1.12

package/lib/commonjs/index.js

@@ -1 +1,91 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"JOTAI_ICON_COLOR",{enumerable:!0,get:function(){return _JotaiIcon.JOTAI_ICON_COLOR}}),Object.defineProperty(exports,"JotaiAtomChangeItem",{enumerable:!0,get:function(){return _JotaiAtomChangeItem.JotaiAtomChangeItem}}),Object.defineProperty(exports,"JotaiAtomDetailContent",{enumerable:!0,get:function(){return _JotaiAtomDetailContent.JotaiAtomDetailContent}}),Object.defineProperty(exports,"JotaiAtomDetailFooter",{enumerable:!0,get:function(){return _JotaiAtomDetailContent.JotaiAtomDetailFooter}}),Object.defineProperty(exports,"JotaiIcon",{enumerable:!0,get:function(){return _JotaiIcon.JotaiIcon}}),Object.defineProperty(exports,"JotaiModal",{enumerable:!0,get:function(){return _JotaiModal.JotaiModal}}),Object.defineProperty(exports,"createJotaiTool",{enumerable:!0,get:function(){return _preset.createJotaiTool}}),Object.defineProperty(exports,"isAtomWatched",{enumerable:!0,get:function(){return _watchAtoms.isAtomWatched}}),Object.defineProperty(exports,"jotaiStateStore",{enumerable:!0,get:function(){return _jotaiStateStore.jotaiStateStore}}),Object.defineProperty(exports,"jotaiToolPreset",{enumerable:!0,get:function(){return _preset.jotaiToolPreset}}),Object.defineProperty(exports,"useJotaiAtomChanges",{enumerable:!0,get:function(){return _useJotaiAtomChanges.useJotaiAtomChanges}}),Object.defineProperty(exports,"watchAtoms",{enumerable:!0,get:function(){return _watchAtoms.watchAtoms}}),Object.defineProperty(exports,"watchDefaultStoreAtoms",{enumerable:!0,get:function(){return _watchAtoms.watchDefaultStoreAtoms}});var _preset=require("./preset"),_watchAtoms=require("./jotai/utils/watchAtoms"),_useJotaiAtomChanges=require("./jotai/hooks/useJotaiAtomChanges"),_JotaiModal=require("./jotai/components/JotaiModal"),_JotaiAtomChangeItem=require("./jotai/components/JotaiAtomChangeItem"),_JotaiAtomDetailContent=require("./jotai/components/JotaiAtomDetailContent"),_JotaiIcon=require("./jotai/components/JotaiIcon"),_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, "JotaiIcon", {
+  enumerable: true,
+  get: function () {
+    return _JotaiIcon.JotaiIcon;
+  }
+});
+Object.defineProperty(exports, "JotaiModal", {
+  enumerable: true,
+  get: function () {
+    return _JotaiModal.JotaiModal;
+  }
+});
+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, "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;
+  }
+});
+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 _JotaiIcon = require("./jotai/components/JotaiIcon");
+var _jotaiStateStore = require("./jotai/utils/jotaiStateStore");

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

@@ -1 +1,300 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.JotaiAtomBrowser=JotaiAtomBrowser;var _react=require("react"),_reactNative=require("react-native"),_sharedUi=require("@buoy-gg/shared-ui"),_dataViewer=require("@buoy-gg/shared-ui/dataViewer"),_jotaiStateStore=require("../utils/jotaiStateStore"),_jsxRuntime=require("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 r=e.getValue(),i=(0,_react.useMemo)(()=>{if(r&&"object"==typeof r){const e={};for(const[t,i]of Object.entries(r))"function"!=typeof i&&(e[t]=i);return(0,_sharedUi.parseValue)(e)}return(0,_sharedUi.parseValue)(r)},[r]);return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:expandedStyles.container,children:[(0,_jsxRuntime.jsx)(_sharedUi.ExpandedInfoRow,{label:"Type",children:(0,_jsxRuntime.jsx)(_sharedUi.PillBadge,{color:e.color,children:"JOTAI"})}),e.changeCount>0&&(0,_jsxRuntime.jsxs)(_sharedUi.ExpandedInfoRow,{label:"Changes",children:[(0,_jsxRuntime.jsx)(_sharedUi.PillBadge,{color:_sharedUi.buoyColors.warning,children:String(e.changeCount)}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:()=>t(e.label),style:expandedStyles.viewHistoryButton,hitSlop:{top:6,bottom:6,left:6,right:6},children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[expandedStyles.viewHistoryText,{color:e.color}],children:"view history →"})})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:expandedStyles.dataContainer,children:i&&"object"==typeof i?(0,_jsxRuntime.jsx)(_dataViewer.DataViewer,{title:"",data:i,showTypeFilter:!0}):(0,_jsxRuntime.jsx)(_reactNative.Text,{style:expandedStyles.primitiveText,children:String(r??"undefined")})})]})}function EmptyBrowserState(){return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.emptyState,children:[(0,_jsxRuntime.jsx)(_sharedUi.Box,{size:32,color:_sharedUi.macOSColors.text.muted}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.emptyTitle,children:"No atoms registered"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.emptyText,children:"Use watchAtoms(store, { atomName }) to register your Jotai atoms.\nThey will appear here with their current value."})]})}function JotaiAtomBrowser({atoms:e,searchQuery:t,onViewHistory:r}){const[i,o]=(0,_react.useState)(null),n=(0,_react.useMemo)(()=>{if(!t)return e;const r=t.toLowerCase();return e.filter(e=>e.label.toLowerCase().includes(r))},[e,t]),a=(0,_react.useCallback)(e=>{o(t=>t===e.label?null:e.label)},[]);return 0!==n.length||t?0===n.length&&t?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.emptyState,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.emptyTitle,children:"No matching atoms"}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.emptyText,children:['No atoms match "',t,'"']})]}):(0,_jsxRuntime.jsxs)(_reactNative.ScrollView,{style:styles.container,contentContainerStyle:styles.scrollContent,showsVerticalScrollIndicator:!0,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,children:n.length})})]}),n.map(e=>{const t=i===e.label,o=getValuePreview(e),n=_jotaiStateStore.jotaiStateStore.getAtomColor(e.label);return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.atomRowWrapper,children:[(0,_jsxRuntime.jsx)(_sharedUi.CompactRow,{statusDotColor:n,statusLabel:e.label,statusSublabel:getValueType(e),primaryText:o,showChevron:!0,isExpanded:t,onPress:()=>a(e),expandedContent:t?(0,_jsxRuntime.jsx)(AtomExpandedContent,{atom:e,onViewHistory:r}):void 0}),e.changeCount>0&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.absCountBadge,{backgroundColor:n+"22",borderColor:n+"55"}],pointerEvents:"none",children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.absCountText,{color:n}],children:String(e.changeCount)})})]},e.label)})]}):(0,_jsxRuntime.jsx)(EmptyBrowserState,{})}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:"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:_sharedUi.macOSColors.text.muted},sectionCountBadge:{backgroundColor:_sharedUi.buoyColors.primary+"26",paddingHorizontal:8,paddingVertical:2,borderRadius:4},sectionCountText:{fontSize:10,fontWeight:"700",color:_sharedUi.buoyColors.primary,fontFamily:"monospace"},emptyState:{alignItems:"center",paddingVertical:40},emptyTitle:{color:_sharedUi.macOSColors.text.primary,fontSize:14,fontWeight:"600",marginTop:12,marginBottom:6},emptyText:{color:_sharedUi.macOSColors.text.muted,fontSize:12,textAlign:"center",lineHeight:18}}),expandedStyles=_reactNative.StyleSheet.create({container:{gap:10},viewHistoryButton:{marginLeft:4},viewHistoryText:{fontSize:10,fontWeight:"600",fontFamily:"monospace"},dataContainer:{backgroundColor:_sharedUi.buoyColors.base,borderRadius:6,borderWidth:1,borderColor:_sharedUi.buoyColors.border,overflow:"hidden",minHeight:60},primitiveText:{color:_sharedUi.buoyColors.text,fontSize:12,fontFamily:"monospace",padding:14}});
+"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 _dataViewer = require("@buoy-gg/shared-ui/dataViewer");
+var _jotaiStateStore = require("../utils/jotaiStateStore");
+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.
+ */
+
+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 = (0, _react.useMemo)(() => {
+    if (value && typeof value === "object") {
+      const filtered = {};
+      for (const [key, v] of Object.entries(value)) {
+        if (typeof v !== "function") filtered[key] = v;
+      }
+      return (0, _sharedUi.parseValue)(filtered);
+    }
+    return (0, _sharedUi.parseValue)(value);
+  }, [value]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: expandedStyles.container,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ExpandedInfoRow, {
+      label: "Type",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PillBadge, {
+        color: atom.color,
+        children: "JOTAI"
+      })
+    }), atom.changeCount > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ExpandedInfoRow, {
+      label: "Changes",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PillBadge, {
+        color: _sharedUi.buoyColors.warning,
+        children: String(atom.changeCount)
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        onPress: () => onViewHistory(atom.label),
+        style: expandedStyles.viewHistoryButton,
+        hitSlop: {
+          top: 6,
+          bottom: 6,
+          left: 6,
+          right: 6
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [expandedStyles.viewHistoryText, {
+            color: atom.color
+          }],
+          children: "view history \u2192"
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: expandedStyles.dataContainer,
+      children: displayValue && typeof displayValue === "object" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
+        title: "",
+        data: displayValue,
+        showTypeFilter: true,
+        rawMode: true,
+        initialExpanded: true
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: expandedStyles.primitiveText,
+        children: String(value ?? "undefined")
+      })
+    })]
+  });
+}
+function EmptyBrowserState() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.emptyState,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Box, {
+      size: 32,
+      color: _sharedUi.macOSColors.text.muted
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.emptyTitle,
+      children: "No atoms registered"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.emptyText,
+      children: "Use watchAtoms(store, { atomName }) to register your Jotai atoms.\nThey will appear here with their current value."
+    })]
+  });
+}
+function JotaiAtomBrowser({
+  atoms,
+  searchQuery,
+  onViewHistory
+}) {
+  const [expandedAtom, setExpandedAtom] = (0, _react.useState)(null);
+  const filteredAtoms = (0, _react.useMemo)(() => {
+    if (!searchQuery) return atoms;
+    const search = searchQuery.toLowerCase();
+    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);
+  }, []);
+  if (filteredAtoms.length === 0 && !searchQuery) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyBrowserState, {});
+  }
+  if (filteredAtoms.length === 0 && searchQuery) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.emptyState,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.emptyTitle,
+        children: "No matching atoms"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+        style: styles.emptyText,
+        children: ["No atoms match \"", searchQuery, "\""]
+      })]
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+    style: styles.container,
+    contentContainerStyle: styles.scrollContent,
+    showsVerticalScrollIndicator: true,
+    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,
+          children: filteredAtoms.length
+        })
+      })]
+    }), filteredAtoms.map(atom => {
+      const isExpanded = expandedAtom === atom.label;
+      const valuePreview = getValuePreview(atom);
+      const atomColor = _jotaiStateStore.jotaiStateStore.getAtomColor(atom.label);
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.atomRowWrapper,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CompactRow, {
+          statusDotColor: atomColor,
+          statusLabel: atom.label,
+          statusSublabel: getValueType(atom),
+          primaryText: valuePreview,
+          showChevron: true,
+          isExpanded: isExpanded,
+          onPress: () => handleAtomPress(atom),
+          expandedContent: isExpanded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AtomExpandedContent, {
+            atom: atom,
+            onViewHistory: onViewHistory
+          }) : undefined
+        }), 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
+            }],
+            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: "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: _sharedUi.macOSColors.text.muted
+  },
+  sectionCountBadge: {
+    backgroundColor: _sharedUi.buoyColors.primary + "26",
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 4
+  },
+  sectionCountText: {
+    fontSize: 10,
+    fontWeight: "700",
+    color: _sharedUi.buoyColors.primary,
+    fontFamily: "monospace"
+  },
+  emptyState: {
+    alignItems: "center",
+    paddingVertical: 40
+  },
+  emptyTitle: {
+    color: _sharedUi.macOSColors.text.primary,
+    fontSize: 14,
+    fontWeight: "600",
+    marginTop: 12,
+    marginBottom: 6
+  },
+  emptyText: {
+    color: _sharedUi.macOSColors.text.muted,
+    fontSize: 12,
+    textAlign: "center",
+    lineHeight: 18
+  }
+});
+const expandedStyles = _reactNative.StyleSheet.create({
+  container: {
+    gap: 10
+  },
+  viewHistoryButton: {
+    marginLeft: 4
+  },
+  viewHistoryText: {
+    fontSize: 10,
+    fontWeight: "600",
+    fontFamily: "monospace"
+  },
+  dataContainer: {
+    backgroundColor: _sharedUi.buoyColors.base,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.border,
+    overflow: "hidden",
+    minHeight: 60
+  },
+  primitiveText: {
+    color: _sharedUi.buoyColors.text,
+    fontSize: 12,
+    fontFamily: "monospace",
+    padding: 14
+  }
+});

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

@@ -1 +1,113 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.JotaiAtomChangeItem=JotaiAtomChangeItem;var _reactNative=require("react-native"),_sharedUi=require("@buoy-gg/shared-ui"),_jotaiStateStore=require("../utils/jotaiStateStore"),_jsxRuntime=require("react/jsx-runtime");function getStatusLabel(e,t){return"initial"===e?"Initial":t.charAt(0).toUpperCase()+t.slice(1)}function getCategoryColor(e,t){return"initial"===e?_sharedUi.buoyColors.textMuted:_jotaiStateStore.jotaiStateStore.getAtomColor(t)}function formatCompact(e,t=20){if(void 0===e)return"undefined";if(null===e)return"null";if("boolean"==typeof e)return String(e);if("number"==typeof e)return String(e);if("string"==typeof e)return`"${e.length>t?e.slice(0,t-1)+"…":e}"`;if(Array.isArray(e))return 0===e.length?"[]":`[${e.length} item${1===e.length?"":"s"}]`;if("object"==typeof e){const t=Object.keys(e);return 0===t.length?"{}":`{${t.slice(0,2).join(", ")}${t.length>2?"…":""}}`}return String(e).slice(0,t)}function getSublabel(e){return e.hasValueChange?`${formatCompact(e.prevValue)} → ${formatCompact(e.nextValue)}`:"no change"}function getBadgeText(e){return"initial"===e.category?"INIT":"WRITE"}function getPrimaryText(e){return e.changedKeys.length>0&&e.changedKeys.length<=3?e.changedKeys.join(", "):e.changedKeys.length>3?`${e.changedKeys.slice(0,2).join(", ")} +${e.changedKeys.length-2}`:e.valuePreview||"atom()"}function JotaiAtomChangeItem({change:e,onPress:t}){const a=getCategoryColor(e.category,e.atomLabel),r=getStatusLabel(e.category,e.atomLabel),n=getSublabel(e),i=getPrimaryText(e),o=getBadgeText(e),s=e.hasValueChange?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.badgeContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.badgeText,{color:a}],children:o}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.changeBadge,children:(0,_jsxRuntime.jsx)(_sharedUi.Zap,{size:12,color:_sharedUi.buoyColors.warning})})]}):void 0;return(0,_jsxRuntime.jsx)(_sharedUi.CompactRow,{statusDotColor:a,statusLabel:r,statusSublabel:n,primaryText:i,bottomRightText:(0,_sharedUi.formatRelativeTime)(e.timestamp),customBadge:s,badgeText:s?void 0:o,badgeColor:a,showChevron:!0,onPress:()=>t(e)})}const styles=_reactNative.StyleSheet.create({badgeContainer:{flexDirection:"row",alignItems:"center",gap:4},badgeText:{fontSize:11,fontWeight:"600",fontFamily:"monospace"},changeBadge:{paddingHorizontal:4}});
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.JotaiAtomChangeItem = JotaiAtomChangeItem;
+var _reactNative = require("react-native");
+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.buoyColors.textMuted;
+  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()";
+}
+function JotaiAtomChangeItem({
+  change,
+  onPress
+}) {
+  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);
+  const relativeTime = (0, _sharedUi.useRelativeTime)(change.timestamp);
+  const customBadge = change.hasValueChange ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.badgeContainer,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.badgeText, {
+        color: statusColor
+      }],
+      children: badgeText
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.changeBadge,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Zap, {
+        size: 12,
+        color: _sharedUi.buoyColors.warning
+      })
+    })]
+  }) : undefined;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CompactRow, {
+    statusDotColor: statusColor,
+    statusLabel: statusLabel,
+    statusSublabel: sublabel,
+    primaryText: primaryText,
+    bottomRightText: relativeTime,
+    customBadge: customBadge,
+    badgeText: customBadge ? undefined : badgeText,
+    badgeColor: statusColor,
+    showChevron: true,
+    onPress: () => onPress(change)
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  badgeContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4
+  },
+  badgeText: {
+    fontSize: 11,
+    fontWeight: "600",
+    fontFamily: "monospace"
+  },
+  changeBadge: {
+    paddingHorizontal: 4
+  }
+});