@buoy-gg/jotai 7.0.32 → 7.0.34

package/lib/commonjs/jotai/utils/jotaiStateStore.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.jotaiStateStore = void 0;
+var _sharedUi = require("@buoy-gg/shared-ui");
 /**
  * Jotai state store — captures and stores Jotai atom changes
  *
@@ -40,44 +41,7 @@ const ATOM_COLORS = {
   filter: "#84CC16" // lime
 };
 function getAtomColor(label) {
-  const lower = label.toLowerCase();
-  if (ATOM_COLORS[lower]) return ATOM_COLORS[lower];
-  for (const [key, color] of Object.entries(ATOM_COLORS)) {
-    if (lower.includes(key)) return color;
-  }
-
-  // Generate consistent hex from name hash
-  const hash = label.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0);
-  const hue = hash * 137 % 360;
-  const s = 0.7;
-  const l = 0.6;
-  const c = (1 - Math.abs(2 * l - 1)) * s;
-  const x = c * (1 - Math.abs(hue / 60 % 2 - 1));
-  const m = l - c / 2;
-  let r = 0,
-    g = 0,
-    b = 0;
-  if (hue < 60) {
-    r = c;
-    g = x;
-  } else if (hue < 120) {
-    r = x;
-    g = c;
-  } else if (hue < 180) {
-    g = c;
-    b = x;
-  } else if (hue < 240) {
-    g = x;
-    b = c;
-  } else if (hue < 300) {
-    r = x;
-    b = c;
-  } else {
-    r = c;
-    b = x;
-  }
-  const toHex = v => Math.round((v + m) * 255).toString(16).padStart(2, "0");
-  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+  return (0, _sharedUi.entityColor)(label, ATOM_COLORS);
 }
 
 // ============================================
@@ -85,97 +49,25 @@ function getAtomColor(label) {
 // ============================================
 
 function formatValuePreview(value, maxLength = 40) {
-  if (value === undefined) return "undefined";
-  if (value === null) return "null";
-  try {
-    if (typeof value === "function") return "(fn)";
-    if (typeof value === "string") {
-      return value.length > maxLength ? `"${value.slice(0, maxLength - 3)}..."` : `"${value}"`;
-    }
-    if (typeof value === "number" || typeof value === "boolean") {
-      return String(value);
-    }
-    if (Array.isArray(value)) {
-      if (value.length === 0) return "[]";
-      const preview = JSON.stringify(value);
-      return preview.length > maxLength ? `[${value.length} items]` : preview;
-    }
-    if (typeof value === "object") {
-      const keys = Object.keys(value);
-      if (keys.length === 0) return "{}";
-      const preview = JSON.stringify(value);
-      if (preview.length <= maxLength) return preview;
-      return `{ ${keys.length} keys }`;
-    }
-    return String(value).slice(0, maxLength);
-  } catch {
-    return "[complex]";
-  }
-}
-function getValueDiffSummary(prevValue, nextValue) {
-  if (prevValue === nextValue) {
-    return {
-      summary: "no change",
-      changedKeys: [],
-      changedCount: 0
-    };
-  }
-  if (typeof prevValue !== "object" || typeof nextValue !== "object" || prevValue === null || nextValue === null) {
-    return {
-      summary: "changed",
-      changedKeys: [],
-      changedCount: 0
-    };
-  }
-  const prevKeys = Object.keys(prevValue);
-  const nextKeys = Object.keys(nextValue);
-  const added = nextKeys.filter(k => !prevKeys.includes(k));
-  const removed = prevKeys.filter(k => !nextKeys.includes(k));
-  const changed = [];
-  for (const key of prevKeys) {
-    if (nextKeys.includes(key) && prevValue[key] !== nextValue[key]) {
-      changed.push(key);
-    }
-  }
-  const allChangedKeys = [...added, ...removed, ...changed];
-  const parts = [];
-  if (added.length > 0) parts.push(`+${added.length}`);
-  if (removed.length > 0) parts.push(`-${removed.length}`);
-  if (changed.length > 0) parts.push(`~${changed.length}`);
-  const total = allChangedKeys.length;
-  if (parts.length === 0) {
-    return {
-      summary: "nested change",
-      changedKeys: [],
-      changedCount: 0
-    };
-  }
-  return {
-    summary: `${parts.join(" ")} ${total === 1 ? "key" : "keys"}`,
-    changedKeys: allChangedKeys,
-    changedCount: total
-  };
+  return (0, _sharedUi.formatValuePreview)(value, {
+    maxLength,
+    functionLabel: "(fn)"
+  });
 }
+const getValueDiffSummary = _sharedUi.shallowDiffSummary;
 
 // ============================================
 // Jotai State Store
 // ============================================
 
-class JotaiStateStore {
-  atomChanges = [];
+class JotaiStateStore extends _sharedUi.ChangeLog {
   atoms = new Map();
-  listeners = new Set();
   atomListeners = new Set();
-  clearListeners = new Set();
-  maxChanges = 200;
-  idCounter = 0;
-  isEnabled = true;
-  captureSuppressed = false;
 
   // ---- Change Tracking ----
 
   addAtomChange(params) {
-    if (!this.isEnabled || this.captureSuppressed) return;
+    if (!this.canRecord()) return;
     const {
       atomLabel,
       prevValue,
@@ -190,7 +82,7 @@ class JotaiStateStore {
     } = getValueDiffSummary(prevValue, nextValue);
     const valuePreview = formatValuePreview(nextValue);
     const change = {
-      id: `${Date.now()}-${++this.idCounter}`,
+      id: this.nextId(),
       atomLabel,
       timestamp: Date.now(),
       prevValue,
@@ -203,7 +95,7 @@ class JotaiStateStore {
       valuePreview,
       isSlowUpdate: false
     };
-    this.atomChanges = [change, ...this.atomChanges].slice(0, this.maxChanges);
+    this.push(change);
     const atomInfo = this.atoms.get(atomLabel);
     if (atomInfo) {
       atomInfo.changeCount++;
@@ -212,54 +104,21 @@ class JotaiStateStore {
     this.notifyAtomListeners();
   }
   getAtomChanges() {
-    return [...this.atomChanges];
+    return this.getAll();
   }
   getAtomChangeById(id) {
-    return this.atomChanges.find(c => c.id === id);
+    return this.getById(id);
   }
   clearAtomChanges() {
-    this.atomChanges = [];
     for (const atom of this.atoms.values()) {
       atom.changeCount = 0;
     }
-    this.notifyListeners();
+    this.clear();
     this.notifyAtomListeners();
-    this.clearListeners.forEach(listener => {
-      try {
-        listener();
-      } catch {
-        // Ignore listener errors
-      }
-    });
-  }
-
-  /**
-   * Listen for clearAtomChanges() calls. Used in remote mirror mode to
-   * forward a clear performed in the dashboard UI to the synced device.
-   */
-  onClear(listener) {
-    this.clearListeners.add(listener);
-    return () => {
-      this.clearListeners.delete(listener);
-    };
   }
 
   // ---- Remote Mirror Mode ----
 
