@buoy-gg/jotai 7.0.33 → 7.0.35

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

@@ -25,17 +25,6 @@ var _jsxRuntime = require("react/jsx-runtime");
  * - Events tab: Live atom change monitoring with diffs
  */
 
-/**
- * Cell clipping, off in e2e bundles only.
- *
- * `removeClippedSubviews` unmounts the views of rows scrolled out of the
- * window, which is what makes a long change list cheap — and which makes
- * Detox report a perfectly rendered row as un-hittable. The env var is
- * inlined at bundle time, so a bundler that does NOT inline it leaves the
- * production behaviour exactly as it was.
- */
-const CLIP_OFFSCREEN_CELLS = !(typeof process !== "undefined" && process.env?.EXPO_PUBLIC_E2E);
-
 /**
  * The change log's "nothing here". Everything but the nouns is the shared
  * precedence — see `ToolEmptyState` in shared-ui for why it lives there.
@@ -358,49 +347,24 @@ function JotaiModal({
         onBack: onBack
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
         title: "",
-        children: isSearchActive ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.headerSearchContainer,
-          testID: `${_testIDs.JOTAI_TEST_ID}-search`,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
-            size: 14,
-            color: _sharedUi.night.color.textSecondary
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
-            ref: searchInputRef,
-            testID: `${_testIDs.JOTAI_TEST_ID}-search-field`,
-            style: styles.headerSearchInput,
-            placeholder: activeTab === "atoms" ? "Search atoms..." : "Search events...",
-            placeholderTextColor: _sharedUi.night.color.placeholder,
-            value: searchText,
-            onChangeText: handleSearch,
-            onSubmitEditing: () => searchInputRef.current?.blur()
-            // Stay open while the query is still narrowing the list.
-            //
-            // Collapsing on blur hid the reason rows were missing: the
-            // header went back to its TABS — whose counts are of the
-            // WHOLE capture — while the list stayed filtered, so the tool
-            // showed "Atoms (8)" above a single row and offered nothing to
-            // explain the gap. The only way back was to reopen a field the
-            // user had no reason to think was still armed. Same shape, and
-            // the same fix, as the Redux, Events and Zustand tools.
-            ,
-            onBlur: () => {
-              if (searchText.length === 0) setIsSearchActive(false);
-            },
-            accessibilityLabel: "Search Jotai atoms and events",
-            autoCapitalize: "none",
-            autoCorrect: false,
-            returnKeyType: "search"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-            onPress: closeSearch,
-            style: styles.headerSearchClear,
-            testID: `${_testIDs.JOTAI_TEST_ID}-search-clear`,
-            accessibilityRole: "button",
-            accessibilityLabel: "Close search",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
-              size: 14,
-              color: _sharedUi.night.color.textSecondary
-            })
-          })]
+        children: isSearchActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Search, {
+          value: searchText,
+          onChangeText: handleSearch,
+          onCancel: closeSearch,
+          placeholder: activeTab === "atoms" ? "Search atoms..." : "Search events...",
+          accessibilityLabel: "Search Jotai atoms and events",
+          iconSize: 14,
+          testID: `${_testIDs.JOTAI_TEST_ID}-search-field`,
+          containerTestID: `${_testIDs.JOTAI_TEST_ID}-search`,
+          clearTestID: `${_testIDs.JOTAI_TEST_ID}-search-clear`
+          // Stay open while the query is still narrowing the list: the
+          // header would otherwise go back to its TABS — whose counts are
+          // of the WHOLE capture — above a filtered list, with nothing to
+          // explain the gap.
+          ,
+          onBlur: () => {
+            if (searchText.length === 0) setIsSearchActive(false);
+          }
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TabSelector, {
           tabs: [{
             key: "atoms",
@@ -490,11 +454,7 @@ function JotaiModal({
         keyExtractor: keyExtractor,
         contentContainerStyle: styles.listContent,
         showsVerticalScrollIndicator: true,
-        removeClippedSubviews: CLIP_OFFSCREEN_CELLS,
-        initialNumToRender: 12,
-        maxToRenderPerBatch: 8,
-        windowSize: 5,
-        updateCellsBatchingPeriod: 50
+        ..._sharedUi.EVENT_LIST_PRESET
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolEmptyState, {
         testID: `${_testIDs.JOTAI_TEST_ID}-history-empty`,
         ...(0, _sharedUi.resolveListEmptyState)({
@@ -583,11 +543,7 @@ function JotaiModal({
         keyExtractor: keyExtractor,
         contentContainerStyle: styles.listContent,
         showsVerticalScrollIndicator: true,
-        removeClippedSubviews: CLIP_OFFSCREEN_CELLS,
-        initialNumToRender: 12,
-        maxToRenderPerBatch: 8,
-        windowSize: 5,
-        updateCellsBatchingPeriod: 50
+        ..._sharedUi.EVENT_LIST_PRESET
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(EventsEmptyState, {
         isEnabled: isEnabled,
         searchText: searchText,
@@ -701,27 +657,6 @@ const styles = _reactNative.StyleSheet.create({
     // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
     backgroundColor: "transparent"
   },
-  headerSearchContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: _sharedUi.night.color.surfaceElevated,
-    borderRadius: _sharedUi.night.radius.row,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.border,
-    paddingHorizontal: 12,
-    paddingVertical: 5
-  },
-  headerSearchInput: {
-    flex: 1,
-    color: _sharedUi.night.color.text,
-    fontSize: 13,
-    marginLeft: 6,
-    paddingVertical: 2
-  },
-  headerSearchClear: {
-    marginLeft: 6,
-    padding: 4
-  },
   headerActionButton: {
     width: 32,
     height: 32,

package/lib/commonjs/jotai/hooks/useJotaiAtomChanges.js

@@ -5,78 +5,62 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useJotaiAtomChanges = useJotaiAtomChanges;
 var _react = require("react");
+var _sharedUi = require("@buoy-gg/shared-ui");
 var _jotaiStateStore = require("../utils/jotaiStateStore");
 /**
  * Hook for consuming Jotai atom changes from the store
  *
- * Mirrors useZustandStateChanges.ts from @buoy-gg/zustand
+ * The subscribe / filter / pause / clear plumbing is shared `useChangeLog`;
+ * this file owns the jotai-specific filter, stats and atom registry.
  */
 
