@buoy-gg/zustand 7.0.38 → 7.0.39

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

@@ -1 +1,379 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.zustandStateStore=void 0;var _sharedUi=require("@buoy-gg/shared-ui");const STORE_COLORS={counter:"#10B981",auth:"#8B5CF6",user:"#3B82F6",cart:"#EC4899",app:"#6366F1",ui:"#F59E0B",settings:"#14B8A6",theme:"#06B6D4",navigation:"#F97316",form:"#EF4444"};function getStoreColor(t){return(0,_sharedUi.entityColor)(t,STORE_COLORS)}function formatPartialPreview(t,e=40){return(0,_sharedUi.formatValuePreview)(t,{maxLength:e,undefinedLabel:"",functionLabel:"(updater fn)"})}class ZustandStateStore extends _sharedUi.ChangeLog{stores=new Map;storeListeners=new Set;remoteSetStateHandler=null;addStateChange(t){if(!this.canRecord())return;const{storeName:e,partial:s,replace:r,prevState:a,nextState:o,duration:n,category:i,isPersisted:h=!1}=t,u=a!==o,{summary:S,changedKeys:c,changedCount:g}=(0,_sharedUi.shallowDiffSummary)(a,o),l=formatPartialPreview(s),d=(n??0)>16,m=i??(r?"replace":"setState"),p={id:this.nextId(),storeName:e,timestamp:Date.now(),prevState:a,nextState:o,partial:s,duration:n,hasStateChange:u,replace:r,category:m,changedKeys:c,changedKeysCount:g,diffSummary:S,partialPreview:l,isSlowUpdate:d,isPersisted:h};this.push(p);const C=this.stores.get(e);C&&C.stateChangeCount++,this.notifyListeners()}getStateChanges(){return this.getAll()}getStateChangeById(t){return this.getById(t)}clearStateChanges(){for(const t of this.stores.values())t.stateChangeCount=0;this.clear(),this.notifyStoreListeners()}replaceStateChanges(t){if(!this.getEnabled())return;for(const t of this.stores.values())t.stateChangeCount=0;const e=t.slice(0,this.max);for(const t of e){const e=this.stores.get(t.storeName);e&&e.stateChangeCount++}this.setItems(e),this.notifyStoreListeners()}getStoreSnapshots(){return Array.from(this.stores.values()).map(t=>{let e;try{e=t.api.getState()}catch{e=void 0}return{name:t.name,stateChangeCount:t.stateChangeCount,isPersisted:t.isPersisted,persistName:t.persistName,canRehydrate:"function"==typeof t.rehydrate,color:t.color,currentState:e}})}setRemoteSetStateHandler(t){this.remoteSetStateHandler=t}replaceFromSnapshot(t,e){if(!this.getEnabled())return;const s=new Map;for(const t of this.items){const e=t.prevState;e&&!0===e.__buoyStateOnDevice||s.set(t.id,t)}const r=t.slice(0,this.max).map(t=>{const e=s.get(t.id),r=t.prevState;return e&&!0===r?.__buoyStateOnDevice?{...t,prevState:e.prevState,nextState:e.nextState,partial:e.partial}:t}),a=new Map;for(const[t,e]of this.stores)try{const s=e.api.getState();s&&!0===s.__buoyStateOnDevice||a.set(t,s)}catch{}this.stores=new Map(e.map(t=>{const e=t.currentState,s=a.get(t.name),r=void 0!==s&&!0===e?.__buoyStateOnDevice?s:t.currentState;return[t.name,{name:t.name,api:{getState:()=>r,setState:(e,s)=>{this.remoteSetStateHandler?.(t.name,e,s)},subscribe:()=>()=>{}},stateChangeCount:t.stateChangeCount,isPersisted:t.isPersisted,persistName:t.persistName,color:t.color}]})),this.setItems(r),this.notifyStoreListeners()}hydrateChange(t,e){this.hydrateById(t,e)}hydrateStoreState(t,e){const s=this.stores.get(t);s&&(this.stores.set(t,{...s,api:{...s.api,getState:()=>e}}),this.notifyStoreListeners())}registerStore(t,e,s){if(this.stores.has(t))return;const r={name:t,api:e,stateChangeCount:0,isPersisted:s?.isPersisted??!1,persistName:s?.persistName,rehydrate:s?.rehydrate,color:getStoreColor(t)};this.stores.set(t,r),this.notifyStoreListeners()}unregisterStore(t){this.stores.delete(t),this.notifyStoreListeners()}getStores(){return Array.from(this.stores.values())}getStore(t){return this.stores.get(t)}getStoreColor(t){return this.stores.get(t)?.color??getStoreColor(t)}filterStateChanges(t){let e=this.getAll();if(t.searchText){const s=t.searchText.toLowerCase();e=e.filter(t=>t.storeName.toLowerCase().includes(s)||t.partialPreview.toLowerCase().includes(s)||t.changedKeys.some(t=>t.toLowerCase().includes(s)))}return t.storeNames&&t.storeNames.length>0&&(e=e.filter(e=>t.storeNames.includes(e.storeName))),t.onlyWithChanges&&(e=e.filter(t=>t.hasStateChange)),e}getStats(){const t=this.items.length,e=this.items.filter(t=>t.hasStateChange).length,s=this.stores.size,r=this.items.filter(t=>void 0!==t.duration).map(t=>t.duration),a=r.length>0?r.reduce((t,e)=>t+e,0)/r.length:0;return{totalChanges:t,changesWithStateChange:e,changesWithoutStateChange:t-e,storeCount:s,averageDuration:Math.round(100*a)/100}}getUniqueStoreNames(){return Array.from(this.stores.keys()).sort()}setMaxChanges(t){this.setMax(t)}subscribeToStores(t){return this.storeListeners.add(t),()=>{this.storeListeners.delete(t)}}notifyStoreListeners(){const t=this.getStores();this.storeListeners.forEach(e=>e(t))}}const zustandStateStore=exports.zustandStateStore=new ZustandStateStore;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.zustandStateStore = void 0;
+var _sharedUi = require("@buoy-gg/shared-ui");
+/**
+ * Zustand state store - captures and stores Zustand state changes
+ *
+ * The generic event-log half (ring buffer, listeners, clear-forwarding for
+ * the desktop mirror, pause/suppress flags, hydrate-by-id) is the shared
+ * `ChangeLog`; this file owns the zustand-specific half — the store registry,
+ * snapshots, mirror rebuild, filters and stats.
+ */
+
+// ============================================
+// Store Color Palette
+// ============================================
+
+const STORE_COLORS = {
+  counter: "#10B981",
+  // emerald
+  auth: "#8B5CF6",
+  // purple
+  user: "#3B82F6",
+  // blue
+  cart: "#EC4899",
+  // pink
+  app: "#6366F1",
+  // indigo
+  ui: "#F59E0B",
+  // amber
+  settings: "#14B8A6",
+  // teal
+  theme: "#06B6D4",
+  // cyan
+  navigation: "#F97316",
+  // orange
+  form: "#EF4444" // red
+};
+
+/**
+ * Get consistent color for a store based on its name
+ */
+function getStoreColor(storeName) {
+  return (0, _sharedUi.entityColor)(storeName, STORE_COLORS);
+}
+
+/**
+ * Format payload preview for display
+ */
+function formatPartialPreview(partial, maxLength = 40) {
+  return (0, _sharedUi.formatValuePreview)(partial, {
+    maxLength,
+    undefinedLabel: "",
+    functionLabel: "(updater fn)"
+  });
+}
+
+// ============================================
+// Zustand State Store
+// ============================================
+
+class ZustandStateStore extends _sharedUi.ChangeLog {
+  stores = new Map();
+  storeListeners = new Set();
+  remoteSetStateHandler = null;
+
+  // ---- State Change Tracking ----
+
+  addStateChange(params) {
+    if (!this.canRecord()) return;
+    const {
+      storeName,
+      partial,
+      replace,
+      prevState,
+      nextState,
+      duration,
+      category,
+      isPersisted = false
+    } = params;
+    const hasStateChange = prevState !== nextState;
+    // `changedCount` counts the keys in `changedKeys` and nothing else, so the
+    // row's "N keys changed" and the detail page's CHANGED KEYS card agree —
+    // including the persist-rehydrate case where the object is replaced
+    // without any top-level value moving.
+    const {
+      summary,
+      changedKeys,
+      changedCount
+    } = (0, _sharedUi.shallowDiffSummary)(prevState, nextState);
+    const partialPreview = formatPartialPreview(partial);
+    const isSlowUpdate = (duration ?? 0) > 16;
+    const resolvedCategory = category ?? (replace ? "replace" : "setState");
+    const stateChange = {
+      id: this.nextId(),
+      storeName,
+      timestamp: Date.now(),
+      prevState,
+      nextState,
+      partial,
+      duration,
+      hasStateChange,
+      replace,
+      category: resolvedCategory,
+      changedKeys,
+      changedKeysCount: changedCount,
+      diffSummary: summary,
+      partialPreview,
+      isSlowUpdate,
+      isPersisted
+    };
+    this.push(stateChange);
+
+    // Update store change count
+    const storeInfo = this.stores.get(storeName);
+    if (storeInfo) {
+      storeInfo.stateChangeCount++;
+    }
+    this.notifyListeners();
+  }
+  getStateChanges() {
+    return this.getAll();
+  }
+  getStateChangeById(id) {
+    return this.getById(id);
+  }
+  clearStateChanges() {
+    // Reset counts
+    for (const store of this.stores.values()) {
+      store.stateChangeCount = 0;
+    }
+    this.clear();
+    // The browser keeps its store list in React state and only re-reads it
+    // on a store notification — `clear()` above only tells the change-log
+    // listeners, so without this the cards kept their old counts after Clear.
+    this.notifyStoreListeners();
+  }
+
+  // ---- Remote Mirror Mode ----
+
+  /**
+   * Replace the change log without touching the store registry. Used when a
+   * host keeps real registered stores (JUMP / RESET stay wired) but needs to
+   * reseed the event list — the docs live tour, or any mirror that already
+   * called `registerStore`. Does not fire `onClear`. Respects the enabled
+   * flag so the UI's pause button freezes the reseed.
+   */
+  replaceStateChanges(changes) {
+    if (!this.getEnabled()) return;
+    for (const store of this.stores.values()) {
+      store.stateChangeCount = 0;
+    }
+    const kept = changes.slice(0, this.max);
+    for (const change of kept) {
+      const store = this.stores.get(change.storeName);
+      if (store) store.stateChangeCount++;
+    }
+    this.setItems(kept);
+    this.notifyStoreListeners();
+  }
+
+  /**
+   * Serializable snapshot of the tracked stores (registry metadata plus each
+   * store's current state). Used by the sync adapter on the device side —
+   * the live `api` handles can't go over the wire.
+   */
+  getStoreSnapshots() {
+    return Array.from(this.stores.values()).map(store => {
+      let currentState;
+      try {
+        currentState = store.api.getState();
+      } catch {
+        currentState = undefined;
+      }
+      return {
+        name: store.name,
+        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
+      };
+    });
+  }
+
+  /**
+   * Handler invoked when the UI calls setState on a mirrored store (e.g.
+   * time-travel from the dashboard). Forward it to the synced device.
+   */
+  setRemoteSetStateHandler(handler) {
+    this.remoteSetStateHandler = handler;
+  }
+
+  /**
+   * Replace the entire mirror contents from a synced device snapshot. The
+   * rebuilt registry entries get stub `api` handles: getState() serves the
+   * snapshotted state, setState() forwards to the remote handler. Respects
+   * the enabled flag so the UI's pause button freezes the mirror.
+   */
+  replaceFromSnapshot(changes, storeSnapshots) {
+    if (!this.getEnabled()) return;
+
+    // Preserve trees 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.items) {
+      const prev = existing.prevState;
+      if (!prev || prev.__buoyStateOnDevice !== true) {
+        hydrated.set(existing.id, existing);
+      }
+    }
+    const merged = changes.slice(0, this.max).map(change => {
+      const kept = hydrated.get(change.id);
+      const incoming = change.prevState;
+      return kept && incoming?.__buoyStateOnDevice === true ? {
+        ...change,
+        prevState: kept.prevState,
+        nextState: kept.nextState,
+        partial: kept.partial
+      } : change;
+    });
+
+    // Preserve currentState a remote mirror already hydrated — oversized
+    // stores arrive as STATE_ON_DEVICE markers on every snapshot.
+    const hydratedStores = new Map();
+    for (const [name, store] of this.stores) {
+      try {
+        const state = store.api.getState();
+        const marker = state;
+        if (!marker || marker.__buoyStateOnDevice !== true) {
+          hydratedStores.set(name, state);
+        }
+      } catch {
+        // ignore
+      }
+    }
+    this.stores = new Map(storeSnapshots.map(snapshot => {
+      const incoming = snapshot.currentState;
+      const kept = hydratedStores.get(snapshot.name);
+      const currentState = kept !== undefined && incoming?.__buoyStateOnDevice === true ? kept : snapshot.currentState;
+      return [snapshot.name, {
+        name: snapshot.name,
+        api: {
+          getState: () => currentState,
+          setState: (partial, replace) => {
+            this.remoteSetStateHandler?.(snapshot.name, partial, replace);
+          },
+          subscribe: () => () => {}
+        },
+        stateChangeCount: snapshot.stateChangeCount,
+        isPersisted: snapshot.isPersisted,
+        persistName: snapshot.persistName,
+        color: snapshot.color
+      }];
+    }));
+    this.setItems(merged);
+    this.notifyStoreListeners();
+  }
+
+  /**
+   * Hydrate one mirrored change with real trees fetched on demand from the
+   * device via the adapter's `getChangeDetail`. Remote-mirror (desktop) only.
+   */
+  hydrateChange(id, patch) {
+    this.hydrateById(id, patch);
+  }
+
+  /**
+   * Hydrate one mirrored store's currentState fetched on demand from the
+   * device via the adapter's `getStoreState`. Remote-mirror (desktop) only.
+   */
+  hydrateStoreState(storeName, currentState) {
+    const store = this.stores.get(storeName);
+    if (!store) return;
+    this.stores.set(storeName, {
+      ...store,
+      api: {
+        ...store.api,
+        getState: () => currentState
+      }
+    });
+    this.notifyStoreListeners();
+  }
+
+  // ---- Store Registry ----
+
+  registerStore(name, api, options) {
+    if (this.stores.has(name)) return;
+    const storeInfo = {
+      name,
+      api,
+      stateChangeCount: 0,
+      isPersisted: options?.isPersisted ?? false,
+      persistName: options?.persistName,
+      rehydrate: options?.rehydrate,
+      color: getStoreColor(name)
+    };
+    this.stores.set(name, storeInfo);
+    this.notifyStoreListeners();
+  }
+  unregisterStore(name) {
+    this.stores.delete(name);
+    this.notifyStoreListeners();
+  }
+  getStores() {
+    return Array.from(this.stores.values());
+  }
+  getStore(name) {
+    return this.stores.get(name);
+  }
+  getStoreColor(name) {
+    return this.stores.get(name)?.color ?? getStoreColor(name);
+  }
+
+  // ---- Filtering ----
+
+  filterStateChanges(filter) {
+    let filtered = this.getAll();
+    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;
+  }
+
+  // ---- Stats ----
+
+  getStats() {
+    const total = this.items.length;
+    const withChanges = this.items.filter(c => c.hasStateChange).length;
+    const storeCount = this.stores.size;
+    const durations = this.items.filter(c => c.duration !== undefined).map(c => c.duration);
+    const avgDuration = durations.length > 0 ? durations.reduce((sum, d) => sum + d, 0) / durations.length : 0;
+    return {
+      totalChanges: total,
+      changesWithStateChange: withChanges,
+      changesWithoutStateChange: total - withChanges,
+      storeCount,
+      averageDuration: Math.round(avgDuration * 100) / 100
+    };
+  }
+  getUniqueStoreNames() {
+    return Array.from(this.stores.keys()).sort();
+  }
+
+  // ---- Enable / Disable ----
+
+  setMaxChanges(max) {
+    this.setMax(max);
+  }
+
+  // ---- Subscriptions ----
+
+  subscribeToStores(listener) {
+    this.storeListeners.add(listener);
+    return () => {
+      this.storeListeners.delete(listener);
+    };
+  }
+  notifyStoreListeners() {
+    const stores = this.getStores();
+    this.storeListeners.forEach(listener => listener(stores));
+  }
+}
+const zustandStateStore = exports.zustandStateStore = new ZustandStateStore();

