@buoy-gg/jotai 7.0.30 → 7.0.32

package/lib/commonjs/index.js

@@ -27,6 +27,12 @@ Object.defineProperty(exports, "JotaiAtomDetailFooter", {
     return _JotaiAtomDetailContent.JotaiAtomDetailFooter;
   }
 });
+Object.defineProperty(exports, "JotaiAtomValueDetailContent", {
+  enumerable: true,
+  get: function () {
+    return _JotaiAtomValueDetailContent.JotaiAtomValueDetailContent;
+  }
+});
 Object.defineProperty(exports, "JotaiIcon", {
   enumerable: true,
   get: function () {
@@ -100,6 +106,7 @@ 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

@@ -7,14 +7,16 @@ 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 _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.
+ * 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) {
@@ -40,84 +42,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 = (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")
-      })
-    })]
-  });
+
+/**
+ * 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.jsxs)(_reactNative.View, {
     style: styles.emptyState,
+    testID: `${_testIDs.JOTAI_TEST_ID}-atoms-empty`,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Box, {
       size: 32,
       color: _sharedUi.night.color.textTertiary
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: styles.emptyTitle,
+      testID: `${_testIDs.JOTAI_TEST_ID}-atoms-empty-title`,
       children: "No atoms registered"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: styles.emptyText,
@@ -128,30 +72,23 @@ function EmptyBrowserState() {
 function JotaiAtomBrowser({
   atoms,
   searchQuery,
-  onViewHistory,
-  onAtomExpand
+  onOpenAtom
 }) {
-  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 => {
-      const next = prev === atom.label ? null : atom.label;
-      if (next) onAtomExpand?.(atom.label);
-      return next;
-    });
-  }, [onAtomExpand]);
   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,
+      testID: `${_testIDs.JOTAI_TEST_ID}-atoms-no-match`,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: styles.emptyTitle,
+        testID: `${_testIDs.JOTAI_TEST_ID}-atoms-no-match-title`,
         children: "No matching atoms"
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
         style: styles.emptyText,
@@ -163,6 +100,7 @@ function JotaiAtomBrowser({
     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, {
@@ -172,27 +110,27 @@ function JotaiAtomBrowser({
         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 isExpanded = expandedAtom === atom.label;
       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: 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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: [styles.absCountBadge, {
             backgroundColor: atomColor + "22",
@@ -203,6 +141,7 @@ function JotaiAtomBrowser({
             style: [styles.absCountText, {
               color: atomColor
             }],
+            testID: `${rowID}-count`,
             children: String(atom.changeCount)
           })
         })]
@@ -278,32 +217,4 @@ const styles = _reactNative.StyleSheet.create({
     textAlign: "center",
     lineHeight: 18
   }
-});
-const expandedStyles = _reactNative.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: _sharedUi.night.color.bg,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.border,
-    overflow: "hidden",
-    minHeight: 60
-  },
-  primitiveText: {
-    color: _sharedUi.night.color.text,
-    fontSize: 12,
-    fontFamily: "monospace",
-    padding: 14
-  }
 });

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

@@ -64,28 +64,37 @@ function getPrimaryText(change) {
 // ZustandStateChangeItem (same pattern).
 const JotaiAtomChangeItem = exports.JotaiAtomChangeItem = /*#__PURE__*/(0, _react.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__*/(0, _jsxRuntime.jsxs)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: styles.badgeContainer,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: [styles.badgeText, {
         color: statusColor
       }],
+      testID: testID ? `${testID}-badge` : undefined,
       children: badgeText
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    }), change.hasValueChange ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: styles.changeBadge,
+      testID: testID ? `${testID}-change` : undefined,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Zap, {
         size: 12,
         color: _sharedUi.buoyColors.warning
       })
-    })]
-  }) : undefined;
+    }) : null]
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CompactRow, {
     statusDotColor: statusColor,
     statusLabel: statusLabel,
@@ -95,10 +104,13 @@ const JotaiAtomChangeItem = exports.JotaiAtomChangeItem = /*#__PURE__*/(0, _reac
       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 = _reactNative.StyleSheet.create({

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

@@ -11,6 +11,7 @@ var _sharedUi = require("@buoy-gg/shared-ui");
 var _dataViewer = require("@buoy-gg/shared-ui/dataViewer");
 var _license = require("@buoy-gg/license");
 var _jotaiStateStore = require("../utils/jotaiStateStore");
+var _testIDs = require("../utils/testIDs");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
@@ -58,6 +59,13 @@ function DetailViewToggle({
         }], isDisabled && toggleStyles.cardDisabled],
         onPress: () => !isDisabled && onViewChange(config.key),
         activeOpacity: 0.7,
+        testID: `${_testIDs.JOTAI_TEST_ID}-view-${config.key}`,
+        accessibilityRole: "button",
+        accessibilityLabel: config.label,
+        accessibilityState: {
+          disabled: isDisabled,
+          selected: isActive
+        },
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           style: toggleStyles.cardContent,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
@@ -148,8 +156,10 @@ const JotaiAtomInfoView = /*#__PURE__*/(0, _react.memo)(function JotaiAtomInfoVi
     style: infoStyles.container,
     contentContainerStyle: infoStyles.content,
     showsVerticalScrollIndicator: false,
+    testID: `${_testIDs.JOTAI_TEST_ID}-detail-scroll`,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: infoStyles.card,
+      testID: `${_testIDs.JOTAI_TEST_ID}-info-card`,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: infoStyles.sectionHeader,
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -175,6 +185,7 @@ const JotaiAtomInfoView = /*#__PURE__*/(0, _react.memo)(function JotaiAtomInfoVi
             }],
             numberOfLines: 1,
             ellipsizeMode: "middle",
+            testID: `${_testIDs.JOTAI_TEST_ID}-info-atom`,
             children: change.atomLabel
           })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -184,6 +195,7 @@ const JotaiAtomInfoView = /*#__PURE__*/(0, _react.memo)(function JotaiAtomInfoVi
             children: "Time"
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: [infoStyles.infoValue, infoStyles.infoValueMono],
+            testID: `${_testIDs.JOTAI_TEST_ID}-info-time`,
             children: formatTime(change.timestamp)
           })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -196,6 +208,7 @@ const JotaiAtomInfoView = /*#__PURE__*/(0, _react.memo)(function JotaiAtomInfoVi
               style: [infoStyles.categoryText, {
                 color: categoryInfo.color
               }],
+              testID: `${_testIDs.JOTAI_TEST_ID}-info-category`,
               children: categoryInfo.label
             })
           }), change.hasValueChange ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -205,12 +218,14 @@ const JotaiAtomInfoView = /*#__PURE__*/(0, _react.memo)(function JotaiAtomInfoVi
               color: _sharedUi.buoyColors.success
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: infoStyles.changesText,
+              testID: `${_testIDs.JOTAI_TEST_ID}-info-changes`,
               children: change.diffSummary || "changed"
             })]
           }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
             style: infoStyles.noChangesBadge,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: infoStyles.noChangesText,