+function filterChanges(changes, filter) {
+  let filtered = changes;
+  if (filter.searchText) {
+    const search = filter.searchText.toLowerCase();
+    filtered = filtered.filter(c => c.atomLabel.toLowerCase().includes(search) || c.valuePreview.toLowerCase().includes(search) || c.changedKeys.some(k => k.toLowerCase().includes(search)));
+  }
+  if (filter.atomLabels && filter.atomLabels.length > 0) {
+    filtered = filtered.filter(c => filter.atomLabels.includes(c.atomLabel));
+  }
+  if (filter.onlyWithChanges) {
+    filtered = filtered.filter(c => c.hasValueChange);
+  }
+  return filtered;
+}
+const readAtoms = () => _jotaiStateStore.jotaiStateStore.getAtoms();
+const subscribeToAtoms = listener => _jotaiStateStore.jotaiStateStore.subscribeToAtoms(listener);
 function useJotaiAtomChanges() {
-  const [atomChanges, setAtomChanges] = (0, _react.useState)(() => _jotaiStateStore.jotaiStateStore.getAtomChanges());
-  const [atoms, setAtoms] = (0, _react.useState)(() => _jotaiStateStore.jotaiStateStore.getAtoms());
-  const [filter, setFilter] = (0, _react.useState)({});
-  const [isEnabled, setIsEnabled] = (0, _react.useState)(() => _jotaiStateStore.jotaiStateStore.getEnabled());
-  (0, _react.useEffect)(() => {
-    const unsubChanges = _jotaiStateStore.jotaiStateStore.subscribe(newChanges => {
-      setAtomChanges(newChanges);
-    });
-    const unsubAtoms = _jotaiStateStore.jotaiStateStore.subscribeToAtoms(newAtoms => {
-      setAtoms(newAtoms);
-    });
-    return () => {
-      unsubChanges();
-      unsubAtoms();
-    };
-  }, []);
-  const filteredChanges = (0, _react.useMemo)(() => {
-    let filtered = atomChanges;
-    if (filter.searchText) {
-      const search = filter.searchText.toLowerCase();
-      filtered = filtered.filter(c => c.atomLabel.toLowerCase().includes(search) || c.valuePreview.toLowerCase().includes(search) || c.changedKeys.some(k => k.toLowerCase().includes(search)));
-    }
-    if (filter.atomLabels && filter.atomLabels.length > 0) {
-      filtered = filtered.filter(c => filter.atomLabels.includes(c.atomLabel));
-    }
-    if (filter.onlyWithChanges) {
-      filtered = filtered.filter(c => c.hasValueChange);
-    }
-    return filtered;
-  }, [atomChanges, filter]);
+  const log = (0, _sharedUi.useChangeLog)(_jotaiStateStore.jotaiStateStore, {
+    filterItems: filterChanges
+  });
+  const atoms = (0, _sharedUi.useSubscribedValue)(readAtoms, subscribeToAtoms);
   const stats = (0, _react.useMemo)(() => {
-    const total = atomChanges.length;
-    const withChanges = atomChanges.filter(c => c.hasValueChange).length;
+    const total = log.items.length;
+    const withChanges = log.items.filter(c => c.hasValueChange).length;
     return {
       totalChanges: total,
       changesWithValueChange: withChanges,
       changesWithoutValueChange: total - withChanges,
       atomCount: atoms.length
     };
-  }, [atomChanges, atoms]);
+  }, [log.items, atoms]);
   const atomLabels = (0, _react.useMemo)(() => {
     return _jotaiStateStore.jotaiStateStore.getUniqueAtomLabels();
   }, [atoms]);