package/lib/module/index.js

@@ -1 +1,90 @@
-"use strict";import"./zustand/utils/snapshotProvider";export{zustandToolPreset,createZustandTool}from"./preset";export{watchStores}from"./zustand/utils/buoyZustandMiddleware";export{buoyDevTools}from"./zustand/utils/buoyZustandMiddleware";export{isStoreInstrumented}from"./zustand/utils/buoyZustandMiddleware";export{useZustandStateChanges}from"./zustand/hooks/useZustandStateChanges";export{ZustandModal,ZustandToolView}from"./zustand/components/ZustandModal";export{ZustandStateChangeItem}from"./zustand/components/ZustandStateChangeItem";export{ZustandStateDetailContent,ZustandStateDetailFooter}from"./zustand/components/ZustandStateDetailContent";export{ZustandIcon,ZUSTAND_ICON_COLOR}from"./zustand/components/ZustandIcon";export{zustandSyncAdapter}from"./zustand/sync/zustandSyncAdapter";export{zustandStateStore}from"./zustand/utils/zustandStateStore";
+"use strict";
+
+/**
+ * @buoy-gg/zustand
+ *
+ * Zustand Store DevTools for React Native
+ *
+ * PUBLIC API - Only these exports are supported for external use.
+ *
+ * @example Recommended setup (one line, zero store modifications)
+ * ```tsx
+ * import { watchStores } from '@buoy-gg/zustand';
+ * import { useCounterStore } from './stores/counter';
+ * import { useAuthStore } from './stores/auth';
+ *
+ * // One call, anywhere at module scope or in your root layout:
+ * watchStores({
+ *   counterStore: useCounterStore,
+ *   authStore: useAuthStore,
+ * });
+ * ```
+ *
+ * @example Advanced: middleware for extra detail (partial + timing)
+ * ```tsx
+ * import { create } from 'zustand';
+ * import { buoyDevTools } from '@buoy-gg/zustand';
+ *
+ * const useCounterStore = create(
+ *   buoyDevTools(
+ *     (set) => ({
+ *       count: 0,
+ *       increment: () => set((s) => ({ count: s.count + 1 })),
+ *     }),
+ *     { name: 'counterStore' }
+ *   )
+ * );
+ * ```
+ */
+
+// Side-effect: registers the Time Machine snapshot provider
+import "./zustand/utils/snapshotProvider";
+
+// =============================================================================
+// PRESET (Primary entry point for FloatingDevTools)
+// =============================================================================
+export { zustandToolPreset, createZustandTool } from "./preset";
+
+// =============================================================================
+// WATCH STORES (Recommended — non-intrusive, subscribe-only)
+// =============================================================================
+export { watchStores } from "./zustand/utils/buoyZustandMiddleware";
+
+// =============================================================================
+// MIDDLEWARE (Advanced — wraps setState for partial + timing capture)
+// =============================================================================
+export { buoyDevTools } from "./zustand/utils/buoyZustandMiddleware";
+
+// =============================================================================
+// UTILITIES
+// =============================================================================
+export { isStoreInstrumented } from "./zustand/utils/buoyZustandMiddleware";
+
+// =============================================================================
+// HOOKS (For consuming Zustand state data)
+// =============================================================================
+export { useZustandStateChanges } from "./zustand/hooks/useZustandStateChanges";
+// =============================================================================
+// COMPONENTS (For custom UI implementations)
+// =============================================================================
+// `ZustandToolView` is the same tool rendered inline (header bar + body + footer)
+// instead of inside a JsModal — for hosts that show tools in a panel.
+export { ZustandModal, ZustandToolView } from "./zustand/components/ZustandModal";
+export { ZustandStateChangeItem } from "./zustand/components/ZustandStateChangeItem";
+export { ZustandStateDetailContent, ZustandStateDetailFooter } from "./zustand/components/ZustandStateDetailContent";
+export { ZustandIcon, ZUSTAND_ICON_COLOR } from "./zustand/components/ZustandIcon";
+
+// =============================================================================
+// EXTERNAL SYNC (Adapter for @buoy-gg/external-sync's useExternalSync)
+// =============================================================================
+export { zustandSyncAdapter } from "./zustand/sync/zustandSyncAdapter";
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+// =============================================================================
+// INTERNAL EXPORTS (For @buoy-gg/* packages only - not part of public API)
+// =============================================================================
+/** @internal */
+export { zustandStateStore } from "./zustand/utils/zustandStateStore";

