@buoy-gg/zustand 3.0.1 → 3.0.2

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

@@ -1 +1,319 @@
-"use strict";import{useState,useMemo,useCallback}from"react";import{View,Text,StyleSheet,ScrollView,TouchableOpacity}from"react-native";import{CompactRow,macOSColors,buoyColors,Database,parseValue,Box,ExpandedInfoRow,PillBadge}from"@buoy-gg/shared-ui";import{DataViewer}from"@buoy-gg/shared-ui/dataViewer";import{zustandStateStore}from"../utils/zustandStateStore";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";function getKeysPreview(e){try{const t=e.api.getState();if(t&&"object"==typeof t){const e=Object.keys(t).filter(e=>"function"!=typeof t[e]);return 0===e.length?"no data keys":e.length<=3?e.join(", "):`${e.slice(0,2).join(", ")} +${e.length-2}`}return""}catch{return""}}function StoreExpandedContent({store:e,onViewHistory:t}){const o=e.api.getState(),s=useMemo(()=>{if(o&&"object"==typeof o){const e={};for(const[t,s]of Object.entries(o))"function"!=typeof s&&(e[t]=s);return parseValue(e)}return parseValue(o)},[o]);return _jsxs(View,{style:expandedStyles.container,children:[_jsx(ExpandedInfoRow,{label:"Type",children:_jsx(PillBadge,{color:e.color,children:"ZUSTAND"})}),e.stateChangeCount>0&&_jsxs(ExpandedInfoRow,{label:"Changes",children:[_jsx(PillBadge,{color:buoyColors.warning,children:String(e.stateChangeCount)}),_jsx(TouchableOpacity,{onPress:()=>t(e.name),style:expandedStyles.viewHistoryButton,hitSlop:{top:6,bottom:6,left:6,right:6},children:_jsx(Text,{style:[expandedStyles.viewHistoryText,{color:e.color}],children:"view history →"})})]}),e.isPersisted&&_jsx(ExpandedInfoRow,{label:"Persist",children:_jsx(PillBadge,{color:buoyColors.info,icon:_jsx(Database,{size:9,color:buoyColors.info}),children:e.persistName||"persisted"})}),_jsx(View,{style:expandedStyles.dataContainer,children:s&&"object"==typeof s?_jsx(DataViewer,{title:"",data:s,showTypeFilter:!0,rawMode:!0,initialExpanded:!0}):_jsx(Text,{style:expandedStyles.emptyText,children:"Empty state"})})]})}function EmptyBrowserState(){return _jsxs(View,{style:styles.emptyState,children:[_jsx(Box,{size:32,color:macOSColors.text.muted}),_jsx(Text,{style:styles.emptyTitle,children:"No stores registered"}),_jsx(Text,{style:styles.emptyText,children:"Use watchStores() to register your Zustand stores.\nThey will appear here with their current state."})]})}export function ZustandStoreBrowser({stores:e,searchQuery:t,onViewHistory:o}){const[s,r]=useState(null),n=useMemo(()=>{if(!t)return e;const o=t.toLowerCase();return e.filter(e=>e.name.toLowerCase().includes(o)||e.persistName&&e.persistName.toLowerCase().includes(o))},[e,t]),i=useCallback(e=>{r(t=>t===e.name?null:e.name)},[]);return 0!==n.length||t?0===n.length&&t?_jsxs(View,{style:styles.emptyState,children:[_jsx(Text,{style:styles.emptyTitle,children:"No matching stores"}),_jsxs(Text,{style:styles.emptyText,children:['No stores match "',t,'"']})]}):_jsxs(ScrollView,{style:styles.container,contentContainerStyle:styles.scrollContent,showsVerticalScrollIndicator:!0,children:[_jsxs(View,{style:styles.sectionHeader,children:[_jsx(Text,{style:styles.sectionTitle,children:"STORES"}),_jsx(View,{style:styles.sectionCountBadge,children:_jsx(Text,{style:styles.sectionCountText,children:n.length})})]}),n.map(e=>{const t=s===e.name,r=getKeysPreview(e),n=zustandStateStore.getStoreColor(e.name);return _jsxs(View,{style:styles.storeRowWrapper,children:[_jsx(CompactRow,{statusDotColor:n,statusLabel:e.name,statusSublabel:e.isPersisted?"persisted":"in-memory",primaryText:r,showChevron:!0,isExpanded:t,onPress:()=>i(e),expandedContent:t?_jsx(StoreExpandedContent,{store:e,onViewHistory:o}):void 0}),e.stateChangeCount>0&&_jsx(View,{style:[styles.absCountBadge,{backgroundColor:n+"22",borderColor:n+"55"}],pointerEvents:"none",children:_jsx(Text,{style:[styles.absCountText,{color:n}],children:String(e.stateChangeCount)})})]},e.name)})]}):_jsx(EmptyBrowserState,{})}const styles=StyleSheet.create({container:{flex:1},storeRowWrapper:{position:"relative"},absCountBadge:{position:"absolute",top:4,right:10,paddingHorizontal:5,paddingVertical:1,borderRadius:4,borderWidth:1,zIndex:1},absCountText:{fontSize:9,fontWeight:"700",fontFamily:"monospace"},scrollContent:{paddingTop:8,paddingBottom:20},sectionHeader:{flexDirection:"row",alignItems:"center",paddingHorizontal:16,paddingVertical:8,gap:8},sectionTitle:{fontSize:11,fontWeight:"700",letterSpacing:.5,color:macOSColors.text.muted},sectionCountBadge:{backgroundColor:buoyColors.primary+"26",paddingHorizontal:8,paddingVertical:2,borderRadius:4},sectionCountText:{fontSize:10,fontWeight:"700",color:buoyColors.primary,fontFamily:"monospace"},emptyState:{alignItems:"center",paddingVertical:40},emptyTitle:{color:macOSColors.text.primary,fontSize:14,fontWeight:"600",marginTop:12,marginBottom:6},emptyText:{color:macOSColors.text.muted,fontSize:12,textAlign:"center",lineHeight:18}}),expandedStyles=StyleSheet.create({container:{gap:10},viewHistoryButton:{marginLeft:4},viewHistoryText:{fontSize:10,fontWeight:"600",fontFamily:"monospace"},dataContainer:{backgroundColor:buoyColors.base,borderRadius:6,borderWidth:1,borderColor:buoyColors.border,overflow:"hidden",minHeight:60},emptyText:{color:buoyColors.textMuted,fontSize:12,padding:14,fontStyle:"italic"}});
+"use strict";
+
+/**
+ * ZustandStoreBrowser
+ *
+ * Browse tab — shows all registered Zustand stores and their current state.
+ * Mirrors the Storage Browser pattern from @buoy-gg/storage.
+ *
+ * Each store is shown as an expandable row with its current state viewable
+ * via the shared DataViewer component.
+ */
+
+import { useState, useMemo, useCallback } from "react";
+import { View, Text, StyleSheet, ScrollView, TouchableOpacity, ActivityIndicator } from "react-native";
+import { CompactRow, macOSColors, buoyColors, Database, parseValue, Box, ExpandedInfoRow, PillBadge } from "@buoy-gg/shared-ui";
+import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
+import { zustandStateStore } from "../utils/zustandStateStore";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Get a preview of the store's top-level keys
+ */
+function getKeysPreview(store) {
+  try {
+    const state = store.api.getState();
+    if (state && typeof state === "object") {
+      const keys = Object.keys(state);
+      const dataKeys = keys.filter(k => {
+        const val = state[k];
+        return typeof val !== "function";
+      });
+      if (dataKeys.length === 0) return "no data keys";
+      if (dataKeys.length <= 3) return dataKeys.join(", ");
+      return `${dataKeys.slice(0, 2).join(", ")} +${dataKeys.length - 2}`;
+    }
+    return "";
+  } catch {
+    return "";
+  }
+}
+function StoreExpandedContent({
+  store,
+  onViewHistory
+}) {
+  const state = store.api.getState();
+  const displayState = useMemo(() => {
+    if (state && typeof state === "object") {
+      const filtered = {};
+      for (const [key, value] of Object.entries(state)) {
+        if (typeof value !== "function") {
+          filtered[key] = value;
+        }
+      }
+      return parseValue(filtered);
+    }
+    return parseValue(state);
+  }, [state]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: expandedStyles.container,
+    children: [/*#__PURE__*/_jsx(ExpandedInfoRow, {
+      label: "Type",
+      children: /*#__PURE__*/_jsx(PillBadge, {
+        color: store.color,
+        children: "ZUSTAND"
+      })
+    }), store.stateChangeCount > 0 && /*#__PURE__*/_jsxs(ExpandedInfoRow, {
+      label: "Changes",
+      children: [/*#__PURE__*/_jsx(PillBadge, {
+        color: buoyColors.warning,
+        children: String(store.stateChangeCount)
+      }), /*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: () => onViewHistory(store.name),
+        style: expandedStyles.viewHistoryButton,
+        hitSlop: {
+          top: 6,
+          bottom: 6,
+          left: 6,
+          right: 6
+        },
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [expandedStyles.viewHistoryText, {
+            color: store.color
+          }],
+          children: "view history \u2192"
+        })
+      })]
+    }), store.isPersisted && /*#__PURE__*/_jsx(ExpandedInfoRow, {
+      label: "Persist",
+      children: /*#__PURE__*/_jsx(PillBadge, {
+        color: buoyColors.info,
+        icon: /*#__PURE__*/_jsx(Database, {
+          size: 9,
+          color: buoyColors.info
+        }),
+        children: store.persistName || "persisted"
+      })
+    }), /*#__PURE__*/_jsx(View, {
+      style: expandedStyles.dataContainer,
+      children: displayState && typeof displayState === "object" ? /*#__PURE__*/_jsx(DataViewer, {
+        title: "",
+        data: displayState,
+        showTypeFilter: true,
+        rawMode: true,
+        initialExpanded: true
+      }) : /*#__PURE__*/_jsx(Text, {
+        style: expandedStyles.emptyText,
+        children: "Empty state"
+      })
+    })]
+  });
+}
+function LoadingBrowserState() {
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.emptyState,
+    children: [/*#__PURE__*/_jsx(ActivityIndicator, {
+      size: "small",
+      color: macOSColors.text.muted
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.emptyTitle,
+      children: "Loading stores\u2026"
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.emptyText,
+      children: "Waiting for the device to send its registered stores."
+    })]
+  });
+}
+function EmptyBrowserState() {
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.emptyState,
+    children: [/*#__PURE__*/_jsx(Box, {
+      size: 32,
+      color: macOSColors.text.muted
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.emptyTitle,
+      children: "No stores registered"
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.emptyText,
+      children: "Use watchStores() to register your Zustand stores.\nThey will appear here with their current state."
+    })]
+  });
+}
+export function ZustandStoreBrowser({
+  stores,
+  searchQuery,
+  onViewHistory,
+  isLoading = false
+}) {
+  const [expandedStore, setExpandedStore] = useState(null);
+
+  // Filter stores by search query
+  const filteredStores = useMemo(() => {
+    if (!searchQuery) return stores;
+    const search = searchQuery.toLowerCase();
+    return stores.filter(s => s.name.toLowerCase().includes(search) || s.persistName && s.persistName.toLowerCase().includes(search));
+  }, [stores, searchQuery]);
+  const handleStorePress = useCallback(store => {
+    setExpandedStore(prev => prev === store.name ? null : store.name);
+  }, []);
+  if (filteredStores.length === 0 && !searchQuery) {
+    return isLoading ? /*#__PURE__*/_jsx(LoadingBrowserState, {}) : /*#__PURE__*/_jsx(EmptyBrowserState, {});
+  }
+  if (filteredStores.length === 0 && searchQuery) {
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.emptyState,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.emptyTitle,
+        children: "No matching stores"
+      }), /*#__PURE__*/_jsxs(Text, {
+        style: styles.emptyText,
+        children: ["No stores match \"", searchQuery, "\""]
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsxs(ScrollView, {
+    style: styles.container,
+    contentContainerStyle: styles.scrollContent,
+    showsVerticalScrollIndicator: true,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.sectionHeader,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.sectionTitle,
+        children: "STORES"
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.sectionCountBadge,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.sectionCountText,
+          children: filteredStores.length
+        })
+      })]
+    }), filteredStores.map(store => {
+      const isExpanded = expandedStore === store.name;
+      const keysPreview = getKeysPreview(store);
+      const storeColor = zustandStateStore.getStoreColor(store.name);
+      return /*#__PURE__*/_jsxs(View, {
+        style: styles.storeRowWrapper,
+        children: [/*#__PURE__*/_jsx(CompactRow, {
+          statusDotColor: storeColor,
+          statusLabel: store.name,
+          statusSublabel: store.isPersisted ? "persisted" : "in-memory",
+          primaryText: keysPreview,
+          showChevron: true,
+          isExpanded: isExpanded,
+          onPress: () => handleStorePress(store),
+          expandedContent: isExpanded ? /*#__PURE__*/_jsx(StoreExpandedContent, {
+            store: store,
+            onViewHistory: onViewHistory
+          }) : undefined
+        }), store.stateChangeCount > 0 && /*#__PURE__*/_jsx(View, {
+          style: [styles.absCountBadge, {
+            backgroundColor: storeColor + "22",
+            borderColor: storeColor + "55"
+          }],
+          pointerEvents: "none",
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [styles.absCountText, {
+              color: storeColor
+            }],
+            children: String(store.stateChangeCount)
+          })
+        })]
+      }, store.name);
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  storeRowWrapper: {
+    position: "relative"
+  },
+  absCountBadge: {
+    position: "absolute",
+    top: 4,
+    right: 10,
+    paddingHorizontal: 5,
+    paddingVertical: 1,
+    borderRadius: 4,
+    borderWidth: 1,
+    zIndex: 1
+  },
+  absCountText: {
+    fontSize: 9,
+    fontWeight: "700",
+    fontFamily: "monospace"
+  },
+  scrollContent: {
+    paddingTop: 8,
+    paddingBottom: 20
+  },
+  sectionHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    gap: 8
+  },
+  sectionTitle: {
+    fontSize: 11,
+    fontWeight: "700",
+    letterSpacing: 0.5,
+    color: macOSColors.text.muted
+  },
+  sectionCountBadge: {
+    backgroundColor: buoyColors.primary + "26",
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 4
+  },
+  sectionCountText: {
+    fontSize: 10,
+    fontWeight: "700",
+    color: buoyColors.primary,
+    fontFamily: "monospace"
+  },
+  emptyState: {
+    alignItems: "center",
+    paddingVertical: 40
+  },
+  emptyTitle: {
+    color: macOSColors.text.primary,
+    fontSize: 14,
+    fontWeight: "600",
+    marginTop: 12,
+    marginBottom: 6
+  },
+  emptyText: {
+    color: macOSColors.text.muted,
+    fontSize: 12,
+    textAlign: "center",
+    lineHeight: 18
+  }
+});
+const expandedStyles = StyleSheet.create({
+  container: {
+    gap: 10
+  },
+  viewHistoryButton: {
+    marginLeft: 4
+  },
+  viewHistoryText: {
+    fontSize: 10,
+    fontWeight: "600",
+    fontFamily: "monospace"
+  },
+  dataContainer: {
+    backgroundColor: buoyColors.base,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: buoyColors.border,
+    overflow: "hidden",
+    minHeight: 60
+  },
+  emptyText: {
+    color: buoyColors.textMuted,
+    fontSize: 12,
+    padding: 14,
+    fontStyle: "italic"
+  }
+});

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

