@buoy-gg/jotai 7.0.30 → 7.0.32

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

@@ -0,0 +1,444 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.JotaiAtomValueDetailContent = JotaiAtomValueDetailContent;
+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");
+/**
+ * One atom, on a screen of its own — the React Query detail-screen shape
+ * pointed at a live jotai atom. The jotai counterpart of zustand's
+ * `ZustandStoreDetailContent`; tapping an atom card opens this instead of
+ * expanding in place.
+ *
+ *   1. VALUE EDITOR — the shared LiveExplorer. No draft, no Save: an edit
+ *      writes into the atom as you make it and the app reacts immediately.
+ *      Typing commits on a short debounce (~300ms, flushed on blur) so a word
+ *      is one recorded change, not one per keystroke — atom writes land in
+ *      the change log and count against the free tier's cap.
+ *   2. ATOM DETAILS — what the expanded card used to say: type, write
+ *      semantics, change count (with the road to history).
+ *   3. VALUE EXPLORER — the read-only tree of the same value.
+ *
+ * THE WRITE RULE — whole-value replace, jotai's own semantics. An atom is one
+ * value; there is no merge. However deep the edit, the writer rebuilds the
+ * whole value (`updateNestedDataByPath`) and hands it to `store.set(atom, …)`
+ * — so nested deletes are fine and only the ROOT itself can't be removed.
+ *
+ * Write-kind honesty (classified from jotai's own `defaultWrite`, see
+ * writeSemantics.ts):
+ *   - "value"  — primitive atom: `store.set` stores the edited value. Clean.
+ *   - "action" — custom write (`atomWithStorage`, `atomWithReducer`, …): the
+ *     edited value is passed to that write as its argument. For most
+ *     (`atomWithStorage`) that IS a set; for a reducer it's an action. Still
+ *     editable — the MCP's `setAtom` and Time Machine restore already write
+ *     these — but the editor says what the write really does.
+ *   - read-only derived — no setter exists; the editor section explains and
+ *     the info/explorer sections still render.
+ */
+
+/** How long typed edits coalesce before the single write fires. */const TYPING_COMMIT_MS = 300;
+
+/** `buoy-jotai-atom-detail-…` — this screen's own handle root. */
+const DETAIL_ID = `${_testIDs.JOTAI_TEST_ID}-atom-detail`;
+function detailExplorerTestID(dataPath) {
+  const slug = part => part.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+  return dataPath.length === 0 ? `${DETAIL_ID}-explorer-root` : `${DETAIL_ID}-explorer-${dataPath.map(slug).filter(Boolean).join("-")}`;
+}
+
+/**
+ * Why this atom's value can't be live-edited, or null when it can.
+ *
+ * The path utils handle scalars, arrays, plain objects, Map and Set. What
+ * they can't faithfully rebuild is a class instance (a leaf edit would spread
+ * it into a plain object, dropping its prototype) — and a mirror's
+ * on-device marker or a function value aren't editable data at all.
+ */
+function editBlockedReasonFor(atom, value) {
+  if (!atom.setValue) {
+    return "Derived atom — its value recomputes from other atoms and has no setter. Edit the atoms it reads from instead.";
+  }
+  if (typeof value === "function") {
+    return "This atom holds a function — nothing here to edit as data.";
+  }
+  if (value && typeof value === "object" && value.__buoyValueOnDevice === true) {
+    return "The value stayed on the device (too large for the wire) — open the tool on-device to edit it.";
+  }
+  if (value && typeof value === "object") {
+    const proto = Object.getPrototypeOf(value);
+    const isPlain = proto === Object.prototype || proto === null || Array.isArray(value) || value instanceof Map || value instanceof Set;
+    if (!isPlain) {
+      const name = value.constructor?.name ?? "class";
+      return `This atom holds a ${name} instance — rebuilding it from edited fields would drop its prototype. Edit via app code.`;
+    }
+  }
+  return null;
+}
+function valueTypeLabel(value) {
+  if (value === null) return "null";
+  if (value === undefined) return "undefined";
+  if (Array.isArray(value)) return `array · ${value.length}`;
+  return typeof value;
+}
+function JotaiAtomValueDetailContent({
+  atom,
+  onViewHistory
+}) {
+  const rowID = (0, _testIDs.atomRowTestID)(atom.label);
+
+  // Re-render on every recorded change — our own edits included — so the
+  // editor, the read-only explorer, and the change count all track the live
+  // atom. Changes and registry updates arrive on separate listener sets, so
+  // subscribe to both. On a desktop mirror the snapshot refresh drives the
+  // same listeners.
+  const [version, setVersion] = (0, _react.useState)(0);
+  (0, _react.useEffect)(() => {
+    const bump = () => setVersion(v => v + 1);
+    const unsubChanges = _jotaiStateStore.jotaiStateStore.subscribe(bump);
+    const unsubAtoms = _jotaiStateStore.jotaiStateStore.subscribeToAtoms(bump);
+    return () => {
+      unsubChanges();
+      unsubAtoms();
+    };
+  }, []);
+
+  // Recomputed per change on purpose — this screen edits the LIVE atom, so
+  // every view of it derives from the atom's current answer, never a seed.
+  const value = (0, _react.useMemo)(() => {
+    try {
+      return atom.getValue();
+    } catch {
+      return undefined;
+    }
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [atom, version]);
+  const blockedReason = editBlockedReasonFor(atom, value);
+  const [rawOpen, setRawOpen] = (0, _react.useState)(false);
+  const writer = (0, _react.useMemo)(() => {
+    if (blockedReason !== null) return undefined;
+    return {
+      update: (path, next) => {
+        const current = atom.getValue();
+        atom.setValue?.(path.length === 0 ? next : (0, _dataViewer.updateNestedDataByPath)(current, path, next));
+      },
+      remove: path => {
+        // Depth 0 is vetoed by canRemove; an atom is one value — you can
+        // empty it, not remove it.
+        if (path.length === 0) return;
+        const current = atom.getValue();
+        atom.setValue?.((0, _dataViewer.deleteNestedDataByPath)(current, path));
+      },
+      canRemove: path => path.length > 0
+    };
+  }, [atom, blockedReason]);
+  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);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value, version]);
+
+  /** Raw-hatch save: whole-value edit, one write. */
+  const applyRaw = (0, _react.useCallback)(next => {
+    atom.setValue?.(next);
+    setRawOpen(false);
+  }, [atom]);
+  const writePill = atom.setValue === undefined ? {
+    color: _sharedUi.night.color.textTertiary,
+    label: "READ-ONLY (DERIVED)"
+  } : atom.writeKind === "action" ? {
+    color: _sharedUi.buoyColors.warning,
+    label: "CUSTOM WRITE"
+  } : {
+    color: _sharedUi.buoyColors.success,
+    label: "PRIMITIVE"
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.root,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+      testID: `${DETAIL_ID}-scroll`,
+      style: styles.scroll,
+      contentContainerStyle: styles.scrollContent,
+      keyboardShouldPersistTaps: "handled",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.section,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.editorContainer,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.sectionHeaderRow,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              testID: `${DETAIL_ID}-editor-header`,
+              style: styles.sectionHeaderText,
+              children: "Value Editor"
+            }), blockedReason === null ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+              onPress: () => setRawOpen(true),
+              testID: `${DETAIL_ID}-raw`,
+              accessibilityRole: "button",
+              accessibilityLabel: "Edit raw JSON",
+              style: styles.rawButton,
+              hitSlop: {
+                top: 6,
+                bottom: 6,
+                left: 6,
+                right: 6
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.FileJson, {
+                size: 13,
+                color: _sharedUi.night.color.accent
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.rawButtonText,
+                children: "Raw"
+              })]
+            }) : null]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.sectionBody,
+            children: blockedReason === null ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.LiveExplorer, {
+                editable: true,
+                label: atom.label,
+                value: value,
+                defaultExpanded: [atom.label],
+                writer: writer,
+                dataVersion: version,
+                testIDForPath: detailExplorerTestID,
+                debounceMs: TYPING_COMMIT_MS
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.editorHint,
+                children: atom.writeKind === "action" ? "This atom has a custom write — the edited value is handed to it as its argument (a set for atomWithStorage, an ACTION for a reducer atom)." : "Edits write into the live atom as you make them — the whole value is replaced, jotai's own semantics."
+              })]
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.blockedText,
+              testID: `${DETAIL_ID}-edit-blocked`,
+              children: blockedReason
+            })
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.section,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.infoContainer,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.sectionHeaderTextPlain,
+            children: "Atom Details"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.infoBody,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ExpandedInfoRow, {
+              label: "Type",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PillBadge, {
+                color: atom.color,
+                testID: `${rowID}-type`,
+                children: "JOTAI"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.valueTypeText,
+                testID: `${rowID}-valuetype`,
+                children: valueTypeLabel(value)
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ExpandedInfoRow, {
+              label: "Write",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PillBadge, {
+                color: writePill.color,
+                testID: `${DETAIL_ID}-write`,
+                children: writePill.label
+              })
+            }), atom.changeCount > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ExpandedInfoRow, {
+              label: "Changes",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PillBadge, {
+                color: _sharedUi.buoyColors.warning,
+                testID: `${rowID}-changes`,
+                children: String(atom.changeCount)
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+                onPress: () => onViewHistory(atom.label),
+                style: styles.inlineLinkButton,
+                hitSlop: {
+                  top: 6,
+                  bottom: 6,
+                  left: 6,
+                  right: 6
+                },
+                testID: `${rowID}-history`,
+                accessibilityRole: "button",
+                accessibilityLabel: `View ${atom.label} history`,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: [styles.inlineLinkText, {
+                    color: atom.color
+                  }],
+                  children: "view history \u2192"
+                })
+              })]
+            })]
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.section,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.infoContainer,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.sectionHeaderTextPlain,
+            children: "Value Explorer"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.viewerBody,
+            testID: `${rowID}-value`,
+            children: displayValue && typeof displayValue === "object" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
+              title: "",
+              data: displayValue,
+              showTypeFilter: true,
+              rawMode: true,
+              initialExpanded: false
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.primitiveText,
+              testID: `${rowID}-primitive`,
+              children: String(value ?? "undefined")
+            })
+          })]
+        })
+      })]
+    }), rawOpen && blockedReason === null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.ValueEditModal, {
+      path: [],
+      value: value,
+      onSave: applyRaw,
+      onCancel: () => setRawOpen(false),
+      saveLabel: "Apply",
+      testIDPrefix: `${_testIDs.JOTAI_TEST_ID}-value`
+    }) : null]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  root: {
+    flex: 1,
+    minHeight: 0
+  },
+  scroll: {
+    flex: 1
+  },
+  scrollContent: {
+    paddingHorizontal: 8,
+    paddingTop: 8,
+    paddingBottom: 24
+  },
+  section: {
+    marginBottom: 16
+  },
+  // The editable section wears the accent, like RQ's Data Editor — the one
+  // box on this screen that changes things should read differently from the
+  // two that don't.
+  editorContainer: {
+    minWidth: 200,
+    backgroundColor: _sharedUi.night.color.surface,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: _sharedUi.night.color.accent + "4D",
+    overflow: "hidden",
+    shadowColor: _sharedUi.night.color.accent,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 6
+  },
+  sectionHeaderRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    backgroundColor: _sharedUi.night.color.accent + "1A",
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: _sharedUi.night.color.accent + "33"
+  },
+  sectionHeaderText: {
+    fontWeight: "600",
+    fontSize: 12,
+    color: _sharedUi.night.color.accent,
+    letterSpacing: 0.5,
+    textTransform: "uppercase",
+    fontFamily: "monospace"
+  },
+  rawButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4
+  },
+  rawButtonText: {
+    color: _sharedUi.night.color.accent,
+    fontSize: 11,
+    fontWeight: "700"
+  },
+  sectionBody: {
+    padding: 8
+  },
+  editorHint: {
+    color: _sharedUi.night.color.textTertiary,
+    fontSize: 10,
+    paddingTop: 8,
+    paddingHorizontal: 4,
+    lineHeight: 14
+  },
+  blockedText: {
+    color: _sharedUi.night.color.textSecondary,
+    fontSize: 12,
+    padding: 12,
+    lineHeight: 18
+  },
+  infoContainer: {
+    minWidth: 200,
+    backgroundColor: _sharedUi.night.color.surface,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: _sharedUi.night.color.border,
+    overflow: "hidden"
+  },
+  sectionHeaderTextPlain: {
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    fontWeight: "600",
+    fontSize: 12,
+    color: _sharedUi.night.color.textSecondary,
+    borderBottomWidth: 1,
+    borderBottomColor: _sharedUi.night.color.border,
+    letterSpacing: 0.5,
+    textTransform: "uppercase",
+    fontFamily: "monospace"
+  },
+  infoBody: {
+    padding: 12,
+    gap: 10
+  },
+  viewerBody: {
+    backgroundColor: _sharedUi.night.color.bg,
+    minHeight: 60
+  },
+  primitiveText: {
+    color: _sharedUi.night.color.text,
+    fontSize: 12,
+    fontFamily: "monospace",
+    padding: 14
+  },
+  valueTypeText: {
+    color: _sharedUi.night.color.textTertiary,
+    fontSize: 10,
+    fontFamily: "monospace",
+    marginLeft: 6
+  },
+  inlineLinkButton: {
+    marginLeft: 4
+  },
+  inlineLinkText: {
+    fontSize: 10,
+    fontWeight: "600",
+    fontFamily: "monospace"
+  }
+});

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

