@buoy-gg/jotai 7.0.33 → 7.0.34

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

@@ -9,8 +9,8 @@
  */
 
 import { useState, useMemo, useRef, useCallback, useEffect } from "react";
-import { View, Text, StyleSheet, FlatList, TextInput, TouchableOpacity } from "react-native";
-import { JsModal, ModalHeader, TabSelector, macOSColors, night, Search, Filter, Power, X, ToolEmptyState, resolveListEmptyState, devToolsStorageKeys, ProUpgradeModal, PowerToggleButton, ToolbarCopyButton, ToolbarClearButton, truncatePayload, TickProvider, useLimit, windowDragProps } from "@buoy-gg/shared-ui";
+import { View, Text, StyleSheet, FlatList, TouchableOpacity } from "react-native";
+import { JsModal, ModalHeader, TabSelector, macOSColors, night, Search, Filter, Power, ToolEmptyState, resolveListEmptyState, devToolsStorageKeys, ProUpgradeModal, PowerToggleButton, ToolbarCopyButton, ToolbarClearButton, truncatePayload, TickProvider, useLimit, windowDragProps, EVENT_LIST_PRESET } from "@buoy-gg/shared-ui";
 import { useIsPro } from "@buoy-gg/license";
 import { useJotaiAtomChanges } from "../hooks/useJotaiAtomChanges";
 import { JotaiAtomChangeItem } from "./JotaiAtomChangeItem";