+              testID: `${_testIDs.JOTAI_TEST_ID}-info-no-changes`,
               children: "no change"
             })
           })]
@@ -218,6 +233,7 @@ const JotaiAtomInfoView = /*#__PURE__*/(0, _react.memo)(function JotaiAtomInfoVi
       })]
     }), change.changedKeys.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: infoStyles.card,
+      testID: `${_testIDs.JOTAI_TEST_ID}-keys-card`,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: infoStyles.sectionHeader,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -233,6 +249,7 @@ const JotaiAtomInfoView = /*#__PURE__*/(0, _react.memo)(function JotaiAtomInfoVi
           style: infoStyles.countBadge,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: infoStyles.countText,
+            testID: `${_testIDs.JOTAI_TEST_ID}-keys-count`,
             children: change.changedKeys.length
           })
         })]
@@ -244,6 +261,7 @@ const JotaiAtomInfoView = /*#__PURE__*/(0, _react.memo)(function JotaiAtomInfoVi
             style: infoStyles.keyBadge,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: infoStyles.keyText,
+              testID: `${_testIDs.JOTAI_TEST_ID}-key-${(0, _testIDs.slugForTestID)(key)}`,
               children: key
             })
           }, key))
@@ -254,6 +272,9 @@ const JotaiAtomInfoView = /*#__PURE__*/(0, _react.memo)(function JotaiAtomInfoVi
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: [infoStyles.actionButton, infoStyles.actionButtonCopy],
         onTouchEnd: handleCopyValue,
+        testID: `${_testIDs.JOTAI_TEST_ID}-copy-value`,
+        accessibilityRole: "button",
+        accessibilityLabel: "Copy value",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [infoStyles.actionButtonText, {
             color: _sharedUi.night.color.accent
@@ -328,6 +349,7 @@ function JotaiAtomDetailContent({
     const parsed = (0, _sharedUi.parseValue)(change.nextValue);
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.contentCard,
+      testID: `${_testIDs.JOTAI_TEST_ID}-value-card`,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.valueHeader,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -349,6 +371,7 @@ function JotaiAtomDetailContent({
             style: styles.typeBadge,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: styles.typeText,
+              testID: `${_testIDs.JOTAI_TEST_ID}-value-type`,
               children: valueType.toUpperCase()
             })
           })]
@@ -400,7 +423,13 @@ function JotaiAtomDetailContent({
   const handleFooterNext = (0, _react.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: styles.container,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DetailViewToggle, {
@@ -408,7 +437,7 @@ function JotaiAtomDetailContent({
       onViewChange: setActiveView,
       diffDisabled: diffDisabled
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.contentArea,
+      style: [styles.contentArea, showInternalFooter && styles.contentAreaFooterPad],
       children: [activeView === "change" && /*#__PURE__*/(0, _jsxRuntime.jsx)(JotaiAtomInfoView, {
         change: change
       }), activeView === "value" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -416,19 +445,22 @@ function JotaiAtomDetailContent({
         children: renderValueView()
       }), activeView === "diff" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.diffContainer,
+        testID: `${_testIDs.JOTAI_TEST_ID}-diff`,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.DiffModeTabs, {
           tabs: DIFF_MODE_TABS,
           activeTab: diffMode,
-          onTabChange: setDiffMode
+          onTabChange: setDiffMode,
+          testIDPrefix: `${_testIDs.JOTAI_TEST_ID}-diff-tab`
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CompareBar, {
           leftEvent: leftEvent,
           rightEvent: rightEvent
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: styles.diffContent,
+          testID: `${_testIDs.JOTAI_TEST_ID}-diff-content`,
           children: renderDiffContent()
         })]
       })]
-    }), !disableInternalFooter && totalChanges > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.EventStepperFooter, {
+    }), showInternalFooter && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.EventStepperFooter, {
       currentIndex: chronologicalNumber - 1,
       totalItems: totalChanges,
       onPrevious: handleFooterPrevious,
@@ -464,7 +496,11 @@ const styles = _reactNative.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: {