package/lib/module/preset.js

@@ -1 +1,98 @@
-"use strict";import{ZustandModal}from"./zustand/components/ZustandModal";import{ZustandIcon}from"./zustand/components/ZustandIcon";import{jsx as _jsx}from"react/jsx-runtime";export const zustandToolPreset={id:"zustand",name:"ZUSTAND",description:"Zustand store & state inspector",slot:"both",icon:({size:o})=>_jsx(ZustandIcon,{size:o}),component:ZustandModal,props:{enableSharedModalDimensions:!1}};export function createZustandTool(o){return{id:o?.id||"zustand",name:o?.name||"ZUSTAND",description:o?.description||"Zustand store & state inspector",slot:"both",icon:({size:n})=>_jsx(ZustandIcon,{size:n,color:o?.iconColor}),component:ZustandModal,props:{enableSharedModalDimensions:void 0!==o?.enableSharedModalDimensions&&o.enableSharedModalDimensions}}}
+"use strict";
+
+/**
+ * Pre-configured Zustand DevTools preset for FloatingDevTools
+ *
+ * ZERO-CONFIG: This preset is auto-discovered by FloatingDevTools!
+ * Just install @buoy-gg/zustand and wrap your stores with buoyDevTools().
+ *
+ * @example Automatic (recommended)
+ * ```tsx
+ * import { create } from 'zustand';
+ * import { buoyDevTools } from '@buoy-gg/zustand';
+ *
+ * const useCounterStore = create(
+ *   buoyDevTools(
+ *     (set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })) }),
+ *     { name: 'counterStore' }
+ *   )
+ * );
+ *
+ * // The Zustand tool appears automatically in FloatingDevTools!
+ * <FloatingDevTools />
+ * ```
+ *
+ * @example Manual (only for custom configuration)
+ * ```tsx
+ * import { createZustandTool } from '@buoy-gg/zustand';
+ *
+ * const customZustandTool = createZustandTool({
+ *   name: "STATE",
+ *   iconColor: "#463B3F",
+ * });
+ *
+ * <FloatingDevTools apps={[customZustandTool]} />
+ * ```
+ */
+
+import { ZustandModal } from "./zustand/components/ZustandModal";
+import { ZustandIcon } from "./zustand/components/ZustandIcon";
+
+/**
+ * Pre-configured Zustand DevTools preset for FloatingDevTools.
+ * Includes:
+ * - Live state change monitoring
+ * - State inspection (JSON viewer)
+ * - State diff visualization (tree + split)
+ * - Filter by store name
+ * - Changed keys tracking
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export const zustandToolPreset = {
+  id: "zustand",
+  name: "ZUSTAND",
+  description: "Zustand store & state inspector",
+  slot: "both",
+  icon: ({
+    size
+  }) => /*#__PURE__*/_jsx(ZustandIcon, {
+    size: size
+  }),
+  component: ZustandModal,
+  props: {
+    enableSharedModalDimensions: false
+  }
+};
+
+/**
+ * Create a custom Zustand DevTools configuration.
+ * Use this if you want to override default settings.
+ *
+ * @example
+ * ```tsx
+ * import { createZustandTool } from '@buoy-gg/zustand';
+ *
+ * const myZustandTool = createZustandTool({
+ *   name: "STATE",
+ *   iconColor: "#463B3F",
+ * });
+ * ```
+ */
+export function createZustandTool(options) {
+  return {
+    id: options?.id || "zustand",
+    name: options?.name || "ZUSTAND",
+    description: options?.description || "Zustand store & state inspector",
+    slot: "both",
+    icon: ({
+      size
+    }) => /*#__PURE__*/_jsx(ZustandIcon, {
+      size: size,
+      color: options?.iconColor
+    }),
+    component: ZustandModal,
+    props: {
+      enableSharedModalDimensions: options?.enableSharedModalDimensions !== undefined ? options.enableSharedModalDimensions : false
+    }
+  };
+}

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