@@ -1 +1,10 @@
-"use strict";export{ZustandModal}from"./ZustandModal";export{ZustandIcon,ZUSTAND_ICON_COLOR}from"./ZustandIcon";export{ZustandStateChangeItem}from"./ZustandStateChangeItem";export{ZustandStateDetailContent,ZustandStateDetailFooter}from"./ZustandStateDetailContent";export{ZustandStateInfoView}from"./ZustandStateInfoView";export{ZustandDetailViewToggle}from"./ZustandDetailViewToggle";export{ZustandActionButton}from"./ZustandActionButton";export{ZustandStoreBrowser}from"./ZustandStoreBrowser";
+"use strict";
+
+export { ZustandModal } from "./ZustandModal";
+export { ZustandIcon, ZUSTAND_ICON_COLOR } from "./ZustandIcon";
+export { ZustandStateChangeItem } from "./ZustandStateChangeItem";
+export { ZustandStateDetailContent, ZustandStateDetailFooter } from "./ZustandStateDetailContent";
+export { ZustandStateInfoView } from "./ZustandStateInfoView";
+export { ZustandDetailViewToggle } from "./ZustandDetailViewToggle";
+export { ZustandActionButton } from "./ZustandActionButton";
+export { ZustandStoreBrowser } from "./ZustandStoreBrowser";

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

