@buoy-gg/zustand 7.0.35 → 7.0.38

package/lib/module/index.js

@@ -1,90 +1 @@
-"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";
+"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";

package/lib/module/preset.js

@@ -1,98 +1 @@
-"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
-    }
-  };
-}
+"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}}}

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

@@ -1,114 +1 @@
-"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
-  }
-});
+"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}});

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

@@ -1,43 +1 @@
-"use strict";
-
-/**
- * ZustandDetailViewToggle
- *
- * Three-card toggle for switching between Change, State, and Diff views.
- * The cards themselves are the shared `DetailViewToggle`; this file owns
- * the zustand view list and testID prefix.
- */
-
-import React, { memo } from "react";
-import { DetailViewToggle, FileText, Database, GitBranch } from "@buoy-gg/shared-ui";
-import { jsx as _jsx } from "react/jsx-runtime";
-const VIEWS = [{
-  key: "change",
-  label: "CHANGE",
-  description: "View change details",
-  icon: FileText
-}, {
-  key: "state",
-  label: "STATE",
-  description: "View current state",
-  icon: Database
-}, {
-  key: "diff",
-  label: "DIFF",
-  description: "Compare changes",
-  icon: GitBranch
-}];
-const DIFF_DISABLED = ["diff"];
-export const ZustandDetailViewToggle = /*#__PURE__*/memo(function ZustandDetailViewToggle({
-  activeView,
-  onViewChange,
-  diffDisabled = false
-}) {
-  return /*#__PURE__*/_jsx(DetailViewToggle, {
-    views: VIEWS,
-    activeView: activeView,
-    onViewChange: onViewChange,
-    disabledKeys: diffDisabled ? DIFF_DISABLED : undefined,
-    testIDPrefix: "buoy-zustand"
-  });
-});
+"use strict";import React,{memo}from"react";import{DetailViewToggle,FileText,Database,GitBranch}from"@buoy-gg/shared-ui";import{jsx as _jsx}from"react/jsx-runtime";const VIEWS=[{key:"change",label:"CHANGE",description:"View change details",icon:FileText},{key:"state",label:"STATE",description:"View current state",icon:Database},{key:"diff",label:"DIFF",description:"Compare changes",icon:GitBranch}],DIFF_DISABLED=["diff"];export const ZustandDetailViewToggle=memo(function({activeView:e,onViewChange:i,diffDisabled:t=!1}){return _jsx(DetailViewToggle,{views:VIEWS,activeView:e,onViewChange:i,disabledKeys:t?DIFF_DISABLED:void 0,testIDPrefix:"buoy-zustand"})});

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

@@ -1,39 +1 @@
-"use strict";
-
-/**
- * ZustandEventFilterView
- *
- * The shared `EntityFilterView` with zustand's nouns: registered stores you
- * can tap to hide, active store-name patterns, and how it works.
- */
-
-import { useMemo } from "react";
-import { EntityFilterView } from "@buoy-gg/shared-ui";
-import { zustandStateStore } from "../utils/zustandStateStore";
-import { ZUSTAND_TEST_ID, slugForTestID } from "../utils/testIDs";
-import { jsx as _jsx } from "react/jsx-runtime";
-const EXAMPLES = ["• auth → hides authStore from stores & events", "• temp → hides tempStore, tempUserStore", "• cart → hides cartStore from both tabs"];
-export function ZustandEventFilterView({
-  ignoredPatterns,
-  onTogglePattern,
-  onAddPattern,
-  stores
-}) {
-  const entities = useMemo(() => stores.map(store => ({
-    name: store.name,
-    color: zustandStateStore.getStoreColor(store.name)
-  })), [stores]);
-  return /*#__PURE__*/_jsx(EntityFilterView, {
-    entities: entities,
-    ignoredPatterns: ignoredPatterns,
-    onTogglePattern: onTogglePattern,
-    onAddPattern: onAddPattern,
-    entityNoun: "STORES",
-    entitySingular: "store",
-    entityKey: "store",
-    testIDPrefix: ZUSTAND_TEST_ID,
-    slug: slugForTestID,
-    howItWorks: "Patterns hide matching stores from both the Stores tab and the Events tab. Tap a store above to quickly add it as a filter.",
-    examples: EXAMPLES
-  });
-}
+"use strict";import{useMemo}from"react";import{EntityFilterView}from"@buoy-gg/shared-ui";import{zustandStateStore}from"../utils/zustandStateStore";import{ZUSTAND_TEST_ID,slugForTestID}from"../utils/testIDs";import{jsx as _jsx}from"react/jsx-runtime";const EXAMPLES=["• auth → hides authStore from stores & events","• temp → hides tempStore, tempUserStore","• cart → hides cartStore from both tabs"];export function ZustandEventFilterView({ignoredPatterns:t,onTogglePattern:e,onAddPattern:r,stores:o}){const s=useMemo(()=>o.map(t=>({name:t.name,color:zustandStateStore.getStoreColor(t.name)})),[o]);return _jsx(EntityFilterView,{entities:s,ignoredPatterns:t,onTogglePattern:e,onAddPattern:r,entityNoun:"STORES",entitySingular:"store",entityKey:"store",testIDPrefix:ZUSTAND_TEST_ID,slug:slugForTestID,howItWorks:"Patterns hide matching stores from both the Stores tab and the Events tab. Tap a store above to quickly add it as a filter.",examples:EXAMPLES})}

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

@@ -1,11 +1 @@
-"use strict";
-
-/**
- * ZustandIcon — re-exported from the Buoy Icon Format.
- *
- * The artwork lives in shared/icons/zustand.json and is generated into
- * @buoy-gg/floating-tools-core, so React Native, the desktop dashboard and
- * Flutter all render the same drawing. Edit the JSON, then `pnpm icons`.
- */
-
-export { ZustandIcon, ZUSTAND_ICON_COLOR } from "@buoy-gg/shared-ui";
+"use strict";export{ZustandIcon,ZUSTAND_ICON_COLOR}from"@buoy-gg/shared-ui";