@@ -1 +1,114 @@
-"use strict";import{TouchableOpacity,Text,View,StyleSheet}from"react-native";import{night,monoFont}from"@buoy-gg/shared-ui";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const buttonConfigs={copy:{color:night.color.accent,backgroundColor:night.color.accentSoft,borderColor:night.color.accentBorder,textColor:night.color.accent},reset:{color:night.color.warning,backgroundColor:night.color.warningSoft,borderColor:night.color.warning+"40",textColor:night.color.warning},clear:{color:night.color.danger,backgroundColor:night.color.dangerSoft,borderColor:night.color.danger+"40",textColor:night.color.danger},jump:{color:night.color.warning,backgroundColor:night.color.warningSoft,borderColor:night.color.warning+"40",textColor:night.color.warning}};export function ZustandActionButton({onPress:o,text:t,type:r,disabled:e=!1,testID:i}){const n=buttonConfigs[r];return _jsxs(TouchableOpacity,{disabled:e,onPress:o,style:[styles.button,{backgroundColor:e?night.color.textTertiary+"1A":n.backgroundColor,borderColor:e?night.color.textTertiary+"33":n.borderColor,opacity:e?.5:1}],activeOpacity:.7,testID:i,accessibilityRole:"button",accessibilityLabel:t,accessibilityState:{disabled:e},children:[_jsx(View,{style:[styles.dot,{backgroundColor:e?night.color.textTertiary:n.color}]}),_jsx(Text,{style:[styles.text,{color:e?night.color.textTertiary:n.textColor}],children:t})]})}const styles=StyleSheet.create({button:{flexDirection:"row",alignItems:"center",justifyContent:"center",borderRadius:6,borderWidth:1,paddingHorizontal:12,paddingVertical:6,height:25,minWidth:80,shadowOffset:{width:0,height:1},shadowOpacity:.2,shadowRadius:2,elevation:2},dot:{width:5,height:5,borderRadius:3,marginRight:6,shadowColor:night.color.text,shadowOffset:{width:0,height:0},shadowOpacity:.6,shadowRadius:2},text:{fontSize:10,fontWeight:"600",letterSpacing:.5,textTransform:"uppercase",fontFamily:monoFont,height:12}});
+"use strict";
+
+/**
+ * ZustandActionButton
+ *
+ * Generic action button for Zustand DevTools footer.
+ * Mirrors ReduxActionButton.tsx
+ */
+
+import { TouchableOpacity, Text, View, StyleSheet } from "react-native";
+import { night, monoFont } from "@buoy-gg/shared-ui";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const buttonConfigs = {
+  copy: {
+    color: night.color.accent,
+    backgroundColor: night.color.accentSoft,
+    borderColor: night.color.accentBorder,
+    textColor: night.color.accent
+  },
+  reset: {
+    color: night.color.warning,
+    backgroundColor: night.color.warningSoft,
+    borderColor: night.color.warning + "40",
+    textColor: night.color.warning
+  },
+  clear: {
+    color: night.color.danger,
+    backgroundColor: night.color.dangerSoft,
+    borderColor: night.color.danger + "40",
+    textColor: night.color.danger
+  },
+  jump: {
+    color: night.color.warning,
+    backgroundColor: night.color.warningSoft,
+    borderColor: night.color.warning + "40",
+    textColor: night.color.warning
+  }
+};
+export function ZustandActionButton({
+  onPress,
+  text,
+  type,
+  disabled = false,
+  testID
+}) {
+  const config = buttonConfigs[type];
+  return /*#__PURE__*/_jsxs(TouchableOpacity, {
+    disabled: disabled,
+    onPress: onPress,
+    style: [styles.button, {
+      backgroundColor: disabled ? night.color.textTertiary + "1A" : config.backgroundColor,
+      borderColor: disabled ? night.color.textTertiary + "33" : config.borderColor,
+      opacity: disabled ? 0.5 : 1
+    }],
+    activeOpacity: 0.7,
+    testID: testID,
+    accessibilityRole: "button",
+    accessibilityLabel: text,
+    accessibilityState: {
+      disabled
+    },
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [styles.dot, {
+        backgroundColor: disabled ? night.color.textTertiary : config.color
+      }]
+    }), /*#__PURE__*/_jsx(Text, {
+      style: [styles.text, {
+        color: disabled ? night.color.textTertiary : config.textColor
+      }],
+      children: text
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  button: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 6,
+    borderWidth: 1,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    height: 25,
+    minWidth: 80,
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 2,
+    elevation: 2
+  },
+  dot: {
+    width: 5,
+    height: 5,
+    borderRadius: 3,
+    marginRight: 6,
+    shadowColor: night.color.text,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.6,
+    shadowRadius: 2
+  },
+  text: {
+    fontSize: 10,
+    fontWeight: "600",
+    letterSpacing: 0.5,
+    textTransform: "uppercase",
+    fontFamily: monoFont,
+    height: 12
+  }
+});