@@ -1 +1,3 @@
-"use strict";export{useZustandStateChanges}from"./useZustandStateChanges";
+"use strict";
+
+export { useZustandStateChanges } from "./useZustandStateChanges";

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

@@ -1 +1,88 @@
-"use strict";import{useState,useEffect,useMemo,useCallback}from"react";import{zustandStateStore}from"../utils/zustandStateStore";export function useZustandStateChanges(){const[e,t]=useState(()=>zustandStateStore.getStateChanges()),[a,s]=useState(()=>zustandStateStore.getStores()),[r,n]=useState({}),[o,u]=useState(()=>zustandStateStore.getEnabled());useEffect(()=>{const e=zustandStateStore.subscribe(e=>{t(e)}),a=zustandStateStore.subscribeToStores(e=>{s(e)});return()=>{e(),a()}},[]);const S=useMemo(()=>{let t=e;if(r.searchText){const e=r.searchText.toLowerCase();t=t.filter(t=>t.storeName.toLowerCase().includes(e)||t.partialPreview.toLowerCase().includes(e)||t.changedKeys.some(t=>t.toLowerCase().includes(e)))}return r.storeNames&&r.storeNames.length>0&&(t=t.filter(e=>r.storeNames.includes(e.storeName))),r.onlyWithChanges&&(t=t.filter(e=>e.hasStateChange)),t},[e,r]),l=useMemo(()=>{const t=e.length,s=e.filter(e=>e.hasStateChange).length;return{totalChanges:t,changesWithStateChange:s,changesWithoutStateChange:t-s,storeCount:a.length,averageDuration:0}},[e,a]),g=useMemo(()=>zustandStateStore.getUniqueStoreNames(),[a]),c=useCallback(()=>{zustandStateStore.clearStateChanges()},[]),h=useCallback(()=>{const e=!o;zustandStateStore.setEnabled(e),u(e)},[o]),i=useCallback(e=>zustandStateStore.getStateChangeById(e),[]);return{stateChanges:e,filteredChanges:S,filter:r,setFilter:n,stats:l,stores:a,clearChanges:c,isEnabled:o,toggleCapture:h,storeNames:g,getChangeById:i}}
+"use strict";
+
+/**
+ * Hook for consuming Zustand state changes from the store
+ *
+ * Mirrors useReduxActions.ts from @buoy-gg/redux
+ */
+
+import { useState, useEffect, useMemo, useCallback } from "react";
+import { zustandStateStore } from "../utils/zustandStateStore";
+export function useZustandStateChanges() {
+  const [stateChanges, setStateChanges] = useState(() => zustandStateStore.getStateChanges());
+  const [stores, setStores] = useState(() => zustandStateStore.getStores());
+  const [filter, setFilter] = useState({});
+  const [isEnabled, setIsEnabled] = useState(() => zustandStateStore.getEnabled());
+
+  // Subscribe to state changes
+  useEffect(() => {
+    const unsubChanges = zustandStateStore.subscribe(newChanges => {
+      setStateChanges(newChanges);
+    });
+    const unsubStores = zustandStateStore.subscribeToStores(newStores => {
+      setStores(newStores);
+    });
+    return () => {
+      unsubChanges();
+      unsubStores();
+    };
+  }, []);
+
+  // Filter state changes — derive directly from state to avoid stale reads
+  const filteredChanges = useMemo(() => {
+    let filtered = stateChanges;
+    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;
+  }, [stateChanges, filter]);
+
+  // Get stats — derive directly from state
+  const stats = useMemo(() => {
+    const total = stateChanges.length;
+    const withChanges = stateChanges.filter(c => c.hasStateChange).length;
+    return {
+      totalChanges: total,
+      changesWithStateChange: withChanges,
+      changesWithoutStateChange: total - withChanges,
+      storeCount: stores.length,
+      averageDuration: 0
+    };
+  }, [stateChanges, stores]);
+
+  // Get unique store names
+  const storeNames = useMemo(() => {
+    return zustandStateStore.getUniqueStoreNames();
+  }, [stores]);
+  const clearChanges = useCallback(() => {
+    zustandStateStore.clearStateChanges();
+  }, []);
+  const toggleCapture = useCallback(() => {
+    const newEnabled = !isEnabled;
+    zustandStateStore.setEnabled(newEnabled);
+    setIsEnabled(newEnabled);
+  }, [isEnabled]);
+  const getChangeById = useCallback(id => {
+    return zustandStateStore.getStateChangeById(id);
+  }, []);
+  return {
+    stateChanges,
+    filteredChanges,
+    filter,
+    setFilter,
+    stats,
+    stores,
+    clearChanges,
+    isEnabled,
+    toggleCapture,
+    storeNames,
+    getChangeById
+  };
+}

