@buoy-gg/zustand 7.0.38 → 7.0.40

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

@@ -1 +1,389 @@
-"use strict";import{useCallback,useMemo,useState}from"react";import{Alert,ScrollView,StyleSheet,Text,TouchableOpacity,View}from"react-native";import{buoyColors,Database,FileJson,night,PillBadge,ToolBackground,useSafeAreaInsets,X,monoFont}from"@buoy-gg/shared-ui";import{DataTreeActionDock,DataViewer,getAtPath,useTreeEditor,ValueEditModal}from"@buoy-gg/shared-ui/dataViewer";import{computeMergePartial,editableStateOf}from"../utils/editableState";import{ZUSTAND_TEST_ID}from"../utils/testIDs";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const EDITOR_ID=`${ZUSTAND_TEST_ID}-editor`;export function ZustandStoreEditorScreen({store:e,onClose:t,applySafeAreaInset:o}){const s=useSafeAreaInsets(),r=o?s.bottom:0,[i]=useState(()=>editableStateOf(e.api.getState())),a=useCallback(async t=>{if(null===i.data)throw new Error("Store is not editable.");const o=computeMergePartial(i.data,t);Object.keys(o).length>0&&e.api.setState(o,!1)},[i,e]),l=useTreeEditor({value:i.data,save:a,onClose:t,confirmDiscard:t=>Alert.alert("Unsaved changes",`"${e.name}" has edits that haven't been written to the store.`,[{text:"Keep editing",style:"cancel"},{text:"Discard",style:"destructive",onPress:t.discard},{text:"Save",onPress:t.save}])}),{draft:n,selection:c,valuePath:d}=l,h=useMemo(()=>{const e=n.value;return null!==e&&"object"==typeof e?Object.keys(e).length:0},[n.value]);return null===i.data?_jsxs(View,{style:styles.screen,children:[_jsx(ToolBackground,{}),_jsx(Text,{style:styles.blockedText,children:i.blockedReason})]}):_jsxs(View,{style:styles.screen,children:[_jsx(ToolBackground,{}),_jsxs(View,{style:styles.header,children:[_jsx(TouchableOpacity,{onPress:l.requestClose,testID:`${EDITOR_ID}-close`,accessibilityRole:"button",accessibilityLabel:"Close editor",style:styles.headerButton,hitSlop:{top:8,bottom:8,left:8,right:8},children:_jsx(X,{size:16,color:night.color.textSecondary})}),_jsxs(View,{style:styles.headerTitle,children:[_jsx(Text,{testID:`${EDITOR_ID}-store`,style:styles.headerKey,numberOfLines:1,children:e.name}),_jsx(Text,{style:[styles.headerState,n.isDirty&&styles.headerDirty],children:n.isSaving?"Saving…":n.isDirty?"Draft · unsaved":"In sync with store"})]}),_jsxs(TouchableOpacity,{onPress:l.openRawEditor,testID:`${EDITOR_ID}-raw`,accessibilityRole:"button",accessibilityLabel:"Edit raw JSON",style:styles.headerButton,hitSlop:{top:8,bottom:8,left:8,right:8},children:[_jsx(FileJson,{size:16,color:night.color.accent}),_jsx(Text,{style:styles.headerRawText,children:"Raw"})]})]}),_jsxs(View,{style:styles.metaRow,children:[_jsx(PillBadge,{color:buoyColors.info,icon:e.isPersisted?_jsx(Database,{size:9,color:buoyColors.info}):void 0,children:e.isPersisted?e.persistName||"persisted":"in-memory"}),_jsxs(Text,{style:styles.metaText,children:[`object · ${h} key${1===h?"":"s"}`,i.fnPaths.length>0?` · ${i.fnPaths.length} action${1===i.fnPaths.length?"":"s"} untouched`:""]})]}),_jsxs(ScrollView,{testID:`${EDITOR_ID}-scroll`,style:styles.treeScroll,contentContainerStyle:styles.treeContent,keyboardShouldPersistTaps:"handled",children:[_jsx(View,{style:styles.treeCard,children:_jsx(DataViewer,{data:n.value,title:"",rawMode:!0,initialExpanded:!0,showTypeFilter:!1,onSelectionChange:l.setSelection,selectPath:n.selectPath,testIDPrefix:`${EDITOR_ID}-row`,onRequestInlineEdit:e=>l.openValueEditor(e.path)})}),_jsx(Text,{style:styles.treeHint,children:"Tap a row to select it · double-tap to edit its value · saves merge into the live store, so actions and untouched keys survive"})]}),n.error?_jsx(Text,{style:styles.error,numberOfLines:3,testID:`${EDITOR_ID}-error`,children:n.error}):null,_jsxs(View,{style:[styles.footer,{paddingBottom:r}],children:[_jsx(DataTreeActionDock,{root:n.value,selection:c,onEdit:n.apply,onSelectPath:n.selectAt,onEditValue:()=>l.openValueEditor(c?.path??[]),rootEntriesLocked:!0}),n.isDirty?_jsxs(View,{style:styles.commitRow,children:[_jsx(TouchableOpacity,{onPress:n.discard,disabled:n.isSaving,testID:`${EDITOR_ID}-discard`,accessibilityRole:"button",accessibilityLabel:"Discard changes",style:styles.discardButton,children:_jsx(Text,{style:styles.discardText,children:"Discard"})}),_jsx(TouchableOpacity,{onPress:l.saveAndClose,disabled:n.isSaving,testID:`${EDITOR_ID}-save`,accessibilityRole:"button",accessibilityLabel:"Save changes",style:[styles.saveButton,n.isSaving&&styles.saveDisabled],children:_jsx(Text,{style:styles.saveText,children:n.isSaving?"Saving…":"Save changes"})})]}):null]}),d?_jsx(ValueEditModal,{path:d,value:getAtPath(n.value,d),onSave:l.applyValue,onCancel:l.closeValueEditor,saveLabel:"Apply",testIDPrefix:`${ZUSTAND_TEST_ID}-value`}):null]})}const styles=StyleSheet.create({screen:{flex:1,backgroundColor:night.color.bg},blockedText:{color:night.color.textTertiary,fontSize:12,padding:20,textAlign:"center",lineHeight:18},header:{flexDirection:"row",alignItems:"center",gap:8,paddingHorizontal:10,paddingVertical:8,borderBottomWidth:1,borderBottomColor:night.color.border},headerButton:{flexDirection:"row",alignItems:"center",gap:4,paddingVertical:6,paddingHorizontal:4},headerRawText:{color:night.color.accent,fontSize:12,fontWeight:"700"},headerTitle:{flex:1,alignItems:"center",gap:2},headerKey:{color:night.color.text,fontSize:13,fontWeight:"600",fontFamily:monoFont},headerState:{color:night.color.textTertiary,fontSize:10},headerDirty:{color:night.color.warning},metaRow:{flexDirection:"row",alignItems:"center",gap:8,paddingHorizontal:12,paddingVertical:8},metaText:{color:night.color.textTertiary,fontSize:11,fontFamily:monoFont},treeScroll:{flex:1},treeContent:{paddingHorizontal:12,paddingBottom:16},treeCard:{backgroundColor:night.color.surface,borderRadius:10,borderWidth:1,borderColor:night.color.border,padding:6},treeHint:{color:night.color.textTertiary,fontSize:10,paddingTop:8,paddingHorizontal:4},error:{color:night.color.danger,fontSize:11,fontFamily:monoFont,paddingHorizontal:12,paddingBottom:6},footer:{backgroundColor:night.color.surface},commitRow:{flexDirection:"row",gap:8,paddingHorizontal:12,paddingVertical:10,borderTopWidth:1,borderTopColor:night.color.border},discardButton:{flex:1,minHeight:44,alignItems:"center",justifyContent:"center",borderRadius:10,borderWidth:1,borderColor:night.color.border},discardText:{color:night.color.textSecondary,fontSize:14,fontWeight:"600"},saveButton:{flex:1.4,minHeight:44,alignItems:"center",justifyContent:"center",borderRadius:10,backgroundColor:night.color.accent},saveDisabled:{opacity:.5},saveText:{color:night.color.onAccent,fontSize:15,fontWeight:"700"}});
+"use strict";
+
+/**
+ * Editing a store, on a screen of its own — the Storage key editor's shape,
+ * pointed at a live zustand store.
+ *
+ * Same reasoning as storage's editor screen: a tree, six structural actions
+ * and a keyboard don't fit inside an expanded card, so the card offers ONE
+ * edit button and the work happens here with the whole viewport. The tree,
+ * dock, draft and value modal are the shared-ui editor — one implementation,
+ * two tools.
+ *
+ * What is zustand-specific is the WRITE. Storage saves by replacing one key's
+ * serialized value; a store has no such luxury — its state holds the app's
+ * action functions, and a full `setState(draft, true)` replace would delete
+ * them (see `editableState.ts`). So Save diffs the draft against the state it
+ * was seeded from and writes ONE top-level merge:
+ *
+ *   store.api.setState(changedTopLevelKeys, false)
+ *
+ * which by construction cannot remove a key or touch a function. The two
+ * edits a merge cannot express — removing or renaming a top-level key — are
+ * disabled in the dock (`rootEntriesLocked`) and refused at save if they
+ * arrive through the raw-JSON escape hatch.
+ *
+ * On a desktop mirror the same line goes over the wire: the mirrored store's
+ * `api.setState` forwards to the device's sync adapter (the time-travel
+ * path). That write has no ack, so a remote save resolves optimistically and
+ * the next device snapshot is the confirmation.
+ */
+
+import { useCallback, useMemo, useState } from "react";
+import { Alert, ScrollView, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { buoyColors, Database, FileJson, night, PillBadge, ToolBackground, useSafeAreaInsets, X, monoFont } from "@buoy-gg/shared-ui";
+import { DataTreeActionDock, DataViewer, getAtPath, useTreeEditor, ValueEditModal } from "@buoy-gg/shared-ui/dataViewer";
+import { computeMergePartial, editableStateOf } from "../utils/editableState";
+import { ZUSTAND_TEST_ID } from "../utils/testIDs";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const EDITOR_ID = `${ZUSTAND_TEST_ID}-editor`;
+export function ZustandStoreEditorScreen({
+  store,
+  onClose,
+  applySafeAreaInset
+}) {
+  const insets = useSafeAreaInsets();
+  const bottomInset = applySafeAreaInset ? insets.bottom : 0;
+
+  // Seeded ONCE, when the editor opens — the draft is diffed against this at
+  // save, so the partial carries exactly what the user changed and a key the
+  // app wrote meanwhile (untouched here) keeps the app's value.
+  const [seed] = useState(() => editableStateOf(store.api.getState()));
+  const save = useCallback(async draft => {
+    if (seed.data === null) throw new Error("Store is not editable.");
+    const partial = computeMergePartial(seed.data, draft);
+    // A merge, never a replace — the entire reason this editor can exist.
+    // Empty partial = the draft circled back to the seed; nothing to write.
+    if (Object.keys(partial).length > 0) {
+      store.api.setState(partial, false);
+    }
+  }, [seed, store]);
+  const editor = useTreeEditor({
+    value: seed.data,
+    save,
+    onClose,
+    confirmDiscard: choices => Alert.alert("Unsaved changes", `"${store.name}" has edits that haven't been written to the store.`, [{
+      text: "Keep editing",
+      style: "cancel"
+    }, {
+      text: "Discard",
+      style: "destructive",
+      onPress: choices.discard
+    }, {
+      text: "Save",
+      onPress: choices.save
+    }])
+  });
+  const {
+    draft,
+    selection,
+    valuePath
+  } = editor;
+  const keyCount = useMemo(() => {
+    const v = draft.value;
+    return v !== null && typeof v === "object" ? Object.keys(v).length : 0;
+  }, [draft.value]);
+
+  // The card's gating means this can't normally be reached un-editable, but a
+  // remote mirror can theoretically drop hydration between tap and mount.
+  if (seed.data === null) {
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.screen,
+      children: [/*#__PURE__*/_jsx(ToolBackground, {}), /*#__PURE__*/_jsx(Text, {
+        style: styles.blockedText,
+        children: seed.blockedReason
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.screen,
+    children: [/*#__PURE__*/_jsx(ToolBackground, {}), /*#__PURE__*/_jsxs(View, {
+      style: styles.header,
+      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: editor.requestClose,
+        testID: `${EDITOR_ID}-close`,
+        accessibilityRole: "button",
+        accessibilityLabel: "Close editor",
+        style: styles.headerButton,
+        hitSlop: {
+          top: 8,
+          bottom: 8,
+          left: 8,
+          right: 8
+        },
+        children: /*#__PURE__*/_jsx(X, {
+          size: 16,
+          color: night.color.textSecondary
+        })
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.headerTitle,
+        children: [/*#__PURE__*/_jsx(Text
+        // Which store this editor is pointed at — opening it on the wrong
+        // one looks exactly like the right one until a write lands
+        // somewhere unexpected.
+        , {
+          testID: `${EDITOR_ID}-store`,
+          style: styles.headerKey,
+          numberOfLines: 1,
+          children: store.name
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.headerState, draft.isDirty && styles.headerDirty],
+          children: draft.isSaving ? "Saving…" : draft.isDirty ? "Draft · unsaved" : "In sync with store"
+        })]
+      }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+        onPress: editor.openRawEditor,
+        testID: `${EDITOR_ID}-raw`,
+        accessibilityRole: "button",
+        accessibilityLabel: "Edit raw JSON",
+        style: styles.headerButton,
+        hitSlop: {
+          top: 8,
+          bottom: 8,
+          left: 8,
+          right: 8
+        },
+        children: [/*#__PURE__*/_jsx(FileJson, {
+          size: 16,
+          color: night.color.accent
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.headerRawText,
+          children: "Raw"
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.metaRow,
+      children: [/*#__PURE__*/_jsx(PillBadge, {
+        color: buoyColors.info,
+        icon: store.isPersisted ? /*#__PURE__*/_jsx(Database, {
+          size: 9,
+          color: buoyColors.info
+        }) : undefined,
+        children: store.isPersisted ? store.persistName || "persisted" : "in-memory"
+      }), /*#__PURE__*/_jsxs(Text, {
+        style: styles.metaText,
+        children: [`object · ${keyCount} key${keyCount === 1 ? "" : "s"}`, seed.fnPaths.length > 0 ? ` · ${seed.fnPaths.length} action${seed.fnPaths.length === 1 ? "" : "s"} untouched` : ""]
+      })]
+    }), /*#__PURE__*/_jsxs(ScrollView, {
+      testID: `${EDITOR_ID}-scroll`,
+      style: styles.treeScroll,
+      contentContainerStyle: styles.treeContent,
+      keyboardShouldPersistTaps: "handled",
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.treeCard,
+        children: /*#__PURE__*/_jsx(DataViewer, {
+          data: draft.value,
+          title: "",
+          rawMode: true,
+          initialExpanded: true
+          // Type filtering is a READING aid: the filtered view is a
+          // projection whose row paths don't address the real document, so
+          // the explorer stops reporting selection while one is active. An
+          // editor whose actions silently go dead isn't worth the filter.
+          ,
+          showTypeFilter: false,
+          onSelectionChange: editor.setSelection,
+          selectPath: draft.selectPath
+          // Its own handle root: the card that opened this editor is still
+          // mounted underneath, rendering the same value in its preview tree.
+          ,
+          testIDPrefix: `${EDITOR_ID}-row`,
+          onRequestInlineEdit: sel => editor.openValueEditor(sel.path)
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.treeHint,
+        children: "Tap a row to select it \xB7 double-tap to edit its value \xB7 saves merge into the live store, so actions and untouched keys survive"
+      })]
+    }), draft.error ? /*#__PURE__*/_jsx(Text, {
+      style: styles.error,
+      numberOfLines: 3,
+      testID: `${EDITOR_ID}-error`,
+      children: draft.error
+    }) : null, /*#__PURE__*/_jsxs(View, {
+      style: [styles.footer, {
+        paddingBottom: bottomInset
+      }],
+      children: [/*#__PURE__*/_jsx(DataTreeActionDock, {
+        root: draft.value,
+        selection: selection,
+        onEdit: draft.apply,
+        onSelectPath: draft.selectAt
+        // Booleans never reach this — the dock applies their flip directly.
+        ,
+        onEditValue: () => editor.openValueEditor(selection?.path ?? [])
+        // A merge write can rewrite a top-level key but never delete one, so
+        // Remove is disabled at depth 1 — see `editableState.ts`.
+        ,
+        rootEntriesLocked: true
+      }), draft.isDirty ? /*#__PURE__*/_jsxs(View, {
+        style: styles.commitRow,
+        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: draft.discard,
+          disabled: draft.isSaving,
+          testID: `${EDITOR_ID}-discard`,
+          accessibilityRole: "button",
+          accessibilityLabel: "Discard changes",
+          style: styles.discardButton,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.discardText,
+            children: "Discard"
+          })
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: editor.saveAndClose,
+          disabled: draft.isSaving,
+          testID: `${EDITOR_ID}-save`,
+          accessibilityRole: "button",
+          accessibilityLabel: "Save changes",
+          style: [styles.saveButton, draft.isSaving && styles.saveDisabled],
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.saveText,
+            children: draft.isSaving ? "Saving…" : "Save changes"
+          })
+        })]
+      }) : null]
+    }), valuePath ? /*#__PURE__*/_jsx(ValueEditModal, {
+      path: valuePath,
+      value: getAtPath(draft.value, valuePath),
+      onSave: editor.applyValue,
+      onCancel: editor.closeValueEditor
+      // It only reaches the draft here — the single write happens on Save.
+      ,
+      saveLabel: "Apply",
+      testIDPrefix: `${ZUSTAND_TEST_ID}-value`
+    }) : null]
+  });
+}
+const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+    // Opaque on purpose: transparency here showed the whole store list
+    // through the editor, not just the sheet's backdrop. The screen paints
+    // its own ToolBackground instead — see the mount site above.
+    backgroundColor: night.color.bg
+  },
+  blockedText: {
+    color: night.color.textTertiary,
+    fontSize: 12,
+    padding: 20,
+    textAlign: "center",
+    lineHeight: 18
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: night.color.border
+  },
+  headerButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    paddingVertical: 6,
+    paddingHorizontal: 4
+  },
+  headerRawText: {
+    color: night.color.accent,
+    fontSize: 12,
+    fontWeight: "700"
+  },
+  headerTitle: {
+    flex: 1,
+    alignItems: "center",
+    gap: 2
+  },
+  headerKey: {
+    color: night.color.text,
+    fontSize: 13,
+    fontWeight: "600",
+    fontFamily: monoFont
+  },
+  headerState: {
+    color: night.color.textTertiary,
+    fontSize: 10
+  },
+  headerDirty: {
+    color: night.color.warning
+  },
+  metaRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 8
+  },
+  metaText: {
+    color: night.color.textTertiary,
+    fontSize: 11,
+    fontFamily: monoFont
+  },
+  treeScroll: {
+    flex: 1
+  },
+  treeContent: {
+    paddingHorizontal: 12,
+    paddingBottom: 16
+  },
+  treeCard: {
+    backgroundColor: night.color.surface,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: night.color.border,
+    padding: 6
+  },
+  treeHint: {
+    color: night.color.textTertiary,
+    fontSize: 10,
+    paddingTop: 8,
+    paddingHorizontal: 4
+  },
+  error: {
+    color: night.color.danger,
+    fontSize: 11,
+    fontFamily: monoFont,
+    paddingHorizontal: 12,
+    paddingBottom: 6
+  },
+  footer: {
+    backgroundColor: night.color.surface
+  },
+  commitRow: {
+    flexDirection: "row",
+    gap: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderTopWidth: 1,
+    borderTopColor: night.color.border
+  },
+  discardButton: {
+    flex: 1,
+    minHeight: 44,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: night.color.border
+  },
+  discardText: {
+    color: night.color.textSecondary,
+    fontSize: 14,
+    fontWeight: "600"
+  },
+  saveButton: {
+    flex: 1.4,
+    minHeight: 44,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 10,
+    backgroundColor: night.color.accent
+  },
+  saveDisabled: {
+    opacity: 0.5
+  },
+  saveText: {
+    color: night.color.onAccent,
+    fontSize: 15,
+    fontWeight: "700"
+  }
+});

