@buoy-gg/zustand 7.0.30 → 7.0.31

package/lib/commonjs/zustand/utils/editableState.js

@@ -0,0 +1,139 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.STRIP_MAX_DEPTH = void 0;
+exports.computeMergePartial = computeMergePartial;
+exports.editableStateOf = editableStateOf;
+exports.isPlainObjectLike = isPlainObjectLike;
+exports.stripFunctions = stripFunctions;
+/**
+ * What of a zustand store's state can be EDITED, and how an edit is written.
+ *
+ * The two zustand facts every rule here follows from:
+ *
+ * 1. Stores conventionally keep their action functions IN state
+ *    (`increment: () => …`). Functions can't be typed into a tree editor and
+ *    don't survive serialization, so the editor works on a function-free view
+ *    of state.
+ * 2. `setState` is either a TOP-LEVEL SHALLOW MERGE (`Object.assign({}, state,
+ *    partial)`) or a full replace that deletes every key not present — actions
+ *    included. So the editor writes merge-only, always: every edit, however
+ *    deep, is expressed as "replace the top-level key(s) that contain it"
+ *    ({@link computeMergePartial}), and the two edits a merge cannot express —
+ *    removing or renaming a top-level key — are refused rather than silently
+ *    not happening.
+ *
+ * `stripFunctions` lives here (the Time Machine snapshot provider imports it)
+ * because capture and editing need the identical answer to "what is this
+ * store's data".
+ */
+
+/** Bounds every recursive walk over store state. */
+const STRIP_MAX_DEPTH = exports.STRIP_MAX_DEPTH = 8;
+function isPlainObjectLike(v) {
+  return typeof v === "object" && v !== null && !Array.isArray(v);
+}
+
+/** Clone `value` without functions, recording their paths. */
+function stripFunctions(value, path, fnPaths, seen, depth) {
+  if (typeof value === "function") {
+    fnPaths.push(path);
+    return undefined;
+  }
+  if (typeof value !== "object" || value === null || depth >= STRIP_MAX_DEPTH) {
+    return value;
+  }
+  if (seen.has(value)) return undefined; // cycle — drop the back-reference
+  seen.add(value);
+  if (Array.isArray(value)) {
+    return value.map((item, i) => typeof item === "function" ? (fnPaths.push(`${path}[${i}]`), null) : stripFunctions(item, `${path}[${i}]`, fnPaths, seen, depth + 1));
+  }
+  if (!isPlainObjectLike(value)) return value; // Date/Map/Set/etc. — superjson handles
+  const out = {};
+  for (const [k, v] of Object.entries(value)) {
+    if (typeof v === "function") {
+      fnPaths.push(path ? `${path}.${k}` : k);
+      continue;
+    }
+    out[k] = stripFunctions(v, path ? `${path}.${k}` : k, fnPaths, seen, depth + 1);
+  }
+  return out;
+}
+/**
+ * The editor's view of one store's state, with the reasons it may refuse.
+ *
+ * - A remote mirror that hasn't hydrated yet holds a marker, not state — the
+ *   real value is one `getStoreState` round trip away, so "wait" rather than
+ *   "can't".
+ * - Non-object state (`create(() => 5)`) has no top-level keys, so a merge
+ *   write cannot address any part of it. Editing it would require a replace,
+ *   which is the destructive path this editor exists to avoid.
+ * - A function nested BELOW the top level (rare — the convention keeps actions
+ *   at the top) sits inside the very key an edit would rewrite, and a merge
+ *   write of that key would silently drop it. Refusing the whole store is
+ *   blunt but honest; per-key locks can come later if this ever bites.
+ */
+function editableStateOf(state) {
+  if (isPlainObjectLike(state) && state.__buoyStateOnDevice === true) {
+    return {
+      data: null,
+      fnPaths: [],
+      blockedReason: "Store state hasn't synced from the device yet."
+    };
+  }
+  if (!isPlainObjectLike(state)) {
+    return {
+      data: null,
+      fnPaths: [],
+      blockedReason: "Only stores whose state is a plain object can be edited — " + "a merge write has nothing to address in " + (Array.isArray(state) ? "an array" : `a ${typeof state}`) + "."
+    };
+  }
+  const fnPaths = [];
+  const data = stripFunctions(state, "", fnPaths, new WeakSet(), 0);
+  const nested = fnPaths.filter(p => p.includes(".") || p.includes("["));
+  if (nested.length > 0) {
+    return {
+      data: null,
+      fnPaths,
+      blockedReason: `State keeps a function inside "${nested[0]}" — a merge write of ` + "that key would drop it, so this store can't be edited here."
+    };
+  }
+  return {
+    data,
+    fnPaths,
+    blockedReason: null
+  };
+}
+
+/**
+ * Diff an edited draft against the state it was seeded from, as a `setState`
+ * MERGE partial: only the top-level keys whose contents changed.
+ *
+ * Diffed against the SEED, not the live state at save time, on purpose — the
+ * partial then carries exactly what the user changed, so a key the app wrote
+ * while the editor was open and the user never touched keeps the app's value
+ * (per-key last-write-wins, the same contract the draft's own dirtiness uses).
+ *
+ * Throws on the two edits a merge cannot express, naming the key: a draft
+ * that dropped a top-level key (which is also what a raw-JSON rename produces
+ * — the old key dropped, a new one added), because `setState(partial, false)`
+ * would leave it exactly as it was while the editor showed it gone.
+ */
+function computeMergePartial(seed, draft) {
+  if (!isPlainObjectLike(draft)) {
+    throw new Error("The store's state must stay an object.");
+  }
+  const dropped = Object.keys(seed).filter(k => !(k in draft));
+  if (dropped.length > 0) {
+    throw new Error(`Can't remove top-level ${dropped.length === 1 ? "key" : "keys"} ` + `${dropped.map(k => `"${k}"`).join(", ")} — zustand merge writes ` + "can't delete. Edit the value instead.");
+  }
+  const partial = {};
+  for (const key of Object.keys(draft)) {
+    if (!(key in seed) || JSON.stringify(draft[key]) !== JSON.stringify(seed[key])) {
+      partial[key] = draft[key];
+    }
+  }
+  return partial;
+}

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