-  /**
-   * Permanently suppress local capture. Use when this store acts as a mirror
-   * of a remote device's atom changes (e.g. the desktop dashboard): data
-   * arrives via replaceFromSnapshot() and local watchers must never record.
-   */
-  disableCapture() {
-    this.captureSuppressed = true;
-  }
-
-  /** Whether the store is in remote mirror mode (capture suppressed). */
-  isCaptureSuppressed() {
-    return this.captureSuppressed;
-  }
-
   /**
    * Serializable snapshot of the tracked atoms (registry metadata plus each
    * atom's current value). Used by the sync adapter on the device side —
@@ -290,18 +149,18 @@ class JotaiStateStore {
    * freezes the mirror.
    */
   replaceFromSnapshot(changes, atomSnapshots) {
-    if (!this.isEnabled) return;
+    if (!this.getEnabled()) return;
 
     // Preserve values a remote mirror already hydrated — wire-form snapshots
     // always carry markers, and a later snapshot must not blank the detail pane.
     const hydrated = new Map();
-    for (const existing of this.atomChanges) {
+    for (const existing of this.items) {
       const prev = existing.prevValue;
       if (!prev || prev.__buoyValueOnDevice !== true) {
         hydrated.set(existing.id, existing);
       }
     }
-    this.atomChanges = changes.slice(0, this.maxChanges).map(change => {
+    const merged = changes.slice(0, this.max).map(change => {
       const kept = hydrated.get(change.id);
       const incoming = change.prevValue;
       return kept && incoming?.__buoyValueOnDevice === true ? {
@@ -339,7 +198,7 @@ class JotaiStateStore {
         writeKind: snapshot.writeKind
       }];
     }));
-    this.notifyListeners();
+    this.setItems(merged);
     this.notifyAtomListeners();
   }
 
@@ -348,13 +207,7 @@ class JotaiStateStore {
    * device via the adapter's `getChangeDetail`. Remote-mirror (desktop) only.
    */
   hydrateChange(id, patch) {
-    const index = this.atomChanges.findIndex(c => c.id === id);
-    if (index === -1) return;
-    this.atomChanges = [...this.atomChanges.slice(0, index), {
-      ...this.atomChanges[index],
-      ...patch
-    }, ...this.atomChanges.slice(index + 1)];
-    this.notifyListeners();
+    this.hydrateById(id, patch);
   }
 
   /**
@@ -418,7 +271,7 @@ class JotaiStateStore {
   // ---- Filtering ----
 
   filterAtomChanges(filter) {
-    let filtered = [...this.atomChanges];
+    let filtered = this.getAll();
     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)));
@@ -435,8 +288,8 @@ class JotaiStateStore {
   // ---- Stats ----
 
   getStats() {
-    const total = this.atomChanges.length;
-    const withChanges = this.atomChanges.filter(c => c.hasValueChange).length;
+    const total = this.items.length;
+    const withChanges = this.items.filter(c => c.hasValueChange).length;
     return {
       totalChanges: total,
       changesWithValueChange: withChanges,
@@ -450,34 +303,16 @@ class JotaiStateStore {
 
   // ---- Enable / Disable ----
 
-  setEnabled(enabled) {
-    this.isEnabled = enabled;
-  }
-  getEnabled() {
-    return this.isEnabled;
-  }
   setMaxChanges(max) {
-    this.maxChanges = max;
-    if (this.atomChanges.length > max) {
-      this.atomChanges = this.atomChanges.slice(0, max);
-      this.notifyListeners();
-    }
+    this.setMax(max);
   }
 
   // ---- Subscriptions ----
 
-  subscribe(listener) {
-    this.listeners.add(listener);
-    return () => this.listeners.delete(listener);
-  }
   subscribeToAtoms(listener) {
     this.atomListeners.add(listener);
     return () => this.atomListeners.delete(listener);
   }
-  notifyListeners() {
-    const changes = this.getAtomChanges();
-    this.listeners.forEach(listener => listener(changes));
-  }
   notifyAtomListeners() {
     const atoms = this.getAtoms();
     this.atomListeners.forEach(listener => listener(atoms));

package/lib/commonjs/jotai/utils/snapshotProvider.js

@@ -65,30 +65,14 @@ async function capture() {
 }
 async function restore(data, options) {
   const snapshot = data;
-  const excludedSet = new Set(options?.excludeKeys ?? []);
-  const includedSet = options?.includeKeys ? new Set(options.includeKeys) : null;
-  const touch = key => !excludedSet.has(key) && (!includedSet || includedSet.has(key));
-  let excludedHits = 0;
-  const result = {
-    ok: true,
-    applied: 0,
-    skipped: [],
-    warnings: []
-  };
+  const scope = (0, _sharedUi.createRestoreScope)(options);
+  const result = (0, _sharedUi.emptyRestoreResult)();
   if (!snapshot?.atoms) {
-    return {
-      ok: false,
-      applied: 0,
-      skipped: [],
-      warnings: ["empty jotai snapshot"]
-    };
+    return (0, _sharedUi.failedRestore)("empty jotai snapshot");
   }
   let derived = 0;
   for (const [label, entry] of Object.entries(snapshot.atoms)) {
-    if (!touch(label)) {
-      excludedHits += 1;
-      continue;
-    }
+    if (!scope.allows(label)) continue;
     if (!entry.writable) {
       derived += 1;
       continue;
@@ -122,9 +106,8 @@ async function restore(data, options) {
   if (derived > 0) {
     result.warnings.push(`${derived} derived atom(s) left to recompute`);
   }
-  if (excludedHits > 0) {
-    result.warnings.push(`${excludedHits} atom(s) excluded by you`);
-  }
+  const excludedWarning = scope.excludedWarning("atom(s)");
+  if (excludedWarning) result.warnings.push(excludedWarning);
   return result;
 }
 
@@ -149,8 +132,7 @@ async function previewItems(target, base) {
   }
   const items = [];
   const notes = [];
-  const labels = new Set([...Object.keys(baseAtoms), ...Object.keys(targetAtoms)]);
-  for (const label of labels) {
+  for (const label of (0, _sharedUi.unionKeys)(baseAtoms, targetAtoms)) {
     const inTarget = label in targetAtoms;
     if (!inTarget) {
       if (liveMode) notes.push(`atom "${label}" not in snapshot — untouched`);else items.push({

package/lib/commonjs/preset.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createJotaiTool = createJotaiTool;
-exports.jotaiToolPreset = void 0;
+exports.jotaiToolPreset = exports.createJotaiTool = void 0;
 var _JotaiModal = require("./jotai/components/JotaiModal");
 var _JotaiIcon = require("./jotai/components/JotaiIcon");
+var _sharedUi = require("@buoy-gg/shared-ui");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Pre-configured Jotai DevTools preset for FloatingDevTools
@@ -48,7 +48,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  * - Filter by atom label
  * - Changed keys tracking for object atoms
  */
-const jotaiToolPreset = exports.jotaiToolPreset = {
+const jotaiToolPreset = exports.jotaiToolPreset = (0, _sharedUi.defineToolPreset)({
   id: "jotai",
   name: "JOTAI",
   description: "Jotai atom & state inspector",
@@ -62,7 +62,7 @@ const jotaiToolPreset = exports.jotaiToolPreset = {
   props: {
     enableSharedModalDimensions: false
   }
-};
+});
 
 /**
  * Create a custom Jotai DevTools configuration.
@@ -78,21 +78,13 @@ const jotaiToolPreset = exports.jotaiToolPreset = {
  * });
  * ```
  */
-function createJotaiTool(options) {
-  return {
-    id: options?.id || "jotai",
-    name: options?.name || "JOTAI",
-    description: options?.description || "Jotai atom & state inspector",
-    slot: "both",
-    icon: ({
-      size
-    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_JotaiIcon.JotaiIcon, {
-      size: size,
-      color: options?.iconColor
-    }),
-    component: _JotaiModal.JotaiModal,
-    props: {
-      enableSharedModalDimensions: options?.enableSharedModalDimensions !== undefined ? options.enableSharedModalDimensions : false
-    }
-  };
-}
+const createJotaiTool = exports.createJotaiTool = (0, _sharedUi.createToolFactory)(jotaiToolPreset, options => ({
+  enableSharedModalDimensions: options.enableSharedModalDimensions ?? false
+}), options => ({
+  icon: ({
+    size
+  }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_JotaiIcon.JotaiIcon, {
+    size: size,
+    color: options.iconColor
+  })
+}));

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

@@ -11,7 +11,7 @@
 
 import { useMemo } from "react";
 import { View, Text, StyleSheet, ScrollView } from "react-native";
-import { CompactRow, night, Box } from "@buoy-gg/shared-ui";
+import { CompactRow, night, ToolEmptyState, resolveListEmptyState } 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";
@@ -49,20 +49,14 @@ function getWriteKindLabel(atom) {
   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,
-      children: "Use watchAtoms(store, { atomName }) to register your Jotai atoms.\nThey will appear here with their current value."
-    })]
+  return /*#__PURE__*/_jsx(ToolEmptyState, {
+    testID: `${JOTAI_TEST_ID}-atoms-empty`
+    // scanning = "scanning for targets… and finding none". The registry is
+    // discovered, not configured, so an empty one is a scan result.
+    ,
+    otto: "scanning",
+    title: "No atoms registered",
+    message: "Use watchAtoms(store, { atomName }) to register your Jotai atoms.\nThey will appear here with their current value."
   });
 }
 export function JotaiAtomBrowser({
@@ -79,17 +73,19 @@ export function JotaiAtomBrowser({
     return /*#__PURE__*/_jsx(EmptyBrowserState, {});
   }
   if (filteredAtoms.length === 0 && searchQuery) {
-    return /*#__PURE__*/_jsxs(View, {
-      style: styles.emptyState,
+    return /*#__PURE__*/_jsx(ToolEmptyState, {
       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,
-        children: ["No atoms match \"", searchQuery, "\""]
-      })]
+      ...resolveListEmptyState({
+        subject: "atoms",
+        verb: "registered",
+        search: searchQuery,
+        total: atoms.length,
+        waiting: {
+          otto: "scanning",
+          title: "No atoms registered",
+          message: "Use watchAtoms() to register your Jotai atoms."
+        }
+      })
     });
   }
   return /*#__PURE__*/_jsxs(ScrollView, {
@@ -195,22 +191,5 @@ const styles = StyleSheet.create({
     fontWeight: "700",
     color: night.color.accent,
     fontFamily: "monospace"
-  },
-  emptyState: {
-    alignItems: "center",
-    paddingVertical: 40
-  },
-  emptyTitle: {
-    color: night.color.text,
-    fontSize: 14,
-    fontWeight: "600",
-    marginTop: 12,
-    marginBottom: 6
-  },
-  emptyText: {
-    color: night.color.textTertiary,
-    fontSize: 12,
-    textAlign: "center",
-    lineHeight: 18
   }
 });

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

@@ -7,10 +7,9 @@
  */
 
 import { memo } from "react";
-import { View, Text, StyleSheet } from "react-native";
-import { CompactRow, buoyColors, night, Zap, RelativeTime } from "@buoy-gg/shared-ui";
+import { ChangeRow, night } from "@buoy-gg/shared-ui";
 import { jotaiStateStore } from "../utils/jotaiStateStore";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 function getStatusLabel(category, atomLabel) {
   if (category === "initial") return "Initial";
   return atomLabel.charAt(0).toUpperCase() + atomLabel.slice(1);
@@ -68,59 +67,15 @@ export const JotaiAtomChangeItem = /*#__PURE__*/memo(function JotaiAtomChangeIte
   const sublabel = getSublabel(change);
   const primaryText = getPrimaryText(change);
   const badgeText = getBadgeText(change);
-
-  // 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
-    }), change.hasValueChange ? /*#__PURE__*/_jsx(View, {
-      style: styles.changeBadge,
-      testID: testID ? `${testID}-change` : undefined,
-      children: /*#__PURE__*/_jsx(Zap, {
-        size: 12,
-        color: buoyColors.warning
-      })
-    }) : null]
-  });
-  return /*#__PURE__*/_jsx(CompactRow, {
-    statusDotColor: statusColor,
+  return /*#__PURE__*/_jsx(ChangeRow, {
+    statusColor: statusColor,
     statusLabel: statusLabel,
-    statusSublabel: sublabel,
+    sublabel: sublabel,
     primaryText: primaryText,
-    bottomRightText: /*#__PURE__*/_jsx(RelativeTime, {
-      timestamp: change.timestamp
-    }),
-    customBadge: customBadge,
-    badgeColor: statusColor,
-    showChevron: true,
+    timestamp: change.timestamp,
+    badgeText: badgeText,
+    changed: change.hasValueChange,
     onPress: () => onPress(change),
-    testID: testID,
-    statusTestID: testID ? `${testID}-status` : undefined,
-    statusSublabelTestID: testID ? `${testID}-sublabel` : undefined,
-    primaryTestID: testID ? `${testID}-keys` : undefined
+    testID: testID
   });
-});
-const styles = StyleSheet.create({
-  badgeContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4
-  },
-  badgeText: {
-    fontSize: 11,
-    fontWeight: "600",
-    fontFamily: "monospace"
-  },
-  changeBadge: {
-    paddingHorizontal: 4
-  }
 });