@@ -20,17 +20,6 @@ import { JotaiAtomValueDetailContent } from "./JotaiAtomValueDetailContent";
 import { JotaiEventFilterView } from "./JotaiEventFilterView";
 import { JOTAI_TEST_ID, buildChangeRowTestIDs } from "../utils/testIDs";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/**
- * 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.
@@ -353,49 +342,24 @@ export function JotaiModal({
         onBack: onBack
       }), /*#__PURE__*/_jsx(ModalHeader.Content, {
         title: "",
-        children: isSearchActive ? /*#__PURE__*/_jsxs(View, {
-          style: styles.headerSearchContainer,
-          testID: `${JOTAI_TEST_ID}-search`,
-          children: [/*#__PURE__*/_jsx(Search, {
-            size: 14,
-            color: night.color.textSecondary
-          }), /*#__PURE__*/_jsx(TextInput, {
-            ref: searchInputRef,
-            testID: `${JOTAI_TEST_ID}-search-field`,
-            style: styles.headerSearchInput,
-            placeholder: activeTab === "atoms" ? "Search atoms..." : "Search events...",
-            placeholderTextColor: 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__*/_jsx(TouchableOpacity, {
-            onPress: closeSearch,
-            style: styles.headerSearchClear,
-            testID: `${JOTAI_TEST_ID}-search-clear`,
-            accessibilityRole: "button",
-            accessibilityLabel: "Close search",
-            children: /*#__PURE__*/_jsx(X, {
-              size: 14,
-              color: night.color.textSecondary
-            })
-          })]
+        children: isSearchActive ? /*#__PURE__*/_jsx(ModalHeader.Search, {
+          value: searchText,
+          onChangeText: handleSearch,
+          onCancel: closeSearch,
+          placeholder: activeTab === "atoms" ? "Search atoms..." : "Search events...",
+          accessibilityLabel: "Search Jotai atoms and events",
+          iconSize: 14,
+          testID: `${JOTAI_TEST_ID}-search-field`,
+          containerTestID: `${JOTAI_TEST_ID}-search`,
+          clearTestID: `${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__*/_jsx(TabSelector, {
           tabs: [{
             key: "atoms",
@@ -485,11 +449,7 @@ export function JotaiModal({
         keyExtractor: keyExtractor,
         contentContainerStyle: styles.listContent,
         showsVerticalScrollIndicator: true,
-        removeClippedSubviews: CLIP_OFFSCREEN_CELLS,
-        initialNumToRender: 12,
-        maxToRenderPerBatch: 8,
-        windowSize: 5,
-        updateCellsBatchingPeriod: 50
+        ...EVENT_LIST_PRESET
       }) : /*#__PURE__*/_jsx(ToolEmptyState, {
         testID: `${JOTAI_TEST_ID}-history-empty`,
         ...resolveListEmptyState({
@@ -578,11 +538,7 @@ export function JotaiModal({
         keyExtractor: keyExtractor,
         contentContainerStyle: styles.listContent,
         showsVerticalScrollIndicator: true,
-        removeClippedSubviews: CLIP_OFFSCREEN_CELLS,
-        initialNumToRender: 12,
-        maxToRenderPerBatch: 8,
-        windowSize: 5,
-        updateCellsBatchingPeriod: 50
+        ...EVENT_LIST_PRESET
       }) : /*#__PURE__*/_jsx(EventsEmptyState, {
         isEnabled: isEnabled,
         searchText: searchText,
@@ -696,27 +652,6 @@ const styles = StyleSheet.create({
     // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
     backgroundColor: "transparent"
   },
-  headerSearchContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: night.color.surfaceElevated,
-    borderRadius: night.radius.row,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    paddingHorizontal: 12,
-    paddingVertical: 5
-  },
-  headerSearchInput: {
-    flex: 1,
-    color: night.color.text,
-    fontSize: 13,
-    marginLeft: 6,
-    paddingVertical: 2
-  },
-  headerSearchClear: {
-    marginLeft: 6,
-    padding: 4
-  },
   headerActionButton: {
     width: 32,
     height: 32,

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

@@ -3,76 +3,60 @@
 /**
  * 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.
  */
 
-import { useState, useEffect, useMemo, useCallback } from "react";
+import { useCallback, useMemo } from "react";
+import { useChangeLog, useSubscribedValue } from "@buoy-gg/shared-ui";
 import { jotaiStateStore } from "../utils/jotaiStateStore";
+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.getAtoms();
+const subscribeToAtoms = listener => jotaiStateStore.subscribeToAtoms(listener);
 export function useJotaiAtomChanges() {
-  const [atomChanges, setAtomChanges] = useState(() => jotaiStateStore.getAtomChanges());
-  const [atoms, setAtoms] = useState(() => jotaiStateStore.getAtoms());
-  const [filter, setFilter] = useState({});
-  const [isEnabled, setIsEnabled] = useState(() => jotaiStateStore.getEnabled());
-  useEffect(() => {
-    const unsubChanges = jotaiStateStore.subscribe(newChanges => {
-      setAtomChanges(newChanges);
-    });
-    const unsubAtoms = jotaiStateStore.subscribeToAtoms(newAtoms => {
-      setAtoms(newAtoms);
-    });
-    return () => {
-      unsubChanges();
-      unsubAtoms();
-    };
-  }, []);
-  const filteredChanges = 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 = useChangeLog(jotaiStateStore, {
+    filterItems: filterChanges
+  });
+  const atoms = useSubscribedValue(readAtoms, subscribeToAtoms);
   const stats = 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 = useMemo(() => {
     return jotaiStateStore.getUniqueAtomLabels();
   }, [atoms]);
-  const clearChanges = useCallback(() => {
-    jotaiStateStore.clearAtomChanges();
-  }, []);
-  const toggleCapture = useCallback(() => {
-    const newEnabled = !isEnabled;
-    jotaiStateStore.setEnabled(newEnabled);
-    setIsEnabled(newEnabled);
-  }, [isEnabled]);
   const getChangeById = useCallback(id => {
     return 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/module/jotai/sync/jotaiSyncAdapter.js

@@ -1,43 +1,28 @@
 "use strict";
 
 import { jotaiStateStore } from "../utils/jotaiStateStore";
-import { isOverWireBudget } from "@buoy-gg/shared-ui";
+import { WIRE_DETAIL_LIMIT_BYTES, createSyncAdapter, capDetail, detailByIdAction, memoByIdentity, onDeviceMarker, readParams, toWire } from "@buoy-gg/shared-ui";
 
 /**
  * Sentinel used in WIRE-FORM snapshots in place of raw prevValue/nextValue.
  * Same hazard as redux/zustand: up to 200 changes × 2 values on every
  * snapshot. Dashboards fetch values via `getChangeDetail`.
  */
-export const 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;
+export const VALUE_ON_DEVICE = 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 isOverWireBudget(value, MAX_WIRE_PAYLOAD_BYTES) ? VALUE_ON_DEVICE : value;
-}
+const toWireChange = memoByIdentity(change => ({
+  ...change,
+  prevValue: VALUE_ON_DEVICE,
+  nextValue: VALUE_ON_DEVICE
+}));
+const toWireValue = value => 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
@@ -49,7 +34,7 @@ function toWireValue(value) {
  * Dashboards fetch values via `getChangeDetail`. Oversized / unserializable
  * `atoms[].currentValue` uses the same marker and is fetched via `getAtomValue`.
  */
-export const jotaiSyncAdapter = {
+export const jotaiSyncAdapter = createSyncAdapter({
   version: 2,
   getSnapshot: () => ({
     changes: jotaiStateStore.getAtomChanges().map(toWireChange),
@@ -58,14 +43,7 @@ export const jotaiSyncAdapter = {
       currentValue: toWireValue(atom.currentValue)
     }))
   }),
-  subscribe: onChange => {
-    const unsubscribeChanges = jotaiStateStore.subscribe(onChange);
-    const unsubscribeAtoms = jotaiStateStore.subscribeToAtoms(onChange);
-    return () => {
-      unsubscribeChanges();
-      unsubscribeAtoms();
-    };
-  },
+  subscribe: [onChange => jotaiStateStore.subscribe(onChange), onChange => jotaiStateStore.subscribeToAtoms(onChange)],
   actions: {
     clearEvents: () => {
       jotaiStateStore.clearAtomChanges();
@@ -75,31 +53,10 @@ export const 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.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 => isOverWireBudget(value, MAX_CHANGE_DETAIL_BYTES) ? cappedNote : value;
-      return {
-        found: true,
-        id,
-        prevValue: cap(change.prevValue),
-        nextValue: cap(change.nextValue)
-      };
-    },
+    getChangeDetail: detailByIdAction(id => 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.
@@ -107,7 +64,7 @@ export const jotaiSyncAdapter = {
     getAtomValue: params => {
       const {
         label
-      } = params ?? {};
+      } = readParams(params);
       if (!label) return {
         found: false,
         reason: "missing label"
@@ -123,10 +80,6 @@ export const 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 {
@@ -139,7 +92,7 @@ export const jotaiSyncAdapter = {
       return {
         found: true,
         label,
-        currentValue: isOverWireBudget(currentValue, MAX_CHANGE_DETAIL_BYTES) ? cappedNote : currentValue
+        currentValue: capDetail(currentValue, WIRE_DETAIL_LIMIT_BYTES)
       };
     },
     /**
@@ -152,7 +105,7 @@ export const jotaiSyncAdapter = {
       const {
         includeValues = false,
         limit
-      } = params ?? {};
+      } = readParams(params);
       const all = jotaiStateStore.getAtoms();
       const capped = typeof limit === "number" && limit > 0 ? all.slice(0, limit) : all;
       const atoms = capped.map(a => {
@@ -185,9 +138,9 @@ export const jotaiSyncAdapter = {
       const {
         label,
         value
-      } = params ?? {};
+      } = readParams(params);
       if (!label) throw new Error("setAtom requires a `label`");
       jotaiStateStore.setAtomValue(label, value);
     }
   }
-};
+});