package/lib/module/zustand/index.js

@@ -1 +1,12 @@
-"use strict";export{ZustandModal}from"./components/ZustandModal";export{ZustandIcon,ZUSTAND_ICON_COLOR}from"./components/ZustandIcon";export{ZustandStateChangeItem}from"./components/ZustandStateChangeItem";export{ZustandStateDetailContent,ZustandStateDetailFooter}from"./components/ZustandStateDetailContent";export{ZustandStateInfoView}from"./components/ZustandStateInfoView";export{ZustandDetailViewToggle}from"./components/ZustandDetailViewToggle";export{ZustandActionButton}from"./components/ZustandActionButton";export{zustandStateStore}from"./utils/zustandStateStore";export{watchStores,buoyDevTools,isStoreInstrumented}from"./utils/buoyZustandMiddleware";export{useZustandStateChanges}from"./hooks/useZustandStateChanges";
+"use strict";
+
+export { ZustandModal } from "./components/ZustandModal";
+export { ZustandIcon, ZUSTAND_ICON_COLOR } from "./components/ZustandIcon";
+export { ZustandStateChangeItem } from "./components/ZustandStateChangeItem";
+export { ZustandStateDetailContent, ZustandStateDetailFooter } from "./components/ZustandStateDetailContent";
+export { ZustandStateInfoView } from "./components/ZustandStateInfoView";
+export { ZustandDetailViewToggle } from "./components/ZustandDetailViewToggle";
+export { ZustandActionButton } from "./components/ZustandActionButton";
+export { zustandStateStore } from "./utils/zustandStateStore";
+export { watchStores, buoyDevTools, isStoreInstrumented } from "./utils/buoyZustandMiddleware";
+export { useZustandStateChanges } from "./hooks/useZustandStateChanges";