package/lib/module/zustand/hooks/useZustandStateChanges.js

@@ -1 +1,70 @@
-"use strict";import{useCallback,useMemo}from"react";import{useChangeLog,useSubscribedValue}from"@buoy-gg/shared-ui";import{zustandStateStore}from"../utils/zustandStateStore";function filterChanges(e,t){let s=e;if(t.searchText){const e=t.searchText.toLowerCase();s=s.filter(t=>t.storeName.toLowerCase().includes(e)||t.partialPreview.toLowerCase().includes(e)||t.changedKeys.some(t=>t.toLowerCase().includes(e)))}return t.storeNames&&t.storeNames.length>0&&(s=s.filter(e=>t.storeNames.includes(e.storeName))),t.onlyWithChanges&&(s=s.filter(e=>e.hasStateChange)),s}const readStores=()=>zustandStateStore.getStores(),subscribeToStores=e=>zustandStateStore.subscribeToStores(e);export function useZustandStateChanges(){const e=useChangeLog(zustandStateStore,{filterItems:filterChanges}),t=useSubscribedValue(readStores,subscribeToStores),s=useMemo(()=>{const s=e.items.length,a=e.items.filter(e=>e.hasStateChange).length;return{totalChanges:s,changesWithStateChange:a,changesWithoutStateChange:s-a,storeCount:t.length,averageDuration:0}},[e.items,t]),a=useMemo(()=>zustandStateStore.getUniqueStoreNames(),[t]),r=useCallback(e=>zustandStateStore.getStateChangeById(e),[]);return{stateChanges:e.items,filteredChanges:e.filteredItems,filter:e.filter,setFilter:e.setFilter,stats:s,stores:t,clearChanges:zustandStateStore.clearStateChanges.bind(zustandStateStore),isEnabled:e.isEnabled,toggleCapture:e.toggleCapture,storeNames:a,getChangeById:r}}
+"use strict";
+
+/**
+ * Hook for consuming Zustand state changes from the store
+ *
+ * The subscribe / filter / pause / clear plumbing is shared `useChangeLog`;
+ * this file owns the zustand-specific filter, stats and store registry.
+ */
+
+import { useCallback, useMemo } from "react";
+import { useChangeLog, useSubscribedValue } from "@buoy-gg/shared-ui";
+import { zustandStateStore } from "../utils/zustandStateStore";
+function filterChanges(changes, filter) {
+  let filtered = changes;
+  if (filter.searchText) {
+    const search = filter.searchText.toLowerCase();
+    filtered = filtered.filter(c => c.storeName.toLowerCase().includes(search) || c.partialPreview.toLowerCase().includes(search) || c.changedKeys.some(k => k.toLowerCase().includes(search)));
+  }
+  if (filter.storeNames && filter.storeNames.length > 0) {
+    filtered = filtered.filter(c => filter.storeNames.includes(c.storeName));
+  }
+  if (filter.onlyWithChanges) {
+    filtered = filtered.filter(c => c.hasStateChange);
+  }
+  return filtered;
+}
+const readStores = () => zustandStateStore.getStores();
+const subscribeToStores = listener => zustandStateStore.subscribeToStores(listener);
+export function useZustandStateChanges() {
+  const log = useChangeLog(zustandStateStore, {
+    filterItems: filterChanges
+  });
+  const stores = useSubscribedValue(readStores, subscribeToStores);
+
+  // Get stats — derive directly from state
+  const stats = useMemo(() => {
+    const total = log.items.length;
+    const withChanges = log.items.filter(c => c.hasStateChange).length;
+    return {
+      totalChanges: total,
+      changesWithStateChange: withChanges,
+      changesWithoutStateChange: total - withChanges,
+      storeCount: stores.length,
+      averageDuration: 0
+    };
+  }, [log.items, stores]);
+
+  // Get unique store names
+  const storeNames = useMemo(() => {
+    return zustandStateStore.getUniqueStoreNames();
+  }, [stores]);
+  const getChangeById = useCallback(id => {
+    return zustandStateStore.getStateChangeById(id);
+  }, []);
+  return {
+    stateChanges: log.items,
+    filteredChanges: log.filteredItems,
+    filter: log.filter,
+    setFilter: log.setFilter,
+    stats,
+    stores,
+    // Not the shared log.clear: the store also owns each store's change
+    // count, and only clearStateChanges resets those with the list.
+    clearChanges: zustandStateStore.clearStateChanges.bind(zustandStateStore),
+    isEnabled: log.isEnabled,
+    toggleCapture: log.toggleCapture,
+    storeNames,
+    getChangeById
+  };
+}