@buoy-gg/jotai 7.0.30 → 7.0.32

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

@@ -4,14 +4,16 @@
  * JotaiAtomBrowser
  *
  * Atoms tab — shows all registered Jotai atoms and their current value.
- * Mirrors ZustandStoreBrowser.tsx from @buoy-gg/zustand.
+ * 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.
  */
 
-import { useState, useMemo, useCallback } from "react";
-import { View, Text, StyleSheet, ScrollView, TouchableOpacity } from "react-native";
-import { CompactRow, buoyColors, night, Box, ExpandedInfoRow, PillBadge, parseValue } from "@buoy-gg/shared-ui";
-import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
+import { useMemo } from "react";
+import { View, Text, StyleSheet, ScrollView } from "react-native";
+import { CompactRow, night, Box } from "@buoy-gg/shared-ui";
 import { jotaiStateStore } from "../utils/jotaiStateStore";
+import { JOTAI_TEST_ID, atomRowTestID } from "../utils/testIDs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function getValuePreview(atom) {
   try {
@@ -36,84 +38,26 @@ function getValuePreview(atom) {
     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")
-      })
-    })]
-  });
+
+/**
+ * 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__*/_jsxs(View, {
     style: styles.emptyState,
+    testID: `${JOTAI_TEST_ID}-atoms-empty`,
     children: [/*#__PURE__*/_jsx(Box, {
       size: 32,
       color: night.color.textTertiary
     }), /*#__PURE__*/_jsx(Text, {
       style: styles.emptyTitle,
+      testID: `${JOTAI_TEST_ID}-atoms-empty-title`,
       children: "No atoms registered"
     }), /*#__PURE__*/_jsx(Text, {
       style: styles.emptyText,
@@ -124,30 +68,23 @@ function EmptyBrowserState() {
 export function JotaiAtomBrowser({
   atoms,
   searchQuery,
-  onViewHistory,
-  onAtomExpand
+  onOpenAtom
 }) {
-  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 => {
-      const next = prev === atom.label ? null : atom.label;
-      if (next) onAtomExpand?.(atom.label);
-      return next;
-    });
-  }, [onAtomExpand]);
   if (filteredAtoms.length === 0 && !searchQuery) {
     return /*#__PURE__*/_jsx(EmptyBrowserState, {});
   }
   if (filteredAtoms.length === 0 && searchQuery) {
     return /*#__PURE__*/_jsxs(View, {
       style: styles.emptyState,
+      testID: `${JOTAI_TEST_ID}-atoms-no-match`,
       children: [/*#__PURE__*/_jsx(Text, {
         style: styles.emptyTitle,
+        testID: `${JOTAI_TEST_ID}-atoms-no-match-title`,
         children: "No matching atoms"
       }), /*#__PURE__*/_jsxs(Text, {
         style: styles.emptyText,
@@ -159,6 +96,7 @@ export function JotaiAtomBrowser({
     style: styles.container,
     contentContainerStyle: styles.scrollContent,
     showsVerticalScrollIndicator: true,
+    testID: `${JOTAI_TEST_ID}-atoms-scroll`,
     children: [/*#__PURE__*/_jsxs(View, {
       style: styles.sectionHeader,
       children: [/*#__PURE__*/_jsx(Text, {
@@ -168,27 +106,27 @@ export function JotaiAtomBrowser({
         style: styles.sectionCountBadge,
         children: /*#__PURE__*/_jsx(Text, {
           style: styles.sectionCountText,
+          testID: `${JOTAI_TEST_ID}-atoms-count`,
           children: filteredAtoms.length
         })
       })]
     }), filteredAtoms.map(atom => {
-      const isExpanded = expandedAtom === atom.label;
       const valuePreview = getValuePreview(atom);
       const atomColor = jotaiStateStore.getAtomColor(atom.label);
+      const rowID = atomRowTestID(atom.label);
       return /*#__PURE__*/_jsxs(View, {
         style: styles.atomRowWrapper,
         children: [/*#__PURE__*/_jsx(CompactRow, {
           statusDotColor: atomColor,
-          statusLabel: atom.label,
-          statusSublabel: getValueType(atom),
-          primaryText: valuePreview,
+          statusLabel: getWriteKindLabel(atom),
+          primaryText: atom.label,
+          secondaryText: valuePreview || undefined,
           showChevron: true,
-          isExpanded: isExpanded,
-          onPress: () => handleAtomPress(atom),
-          expandedContent: isExpanded ? /*#__PURE__*/_jsx(AtomExpandedContent, {
-            atom: atom,
-            onViewHistory: onViewHistory
-          }) : undefined
+          onPress: () => onOpenAtom(atom.label),
+          testID: rowID,
+          statusTestID: `${rowID}-kind`,
+          primaryTestID: `${rowID}-name`,
+          secondaryTestID: `${rowID}-preview`
         }), atom.changeCount > 0 && /*#__PURE__*/_jsx(View, {
           style: [styles.absCountBadge, {
             backgroundColor: atomColor + "22",
@@ -199,6 +137,7 @@ export function JotaiAtomBrowser({
             style: [styles.absCountText, {
               color: atomColor
             }],
+            testID: `${rowID}-count`,
             children: String(atom.changeCount)
           })
         })]
@@ -274,32 +213,4 @@ const styles = StyleSheet.create({
     textAlign: "center",
     lineHeight: 18
   }
-});
-const expandedStyles = StyleSheet.create({
-  container: {
-    gap: 10
-  },
-  viewHistoryButton: {
-    marginLeft: 4
-  },
-  viewHistoryText: {
-    fontSize: 10,
-    fontWeight: "600",
-    fontFamily: "monospace"
-  },
-  dataContainer: {
-    // Inset display panel — darker than the card, the night track color.
-    backgroundColor: night.color.bg,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    overflow: "hidden",
-    minHeight: 60
-  },
-  primitiveText: {
-    color: night.color.text,
-    fontSize: 12,
-    fontFamily: "monospace",
-    padding: 14
-  }
 });

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

@@ -60,28 +60,37 @@ function getPrimaryText(change) {
 // ZustandStateChangeItem (same pattern).
 export const JotaiAtomChangeItem = /*#__PURE__*/memo(function JotaiAtomChangeItem({
   change,
-  onPress
+  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);
-  const customBadge = change.hasValueChange ? /*#__PURE__*/_jsxs(View, {
+
+  // Always a custom badge, even when there is no icon to hang off it. The
+  // alternative — letting CompactRow draw `badgeText` itself — leaves the one
+  // row whose badge matters most (a write that moved the atom's identity but
+  // none of its contents) as the only row in the list with no handle on its
+  // badge. Same call, and the same reason, as ZustandStateChangeItem.
+  const customBadge = /*#__PURE__*/_jsxs(View, {
     style: styles.badgeContainer,
     children: [/*#__PURE__*/_jsx(Text, {
       style: [styles.badgeText, {
         color: statusColor
       }],
+      testID: testID ? `${testID}-badge` : undefined,
       children: badgeText
-    }), /*#__PURE__*/_jsx(View, {
+    }), change.hasValueChange ? /*#__PURE__*/_jsx(View, {
       style: styles.changeBadge,
+      testID: testID ? `${testID}-change` : undefined,
       children: /*#__PURE__*/_jsx(Zap, {
         size: 12,
         color: buoyColors.warning
       })
-    })]
-  }) : undefined;
+    }) : null]
+  });
   return /*#__PURE__*/_jsx(CompactRow, {
     statusDotColor: statusColor,
     statusLabel: statusLabel,
@@ -91,10 +100,13 @@ export const JotaiAtomChangeItem = /*#__PURE__*/memo(function JotaiAtomChangeIte
       timestamp: change.timestamp
     }),
     customBadge: customBadge,
-    badgeText: customBadge ? undefined : badgeText,
     badgeColor: statusColor,
     showChevron: true,
-    onPress: () => onPress(change)
+    onPress: () => onPress(change),
+    testID: testID,
+    statusTestID: testID ? `${testID}-status` : undefined,
+    statusSublabelTestID: testID ? `${testID}-sublabel` : undefined,
+    primaryTestID: testID ? `${testID}-keys` : undefined
   });
 });
 const styles = StyleSheet.create({

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

@@ -17,6 +17,7 @@ import { buoyColors, night, EventStepperFooter, formatRelativeTime, parseValue,
 import { DataViewer, SplitDiffViewer, TreeDiffViewer, diffThemes } from "@buoy-gg/shared-ui/dataViewer";
 import { useIsPro } from "@buoy-gg/license";
 import { jotaiStateStore } from "../utils/jotaiStateStore";
+import { JOTAI_TEST_ID, slugForTestID } from "../utils/testIDs";
 
 // ---- View Toggle ----
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -53,6 +54,13 @@ function DetailViewToggle({
         }], isDisabled && toggleStyles.cardDisabled],
         onPress: () => !isDisabled && onViewChange(config.key),
         activeOpacity: 0.7,
+        testID: `${JOTAI_TEST_ID}-view-${config.key}`,
+        accessibilityRole: "button",
+        accessibilityLabel: config.label,
+        accessibilityState: {
+          disabled: isDisabled,
+          selected: isActive
+        },
         children: /*#__PURE__*/_jsxs(View, {
           style: toggleStyles.cardContent,
           children: [/*#__PURE__*/_jsx(IconComponent, {
@@ -143,8 +151,10 @@ const JotaiAtomInfoView = /*#__PURE__*/memo(function JotaiAtomInfoView({
     style: infoStyles.container,
     contentContainerStyle: infoStyles.content,
     showsVerticalScrollIndicator: false,
+    testID: `${JOTAI_TEST_ID}-detail-scroll`,
     children: [/*#__PURE__*/_jsxs(View, {
       style: infoStyles.card,
+      testID: `${JOTAI_TEST_ID}-info-card`,
       children: [/*#__PURE__*/_jsx(View, {
         style: infoStyles.sectionHeader,
         children: /*#__PURE__*/_jsxs(View, {
@@ -170,6 +180,7 @@ const JotaiAtomInfoView = /*#__PURE__*/memo(function JotaiAtomInfoView({
             }],
             numberOfLines: 1,
             ellipsizeMode: "middle",
+            testID: `${JOTAI_TEST_ID}-info-atom`,
             children: change.atomLabel
           })]
         }), /*#__PURE__*/_jsxs(View, {
@@ -179,6 +190,7 @@ const JotaiAtomInfoView = /*#__PURE__*/memo(function JotaiAtomInfoView({
             children: "Time"
           }), /*#__PURE__*/_jsx(Text, {
             style: [infoStyles.infoValue, infoStyles.infoValueMono],
+            testID: `${JOTAI_TEST_ID}-info-time`,
             children: formatTime(change.timestamp)
           })]
         }), /*#__PURE__*/_jsxs(View, {
@@ -191,6 +203,7 @@ const JotaiAtomInfoView = /*#__PURE__*/memo(function JotaiAtomInfoView({
               style: [infoStyles.categoryText, {
                 color: categoryInfo.color
               }],
+              testID: `${JOTAI_TEST_ID}-info-category`,
               children: categoryInfo.label
             })
           }), change.hasValueChange ? /*#__PURE__*/_jsxs(View, {
@@ -200,12 +213,14 @@ const JotaiAtomInfoView = /*#__PURE__*/memo(function JotaiAtomInfoView({
               color: buoyColors.success
             }), /*#__PURE__*/_jsx(Text, {
               style: infoStyles.changesText,
+              testID: `${JOTAI_TEST_ID}-info-changes`,
               children: change.diffSummary || "changed"
             })]
           }) : /*#__PURE__*/_jsx(View, {
             style: infoStyles.noChangesBadge,
             children: /*#__PURE__*/_jsx(Text, {
               style: infoStyles.noChangesText,
+              testID: `${JOTAI_TEST_ID}-info-no-changes`,
               children: "no change"
             })
           })]
@@ -213,6 +228,7 @@ const JotaiAtomInfoView = /*#__PURE__*/memo(function JotaiAtomInfoView({
       })]
     }), change.changedKeys.length > 0 && /*#__PURE__*/_jsxs(View, {
       style: infoStyles.card,
+      testID: `${JOTAI_TEST_ID}-keys-card`,
       children: [/*#__PURE__*/_jsxs(View, {
         style: infoStyles.sectionHeader,
         children: [/*#__PURE__*/_jsxs(View, {
@@ -228,6 +244,7 @@ const JotaiAtomInfoView = /*#__PURE__*/memo(function JotaiAtomInfoView({
           style: infoStyles.countBadge,
           children: /*#__PURE__*/_jsx(Text, {
             style: infoStyles.countText,
+            testID: `${JOTAI_TEST_ID}-keys-count`,
             children: change.changedKeys.length
           })
         })]
@@ -239,6 +256,7 @@ const JotaiAtomInfoView = /*#__PURE__*/memo(function JotaiAtomInfoView({
             style: infoStyles.keyBadge,
             children: /*#__PURE__*/_jsx(Text, {
               style: infoStyles.keyText,
+              testID: `${JOTAI_TEST_ID}-key-${slugForTestID(key)}`,
               children: key
             })
           }, key))
@@ -249,6 +267,9 @@ const JotaiAtomInfoView = /*#__PURE__*/memo(function JotaiAtomInfoView({
       children: /*#__PURE__*/_jsx(View, {
         style: [infoStyles.actionButton, infoStyles.actionButtonCopy],
         onTouchEnd: handleCopyValue,
+        testID: `${JOTAI_TEST_ID}-copy-value`,
+        accessibilityRole: "button",
+        accessibilityLabel: "Copy value",
         children: /*#__PURE__*/_jsx(Text, {
           style: [infoStyles.actionButtonText, {
             color: night.color.accent
@@ -323,6 +344,7 @@ export function JotaiAtomDetailContent({
     const parsed = parseValue(change.nextValue);
     return /*#__PURE__*/_jsxs(View, {
       style: styles.contentCard,
+      testID: `${JOTAI_TEST_ID}-value-card`,
       children: [/*#__PURE__*/_jsxs(View, {
         style: styles.valueHeader,
         children: [/*#__PURE__*/_jsx(Text, {
@@ -344,6 +366,7 @@ export function JotaiAtomDetailContent({
             style: styles.typeBadge,
             children: /*#__PURE__*/_jsx(Text, {
               style: styles.typeText,
+              testID: `${JOTAI_TEST_ID}-value-type`,
               children: valueType.toUpperCase()
             })
           })]
@@ -395,7 +418,13 @@ export function JotaiAtomDetailContent({
   const handleFooterNext = useCallback(() => {
     onIndexChange(Math.max(0, selectedIndex - 1));
   }, [selectedIndex, onIndexChange]);
-  const diffDisabled = totalChanges <= 1;
+
+  // The diff compares THIS change's prevValue/nextValue — no siblings needed.
+  // Gating on `changes.length` greyed DIFF out for every jotai event opened
+  // from the Events timeline (a one-element array). Only a change with no
+  // captured previous value has nothing to compare.
+  const diffDisabled = change.prevValue === undefined;
+  const showInternalFooter = !disableInternalFooter && totalChanges > 1;
   return /*#__PURE__*/_jsxs(View, {
     style: styles.container,
     children: [/*#__PURE__*/_jsx(DetailViewToggle, {
@@ -403,7 +432,7 @@ export function JotaiAtomDetailContent({
       onViewChange: setActiveView,
       diffDisabled: diffDisabled
     }), /*#__PURE__*/_jsxs(View, {
-      style: styles.contentArea,
+      style: [styles.contentArea, showInternalFooter && styles.contentAreaFooterPad],
       children: [activeView === "change" && /*#__PURE__*/_jsx(JotaiAtomInfoView, {
         change: change
       }), activeView === "value" && /*#__PURE__*/_jsx(View, {
@@ -411,19 +440,22 @@ export function JotaiAtomDetailContent({
         children: renderValueView()
       }), activeView === "diff" && /*#__PURE__*/_jsxs(View, {
         style: styles.diffContainer,
+        testID: `${JOTAI_TEST_ID}-diff`,
         children: [/*#__PURE__*/_jsx(DiffModeTabs, {
           tabs: DIFF_MODE_TABS,
           activeTab: diffMode,
-          onTabChange: setDiffMode
+          onTabChange: setDiffMode,
+          testIDPrefix: `${JOTAI_TEST_ID}-diff-tab`
         }), /*#__PURE__*/_jsx(CompareBar, {
           leftEvent: leftEvent,
           rightEvent: rightEvent
         }), /*#__PURE__*/_jsx(View, {
           style: styles.diffContent,
+          testID: `${JOTAI_TEST_ID}-diff-content`,
           children: renderDiffContent()
         })]
       })]
-    }), !disableInternalFooter && totalChanges > 1 && /*#__PURE__*/_jsx(EventStepperFooter, {
+    }), showInternalFooter && /*#__PURE__*/_jsx(EventStepperFooter, {
       currentIndex: chronologicalNumber - 1,
       totalItems: totalChanges,
       onPrevious: handleFooterPrevious,
@@ -459,7 +491,11 @@ const styles = StyleSheet.create({
     backgroundColor: "transparent"
   },
   contentArea: {
-    flex: 1,
+    flex: 1
+  },
+  // Clearance for the absolute EventStepperFooter — only when it renders,
+  // otherwise hosts like the Events tool get a dead band at the sheet bottom.
+  contentAreaFooterPad: {
     paddingBottom: 96
   },
   stateContainer: {