@@ -3,6 +3,7 @@
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _dataViewer = require("@buoy-gg/shared-ui/dataViewer");
 var _zustandStateStore = require("./zustandStateStore");
+var _editableState = require("./editableState");
 /**
  * Time Machine snapshot provider for Zustand.
  *
@@ -17,51 +18,23 @@ var _zustandStateStore = require("./zustandStateStore");
  * LIVE store's functions onto the snapshot before replacing.
  */
 
-const MAX_DEPTH = 8;
-function isPlainObjectLike(v) {
-  return typeof v === "object" && v !== null && !Array.isArray(v);
-}
-
-/** Clone `value` without functions, recording their paths. */
-function stripFunctions(value, path, fnPaths, seen, depth) {
-  if (typeof value === "function") {
-    fnPaths.push(path);
-    return undefined;
-  }
-  if (typeof value !== "object" || value === null || depth >= MAX_DEPTH) {
-    return value;
-  }
-  if (seen.has(value)) return undefined; // cycle — drop the back-reference
-  seen.add(value);
-  if (Array.isArray(value)) {
-    return value.map((item, i) => typeof item === "function" ? (fnPaths.push(`${path}[${i}]`), null) : stripFunctions(item, `${path}[${i}]`, fnPaths, seen, depth + 1));
-  }
-  if (!isPlainObjectLike(value)) return value; // Date/Map/Set/etc. — superjson handles
-  const out = {};
-  for (const [k, v] of Object.entries(value)) {
-    if (typeof v === "function") {
-      fnPaths.push(path ? `${path}.${k}` : k);
-      continue;
-    }
-    out[k] = stripFunctions(v, path ? `${path}.${k}` : k, fnPaths, seen, depth + 1);
-  }
-  return out;
-}
-
+// The function-stripping walk is shared with the store editor (editableState
+// .ts) — capture and editing must agree on what a store's "data" is.
+const MAX_DEPTH = _editableState.STRIP_MAX_DEPTH;
 /**
  * Copy every function-valued property from the LIVE state onto the restored
  * snapshot (creating containers as needed), so store actions keep working
  * after a full replace.
  */
 function graftFunctions(target, live, seen, depth) {
-  if (!isPlainObjectLike(live) || !isPlainObjectLike(target)) return;
+  if (!(0, _editableState.isPlainObjectLike)(live) || !(0, _editableState.isPlainObjectLike)(target)) return;
   if (depth >= MAX_DEPTH || seen.has(live)) return;
   seen.add(live);
   for (const [k, v] of Object.entries(live)) {
     if (typeof v === "function") {
       target[k] = v;
-    } else if (isPlainObjectLike(v)) {
-      if (!isPlainObjectLike(target[k])) {
+    } else if ((0, _editableState.isPlainObjectLike)(v)) {
+      if (!(0, _editableState.isPlainObjectLike)(target[k])) {
         // Branch missing from the snapshot — only recreate it if it holds
         // functions somewhere; otherwise the snapshot's absence wins.
         if (!containsFunction(v, new WeakSet(), depth + 1)) continue;
@@ -76,7 +49,7 @@ function containsFunction(value, seen, depth) {
   seen.add(value);
   for (const v of Object.values(value)) {
     if (typeof v === "function") return true;
-    if (isPlainObjectLike(v) && containsFunction(v, seen, depth + 1)) return true;
+    if ((0, _editableState.isPlainObjectLike)(v) && containsFunction(v, seen, depth + 1)) return true;
   }
   return false;
 }
@@ -101,7 +74,7 @@ async function capture() {
     const fnPaths = [];
     let state;
     try {
-      state = stripFunctions(info.api.getState(), "", fnPaths, new WeakSet(), 0);
+      state = (0, _editableState.stripFunctions)(info.api.getState(), "", fnPaths, new WeakSet(), 0);
     } catch (e) {
       warnings.push(`store "${info.name}": capture failed (${String(e)})`);
       continue;
@@ -190,7 +163,7 @@ async function previewItems(target, base) {
       const fnPaths = [];
       try {
         baseStores[info.name] = {
-          state: stripFunctions(info.api.getState(), "", fnPaths, new WeakSet(), 0),
+          state: (0, _editableState.stripFunctions)(info.api.getState(), "", fnPaths, new WeakSet(), 0),
           fnPaths
         };
       } catch {

package/lib/commonjs/zustand/utils/testIDs.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ZUSTAND_TEST_ID = void 0;
+exports.buildChangeRowTestIDs = buildChangeRowTestIDs;
+exports.changeRowTestID = changeRowTestID;
+exports.slugForTestID = slugForTestID;
+exports.storeRowTestID = storeRowTestID;
+/**
+ * Zustand tool test handles.
+ *
+ * Every tappable and every value the e2e suite reads back is addressed
+ * `buoy-zustand-<thing>`. Two rules in here need explaining.
+ *
+ * **A change row's handle carries an ORDINAL, and it counts per STORE.** The
+ * Events tool can address a row by what it is about, because an event is a
+ * thing that happened to a named subject — one key, one URL, one atom. A
+ * zustand state change is not: a store that a screen writes to fifty times
+ * produces fifty separate, equally real rows. Addressing them by store name
+ * alone would give fifty views one handle, and Detox fails a *matcher* that
+ * hits more than one element — so a suite would break on `toExist()`, before
+ * any assertion, with an error that says nothing about duplicate changes.
+ *
+ * So the handle is `buoy-zustand-row-<slug(storeName)>-<n>`, where n counts
+ * back from the newest row of that store (1 = newest). Deliberately relative:
+ * a state change has no identity a host could know in advance — `id` is a
+ * timestamp plus a per-process counter whose value depends on how many
+ * changes the app happened to make before the test looked. What a test CAN
+ * know is "the set I just fired is the newest change to that store". Read and
+ * tap in one beat: a row's ordinal moves the instant another change lands.
+ *
+ * **A store row's handle does NOT.** A store is registered once under a name
+ * that is unique by construction (`zustandStateStore.registerStore` returns
+ * early on a name it already holds), so `buoy-zustand-store-<slug(name)>` is
+ * as stable as the store itself — and unlike a change, it is a thing the host
+ * knows the name of before the app has booted.
+ *
+ * The suite mirrors these rules in CommonJS (`example-dev-build/utils/
+ * zustandBench.js`) and asserts the two agree — Detox runs in Node on the host
+ * and cannot import TypeScript.
+ */
+
+/** Prefix every handle in this tool shares. */
+const ZUSTAND_TEST_ID = exports.ZUSTAND_TEST_ID = "buoy-zustand";
+
+/** `zbenchWatch` → `zbenchwatch`. Shared with every Buoy tool. */
+function slugForTestID(value) {
+  return String(value ?? "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "") || "unknown";
+}
+
+/**
+ * Handle for one change row: `buoy-zustand-row-zbenchwatch-1`.
+ *
+ * `ordinal` is 1-based and counts back from the newest row of this store.
+ */
+function changeRowTestID(storeName, ordinal) {
+  return `${ZUSTAND_TEST_ID}-row-${slugForTestID(storeName)}-${ordinal}`;
+}
+
+/** Handle for one store row in the browser: `buoy-zustand-store-zbenchwatch`. */
+function storeRowTestID(storeName) {
+  return `${ZUSTAND_TEST_ID}-store-${slugForTestID(storeName)}`;
+}
+
+/**
+ * Row handle per change id for one rendered list, newest-first.
+ *
+ * Built once for the whole list rather than per row, because an ordinal is a
+ * fact about the list and a row cannot compute its own.
+ */
+function buildChangeRowTestIDs(changes) {
+  const seen = new Map();
+  const handles = new Map();
+  for (const change of changes) {
+    const ordinal = (seen.get(change.storeName) ?? 0) + 1;
+    seen.set(change.storeName, ordinal);
+    handles.set(change.id, changeRowTestID(change.storeName, ordinal));
+  }
+  return handles;
+}

package/lib/commonjs/zustand/utils/zustandStateStore.js

@@ -128,7 +128,14 @@ function formatPartialPreview(partial, maxLength = 40) {
 }
 
 /**
- * Calculate state diff summary
+ * Calculate state diff summary.
+ *
+ * `changedCount` counts the keys in `changedKeys` and nothing else. The two
+ * used to disagree: a state object that was REPLACED without any top-level
+ * value moving — which is exactly what zustand's persist middleware does when
+ * it rehydrates — reported one changed key and named none, so the row said
+ * "1 key changed" and the detail page it opened drew no CHANGED KEYS card at
+ * all. `summary` is where a change with no nameable keys is described.
  */
 function getStateDiffSummary(prevState, nextState) {
   if (prevState === nextState) {
@@ -142,7 +149,7 @@ function getStateDiffSummary(prevState, nextState) {
     return {
       summary: "changed",
       changedKeys: [],
-      changedCount: 1
+      changedCount: 0
     };
   }
   const prevKeys = Object.keys(prevState);
@@ -165,7 +172,7 @@ function getStateDiffSummary(prevState, nextState) {
     return {
       summary: "nested change",
       changedKeys: [],
-      changedCount: 1
+      changedCount: 0
     };
   }
   return {
@@ -329,6 +336,11 @@ class ZustandStateStore {
         stateChangeCount: store.stateChangeCount,
         isPersisted: store.isPersisted,
         persistName: store.persistName,
+        // Persisted is not the same as re-readable: a store registered before
+        // its persist middleware attached has a name but no handle. The
+        // Storage tool needs the difference to decide between offering "apply"
+        // and telling the user to restart.
+        canRehydrate: typeof store.rehydrate === "function",
         color: store.color,
         currentState
       };
@@ -450,6 +462,7 @@ class ZustandStateStore {
       stateChangeCount: 0,
       isPersisted: options?.isPersisted ?? false,
       persistName: options?.persistName,
+      rehydrate: options?.rehydrate,
       color: getStoreColor(name)
     };
     this.stores.set(name, storeInfo);

package/lib/module/zustand/components/ZustandActionButton.js

@@ -40,7 +40,8 @@ export function ZustandActionButton({
   onPress,
   text,
   type,
-  disabled = false
+  disabled = false,
+  testID
 }) {
   const config = buttonConfigs[type];
   return /*#__PURE__*/_jsxs(TouchableOpacity, {
@@ -52,6 +53,7 @@ export function ZustandActionButton({
       opacity: disabled ? 0.5 : 1
     }],
     activeOpacity: 0.7,
+    testID: testID,
     accessibilityRole: "button",
     accessibilityLabel: text,
     accessibilityState: {

package/lib/module/zustand/components/ZustandDetailViewToggle.js

@@ -48,6 +48,13 @@ export const ZustandDetailViewToggle = /*#__PURE__*/memo(function ZustandDetailV
         onPress: () => !isDisabled && onViewChange(config.key),
         activeOpacity: isDisabled ? 1 : 0.8,
         disabled: isDisabled,
+        testID: `buoy-zustand-view-${config.key}`,
+        accessibilityRole: "button",
+        accessibilityLabel: config.label,
+        accessibilityState: {
+          disabled: isDisabled,
+          selected: isActive
+        },
         children: [/*#__PURE__*/_jsxs(View, {
           style: styles.cardContent,
           children: [/*#__PURE__*/_jsx(IconComponent, {

package/lib/module/zustand/components/ZustandEventFilterView.js

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from "react-native";
 import { Filter, X, SectionHeader, AddFilterButton, AddFilterInput, night } from "@buoy-gg/shared-ui";
 import { zustandStateStore } from "../utils/zustandStateStore";
+import { ZUSTAND_TEST_ID, slugForTestID } from "../utils/testIDs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Returns the store color for a given pattern if it exactly matches a registered store name */
 function getStoreColorForPattern(pattern, stores) {
@@ -35,6 +36,7 @@ export function ZustandEventFilterView({
     style: styles.container,
     contentContainerStyle: styles.scrollContent,
     showsVerticalScrollIndicator: false,
+    testID: `${ZUSTAND_TEST_ID}-filters-scroll`,
     children: [stores.length > 0 && /*#__PURE__*/_jsxs(View, {
       style: styles.section,
       children: [/*#__PURE__*/_jsxs(SectionHeader, {
@@ -42,7 +44,8 @@ export function ZustandEventFilterView({
           children: "REGISTERED STORES"
         }), /*#__PURE__*/_jsx(SectionHeader.Badge, {
           count: stores.length,
-          color: night.color.accent
+          color: night.color.accent,
+          testID: `${ZUSTAND_TEST_ID}-filters-store-count`
         })]
       }), /*#__PURE__*/_jsx(ScrollView, {
         style: styles.storeList,
@@ -56,6 +59,12 @@ export function ZustandEventFilterView({
             style: [styles.storeRow, filtered && styles.storeRowFiltered],
             onPress: () => onAddPattern(store.name),
             disabled: filtered,
+            testID: `${ZUSTAND_TEST_ID}-filters-store-${slugForTestID(store.name)}`,
+            accessibilityRole: "button",
+            accessibilityLabel: `Hide ${store.name}`,
+            accessibilityState: {
+              disabled: filtered
+            },
             children: [/*#__PURE__*/_jsx(View, {
               style: [styles.storeDot, {
                 backgroundColor: filtered ? night.color.textTertiary : storeColor
@@ -89,14 +98,16 @@ export function ZustandEventFilterView({
           children: "STORE NAME FILTERS"
         }), ignoredPatterns.size > 0 && /*#__PURE__*/_jsx(SectionHeader.Badge, {
           count: ignoredPatterns.size,
-          color: night.color.accent
+          color: night.color.accent,
+          testID: `${ZUSTAND_TEST_ID}-filters-count`
         })]
       }), /*#__PURE__*/_jsx(View, {
         style: styles.addInputWrapper,
         children: !showAddInput ? /*#__PURE__*/_jsx(AddFilterButton, {
           onPress: () => setShowAddInput(true),
           color: night.color.accent,
-          label: "Add store name pattern"
+          label: "Add store name pattern",
+          testID: `${ZUSTAND_TEST_ID}-filters-add-open`
         }) : /*#__PURE__*/_jsx(AddFilterInput, {
           value: inputValue,
           onChange: setInputValue,
@@ -106,7 +117,8 @@ export function ZustandEventFilterView({
             setInputValue("");
           },
           placeholder: "Enter store name pattern to hide...",
-          color: night.color.accent
+          color: night.color.accent,
+          testID: `${ZUSTAND_TEST_ID}-filters-add-input`
         })
       }), ignoredPatterns.size > 0 && /*#__PURE__*/_jsx(View, {
         style: styles.patternList,
@@ -116,6 +128,9 @@ export function ZustandEventFilterView({
             style: styles.patternRow,
             onPress: () => onTogglePattern(pattern),
             activeOpacity: 0.8,
+            testID: `${ZUSTAND_TEST_ID}-filters-chip-${slugForTestID(pattern)}`,
+            accessibilityRole: "button",
+            accessibilityLabel: `Remove filter ${pattern}`,
             children: [storeColor ? /*#__PURE__*/_jsx(View, {
               style: [styles.storeDot, {
                 backgroundColor: storeColor