-  const clearChanges = (0, _react.useCallback)(() => {
-    _jotaiStateStore.jotaiStateStore.clearAtomChanges();
-  }, []);
-  const toggleCapture = (0, _react.useCallback)(() => {
-    const newEnabled = !isEnabled;
-    _jotaiStateStore.jotaiStateStore.setEnabled(newEnabled);
-    setIsEnabled(newEnabled);
-  }, [isEnabled]);
   const getChangeById = (0, _react.useCallback)(id => {
     return _jotaiStateStore.jotaiStateStore.getAtomChangeById(id);
   }, []);
   return {
-    atomChanges,
-    filteredChanges,
-    filter,
-    setFilter,
+    atomChanges: log.items,
+    filteredChanges: log.filteredItems,
+    filter: log.filter,
+    setFilter: log.setFilter,
     stats,
     atoms,
-    clearChanges,
-    isEnabled,
-    toggleCapture,
+    clearChanges: log.clear,
+    isEnabled: log.isEnabled,
+    toggleCapture: log.toggleCapture,
     atomLabels,
     getChangeById
   };

package/lib/commonjs/jotai/sync/jotaiSyncAdapter.js

@@ -11,36 +11,21 @@ var _sharedUi = require("@buoy-gg/shared-ui");
  * Same hazard as redux/zustand: up to 200 changes × 2 values on every
  * snapshot. Dashboards fetch values via `getChangeDetail`.
  */
-const VALUE_ON_DEVICE = exports.VALUE_ON_DEVICE = Object.freeze({
-  __buoyValueOnDevice: true,
-  note: "Atom values stay on the device — fetched on demand via getChangeDetail / getAtomValue."
-});
-const MAX_CHANGE_DETAIL_BYTES = 8 * 1024 * 1024;
-const MAX_WIRE_PAYLOAD_BYTES = 16 * 1024;
+const VALUE_ON_DEVICE = exports.VALUE_ON_DEVICE = (0, _sharedUi.onDeviceMarker)("Value", "Atom values stay on the device — fetched on demand via getChangeDetail / getAtomValue.");
 /**
  * Per-change wire cache — the store prepends and never mutates a recorded
  * change, so identity is a correct, self-invalidating key.
  */
-const changeCache = new WeakMap();
-function toWireChange(change) {
-  const cached = changeCache.get(change);
-  if (cached) return cached;
-  const wire = {
-    ...change,
-    prevValue: VALUE_ON_DEVICE,
-    nextValue: VALUE_ON_DEVICE
-  };
-  changeCache.set(change, wire);
-  return wire;
-}
-function toWireValue(value) {
-  return (0, _sharedUi.isOverWireBudget)(value, MAX_WIRE_PAYLOAD_BYTES) ? VALUE_ON_DEVICE : value;
-}
+const toWireChange = (0, _sharedUi.memoByIdentity)(change => ({
+  ...change,
+  prevValue: VALUE_ON_DEVICE,
+  nextValue: VALUE_ON_DEVICE
+}));
+const toWireValue = value => (0, _sharedUi.toWire)(value, VALUE_ON_DEVICE);
 
 /**
  * Sync adapter for the jotai tool, consumed by @buoy-gg/external-sync's
- * `useExternalSync` (structurally matches its ToolSyncAdapter interface so
- * this package doesn't need a dependency on it).
+ * `useExternalSync`.
  *
  * Atom changes are captured by watchAtoms(), independent of whether a
  * dashboard is watching — subscribing here only streams what the store
@@ -52,7 +37,7 @@ function toWireValue(value) {
  * Dashboards fetch values via `getChangeDetail`. Oversized / unserializable
  * `atoms[].currentValue` uses the same marker and is fetched via `getAtomValue`.
  */