package/lib/module/zustand/sync/zustandSyncAdapter.js

@@ -0,0 +1,44 @@
+"use strict";
+
+import { zustandStateStore } from "../utils/zustandStateStore";
+/**
+ * Sync adapter for the zustand tool, consumed by @buoy-gg/external-sync's
+ * `useExternalSync` (structurally matches its ToolSyncAdapter interface so
+ * this package doesn't need a dependency on it).
+ *
+ * State changes are captured by the middleware (watchStores/buoyDevTools),
+ * independent of whether a dashboard is watching — subscribing here only
+ * streams what the store already records. The snapshot carries both the
+ * change timeline and the store registry (with each store's current state)
+ * so the dashboard can render the store browser.
+ *
+ * The `setState` action powers remote time-travel/reset from the dashboard.
+ */
+export const zustandSyncAdapter = {
+  version: 1,
+  getSnapshot: () => ({
+    changes: zustandStateStore.getStateChanges(),
+    stores: zustandStateStore.getStoreSnapshots()
+  }),
+  subscribe: onChange => {
+    const unsubscribeChanges = zustandStateStore.subscribe(onChange);
+    const unsubscribeStores = zustandStateStore.subscribeToStores(onChange);
+    return () => {
+      unsubscribeChanges();
+      unsubscribeStores();
+    };
+  },
+  actions: {
+    clearEvents: () => {
+      zustandStateStore.clearStateChanges();
+    },
+    setState: params => {
+      const {
+        storeName,
+        state,
+        replace
+      } = params;
+      zustandStateStore.getStore(storeName)?.api.setState(state, replace ?? true);
+    }
+  }
+};