@@ -8,6 +8,7 @@ var _react = require("react");
 var _reactNative = require("react-native");
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _jotaiStateStore = require("../utils/jotaiStateStore");
+var _testIDs = require("../utils/testIDs");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * JotaiEventFilterView
@@ -39,6 +40,7 @@ function JotaiEventFilterView({
     contentContainerStyle: styles.scrollContent,
     showsVerticalScrollIndicator: false,
     nestedScrollEnabled: true,
+    testID: `${_testIDs.JOTAI_TEST_ID}-filters-scroll`,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.section,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.SectionHeader, {
@@ -51,11 +53,13 @@ function JotaiEventFilterView({
         })]
       }), atoms.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: styles.emptyText,
+        testID: `${_testIDs.JOTAI_TEST_ID}-filters-atoms-empty`,
         children: "No atoms registered yet."
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
         style: styles.atomList,
         contentContainerStyle: styles.atomListContent,
         nestedScrollEnabled: true,
+        testID: `${_testIDs.JOTAI_TEST_ID}-filters-atom-list`,
         children: atoms.map(atom => {
           const atomColor = _jotaiStateStore.jotaiStateStore.getAtomColor(atom.label);
           const isFiltered = Array.from(ignoredPatterns).some(p => atom.label.toLowerCase().includes(p.toLowerCase()));
@@ -63,6 +67,12 @@ function JotaiEventFilterView({
             style: [styles.atomRow, isFiltered && styles.atomRowFiltered],
             onPress: () => onTogglePattern(atom.label),
             activeOpacity: 0.7,
+            testID: `${_testIDs.JOTAI_TEST_ID}-filters-atom-${(0, _testIDs.slugForTestID)(atom.label)}`,
+            accessibilityRole: "button",
+            accessibilityLabel: isFiltered ? `Show ${atom.label}` : `Hide ${atom.label}`,
+            accessibilityState: {
+              selected: isFiltered
+            },
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
               style: [styles.atomDot, {
                 backgroundColor: atomColor
@@ -87,6 +97,8 @@ function JotaiEventFilterView({
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: styles.addInputWrapper,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+          testID: `${_testIDs.JOTAI_TEST_ID}-filters-add-input`,
+          accessibilityLabel: "Add an ignore pattern",
           value: newPattern,
           onChangeText: setNewPattern,
           onSubmitEditing: handleAddPattern,
@@ -116,6 +128,9 @@ function JotaiEventFilterView({
             style: styles.patternRow,
             onPress: () => onTogglePattern(pattern),
             activeOpacity: 0.8,
+            testID: `${_testIDs.JOTAI_TEST_ID}-filters-chip-${(0, _testIDs.slugForTestID)(pattern)}`,
+            accessibilityRole: "button",
+            accessibilityLabel: `Remove filter ${pattern}`,
             children: [atomColor ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
               style: [styles.atomDot, {
                 backgroundColor: atomColor