-const jotaiSyncAdapter = exports.jotaiSyncAdapter = {
+const jotaiSyncAdapter = exports.jotaiSyncAdapter = (0, _sharedUi.createSyncAdapter)({
   version: 2,
   getSnapshot: () => ({
     changes: _jotaiStateStore.jotaiStateStore.getAtomChanges().map(toWireChange),
@@ -61,14 +46,7 @@ const jotaiSyncAdapter = exports.jotaiSyncAdapter = {
       currentValue: toWireValue(atom.currentValue)
     }))
   }),
-  subscribe: onChange => {
-    const unsubscribeChanges = _jotaiStateStore.jotaiStateStore.subscribe(onChange);
-    const unsubscribeAtoms = _jotaiStateStore.jotaiStateStore.subscribeToAtoms(onChange);
-    return () => {
-      unsubscribeChanges();
-      unsubscribeAtoms();
-    };
-  },
+  subscribe: [onChange => _jotaiStateStore.jotaiStateStore.subscribe(onChange), onChange => _jotaiStateStore.jotaiStateStore.subscribeToAtoms(onChange)],
   actions: {
     clearEvents: () => {
       _jotaiStateStore.jotaiStateStore.clearAtomChanges();
@@ -78,31 +56,10 @@ const jotaiSyncAdapter = exports.jotaiSyncAdapter = {
      * The per-snapshot stream stays value-free; this is the explicit,
      * size-guarded channel for the detail pane.
      */
-    getChangeDetail: params => {
-      const {
-        id
-      } = params ?? {};
-      if (!id) return {
-        found: false,
-        reason: "missing id"
-      };
-      const change = _jotaiStateStore.jotaiStateStore.getAtomChangeById(id);
-      if (!change) return {
-        found: false,
-        reason: "unknown id"
-      };
-      const cappedNote = {
-        __buoyTruncated: true,
-        note: `Exceeds the ${MAX_CHANGE_DETAIL_BYTES / (1024 * 1024)}MB detail limit — inspect it on-device.`
-      };
-      const cap = value => (0, _sharedUi.isOverWireBudget)(value, MAX_CHANGE_DETAIL_BYTES) ? cappedNote : value;
-      return {
-        found: true,
-        id,
-        prevValue: cap(change.prevValue),
-        nextValue: cap(change.nextValue)
-      };
-    },
+    getChangeDetail: (0, _sharedUi.detailByIdAction)(id => _jotaiStateStore.jotaiStateStore.getAtomChangeById(id), (change, cap) => ({
+      prevValue: cap(change.prevValue),
+      nextValue: cap(change.nextValue)
+    })),
     /**
      * On-demand current value for one atom. Wire-form snapshots replace
      * oversized / unserializable `currentValue` with VALUE_ON_DEVICE.
@@ -110,7 +67,7 @@ const jotaiSyncAdapter = exports.jotaiSyncAdapter = {
     getAtomValue: params => {
       const {
         label
-      } = params ?? {};
+      } = (0, _sharedUi.readParams)(params);
       if (!label) return {
         found: false,
         reason: "missing label"
@@ -126,10 +83,6 @@ const jotaiSyncAdapter = exports.jotaiSyncAdapter = {
       } catch {
         currentValue = undefined;
       }
-      const cappedNote = {
-        __buoyTruncated: true,
-        note: `Exceeds the ${MAX_CHANGE_DETAIL_BYTES / (1024 * 1024)}MB detail limit — inspect it on-device.`
-      };
       try {
         JSON.stringify(currentValue);
       } catch {
@@ -142,7 +95,7 @@ const jotaiSyncAdapter = exports.jotaiSyncAdapter = {
       return {
         found: true,
         label,
-        currentValue: (0, _sharedUi.isOverWireBudget)(currentValue, MAX_CHANGE_DETAIL_BYTES) ? cappedNote : currentValue
+        currentValue: (0, _sharedUi.capDetail)(currentValue, _sharedUi.WIRE_DETAIL_LIMIT_BYTES)
       };
     },
     /**
@@ -155,7 +108,7 @@ const jotaiSyncAdapter = exports.jotaiSyncAdapter = {
       const {
         includeValues = false,
         limit
-      } = params ?? {};
+      } = (0, _sharedUi.readParams)(params);
       const all = _jotaiStateStore.jotaiStateStore.getAtoms();
       const capped = typeof limit === "number" && limit > 0 ? all.slice(0, limit) : all;
       const atoms = capped.map(a => {
@@ -188,9 +141,9 @@ const jotaiSyncAdapter = exports.jotaiSyncAdapter = {
       const {
         label,
         value
-      } = params ?? {};
+      } = (0, _sharedUi.readParams)(params);
       if (!label) throw new Error("setAtom requires a `label`");
       _jotaiStateStore.jotaiStateStore.setAtomValue(label, value);
     }
   }
-};
+});