@buoy-gg/zustand 2.1.12 → 2.1.13

package/lib/module/index.js

@@ -1,80 +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' }
- *   )
- * );
- * ```
- */
-
-// =============================================================================
-// 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)
-// =============================================================================
-export { ZustandModal } 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";
-
-// =============================================================================
-// TYPES
-// =============================================================================
-
-// =============================================================================
-// INTERNAL EXPORTS (For @buoy-gg/* packages only - not part of public API)
-// =============================================================================
-/** @internal */
-export { zustandStateStore } from "./zustand/utils/zustandStateStore";
+"use strict";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}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{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,112 +1 @@
-"use strict";
-
-/**
- * ZustandActionButton
- *
- * Generic action button for Zustand DevTools footer.
- * Mirrors ReduxActionButton.tsx
- */
-
-import { TouchableOpacity, Text, View, StyleSheet } from "react-native";
-import { buoyColors } from "@buoy-gg/shared-ui";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const buttonConfigs = {
-  copy: {
-    color: buoyColors.primary,
-    backgroundColor: buoyColors.primary + "15",
-    borderColor: buoyColors.primary + "40",
-    textColor: buoyColors.primary
-  },
-  reset: {
-    color: buoyColors.warning,
-    backgroundColor: buoyColors.warning + "15",
-    borderColor: buoyColors.warning + "40",
-    textColor: buoyColors.warning
-  },
-  clear: {
-    color: buoyColors.error,
-    backgroundColor: buoyColors.error + "15",
-    borderColor: buoyColors.error + "40",
-    textColor: buoyColors.error
-  },
-  jump: {
-    color: buoyColors.warning,
-    backgroundColor: buoyColors.warning + "15",
-    borderColor: buoyColors.warning + "40",
-    textColor: buoyColors.warning
-  }
-};
-export function ZustandActionButton({
-  onPress,
-  text,
-  type,
-  disabled = false
-}) {
-  const config = buttonConfigs[type];
-  return /*#__PURE__*/_jsxs(TouchableOpacity, {
-    disabled: disabled,
-    onPress: onPress,
-    style: [styles.button, {
-      backgroundColor: disabled ? buoyColors.textMuted + "1A" : config.backgroundColor,
-      borderColor: disabled ? buoyColors.textMuted + "33" : config.borderColor,
-      opacity: disabled ? 0.5 : 1
-    }],
-    activeOpacity: 0.7,
-    accessibilityRole: "button",
-    accessibilityLabel: text,
-    accessibilityState: {
-      disabled
-    },
-    children: [/*#__PURE__*/_jsx(View, {
-      style: [styles.dot, {
-        backgroundColor: disabled ? buoyColors.textMuted : config.color
-      }]
-    }), /*#__PURE__*/_jsx(Text, {
-      style: [styles.text, {
-        color: disabled ? buoyColors.textMuted : 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: buoyColors.text,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.6,
-    shadowRadius: 2
-  },
-  text: {
-    fontSize: 10,
-    fontWeight: "600",
-    letterSpacing: 0.5,
-    textTransform: "uppercase",
-    fontFamily: "monospace",
-    height: 12
-  }
-});
+"use strict";import{TouchableOpacity,Text,View,StyleSheet}from"react-native";import{buoyColors}from"@buoy-gg/shared-ui";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const buttonConfigs={copy:{color:buoyColors.primary,backgroundColor:buoyColors.primary+"15",borderColor:buoyColors.primary+"40",textColor:buoyColors.primary},reset:{color:buoyColors.warning,backgroundColor:buoyColors.warning+"15",borderColor:buoyColors.warning+"40",textColor:buoyColors.warning},clear:{color:buoyColors.error,backgroundColor:buoyColors.error+"15",borderColor:buoyColors.error+"40",textColor:buoyColors.error},jump:{color:buoyColors.warning,backgroundColor:buoyColors.warning+"15",borderColor:buoyColors.warning+"40",textColor:buoyColors.warning}};export function ZustandActionButton({onPress:o,text:r,type:t,disabled:e=!1}){const s=buttonConfigs[t];return _jsxs(TouchableOpacity,{disabled:e,onPress:o,style:[styles.button,{backgroundColor:e?buoyColors.textMuted+"1A":s.backgroundColor,borderColor:e?buoyColors.textMuted+"33":s.borderColor,opacity:e?.5:1}],activeOpacity:.7,accessibilityRole:"button",accessibilityLabel:r,accessibilityState:{disabled:e},children:[_jsx(View,{style:[styles.dot,{backgroundColor:e?buoyColors.textMuted:s.color}]}),_jsx(Text,{style:[styles.text,{color:e?buoyColors.textMuted:s.textColor}],children:r})]})}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:buoyColors.text,shadowOffset:{width:0,height:0},shadowOpacity:.6,shadowRadius:2},text:{fontSize:10,fontWeight:"600",letterSpacing:.5,textTransform:"uppercase",fontFamily:"monospace",height:12}});

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

@@ -1,129 +1 @@
-"use strict";
-
-/**
- * ZustandDetailViewToggle
- *
- * Three-card toggle for switching between Change, State, and Diff views.
- * Mirrors ReduxDetailViewToggle.tsx
- */
-
-import React, { memo } from "react";
-import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
-import { macOSColors, FileText, Database, GitBranch } from "@buoy-gg/shared-ui";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const VIEW_CONFIGS = [{
-  key: "change",
-  label: "CHANGE",
-  description: "View change details",
-  icon: FileText,
-  activeColor: macOSColors.semantic.warning
-}, {
-  key: "state",
-  label: "STATE",
-  description: "View current state",
-  icon: Database,
-  activeColor: macOSColors.semantic.info
-}, {
-  key: "diff",
-  label: "DIFF",
-  description: "Compare changes",
-  icon: GitBranch,
-  activeColor: macOSColors.semantic.success
-}];
-export const ZustandDetailViewToggle = /*#__PURE__*/memo(function ZustandDetailViewToggle({
-  activeView,
-  onViewChange,
-  diffDisabled = false
-}) {
-  return /*#__PURE__*/_jsx(View, {
-    style: styles.container,
-    children: VIEW_CONFIGS.map(config => {
-      const isActive = activeView === config.key;
-      const isDisabled = config.key === "diff" && diffDisabled;
-      const IconComponent = config.icon;
-      return /*#__PURE__*/_jsxs(TouchableOpacity, {
-        style: [styles.card, isActive && [styles.cardActive, {
-          borderColor: config.activeColor
-        }], isDisabled && styles.cardDisabled],
-        onPress: () => !isDisabled && onViewChange(config.key),
-        activeOpacity: isDisabled ? 1 : 0.8,
-        disabled: isDisabled,
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: styles.cardContent,
-          children: [/*#__PURE__*/_jsx(IconComponent, {
-            size: 14,
-            color: isActive ? config.activeColor : isDisabled ? macOSColors.text.muted : macOSColors.text.secondary
-          }), /*#__PURE__*/_jsx(Text, {
-            style: [styles.cardLabel, isActive && [styles.cardLabelActive, {
-              color: config.activeColor
-            }], isDisabled && styles.cardLabelDisabled],
-            children: config.label
-          })]
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.cardDescription, isActive && styles.cardDescriptionActive, isDisabled && styles.cardDescriptionDisabled],
-          children: config.description
-        })]
-      }, config.key);
-    })
-  });
-});
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    gap: 8,
-    padding: 14,
-    backgroundColor: macOSColors.background.base
-  },
-  card: {
-    flex: 1,
-    backgroundColor: macOSColors.background.card,
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: macOSColors.border.default,
-    padding: 10,
-    gap: 4
-  },
-  cardActive: {
-    borderWidth: 1.5,
-    backgroundColor: "rgba(0, 184, 230, 0.05)",
-    shadowColor: macOSColors.semantic.info,
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 8,
-    elevation: 3
-  },
-  cardDisabled: {
-    opacity: 0.5
-  },
-  cardContent: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6
-  },
-  cardLabel: {
-    fontSize: 10,
-    fontWeight: "700",
-    letterSpacing: 0.5,
-    color: macOSColors.text.secondary
-  },
-  cardLabelActive: {
-    color: macOSColors.text.primary
-  },
-  cardLabelDisabled: {
-    color: macOSColors.text.muted
-  },
-  cardDescription: {
-    fontSize: 9,
-    color: macOSColors.text.muted,
-    lineHeight: 12
-  },
-  cardDescriptionActive: {
-    color: macOSColors.text.secondary
-  },
-  cardDescriptionDisabled: {
-    color: macOSColors.text.muted
-  }
-});
+"use strict";import React,{memo}from"react";import{View,Text,TouchableOpacity,StyleSheet}from"react-native";import{macOSColors,FileText,Database,GitBranch}from"@buoy-gg/shared-ui";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const VIEW_CONFIGS=[{key:"change",label:"CHANGE",description:"View change details",icon:FileText,activeColor:macOSColors.semantic.warning},{key:"state",label:"STATE",description:"View current state",icon:Database,activeColor:macOSColors.semantic.info},{key:"diff",label:"DIFF",description:"Compare changes",icon:GitBranch,activeColor:macOSColors.semantic.success}];export const ZustandDetailViewToggle=memo(function({activeView:e,onViewChange:o,diffDisabled:t=!1}){return _jsx(View,{style:styles.container,children:VIEW_CONFIGS.map(a=>{const r=e===a.key,c="diff"===a.key&&t,s=a.icon;return _jsxs(TouchableOpacity,{style:[styles.card,r&&[styles.cardActive,{borderColor:a.activeColor}],c&&styles.cardDisabled],onPress:()=>!c&&o(a.key),activeOpacity:c?1:.8,disabled:c,children:[_jsxs(View,{style:styles.cardContent,children:[_jsx(s,{size:14,color:r?a.activeColor:c?macOSColors.text.muted:macOSColors.text.secondary}),_jsx(Text,{style:[styles.cardLabel,r&&[styles.cardLabelActive,{color:a.activeColor}],c&&styles.cardLabelDisabled],children:a.label})]}),_jsx(Text,{style:[styles.cardDescription,r&&styles.cardDescriptionActive,c&&styles.cardDescriptionDisabled],children:a.description})]},a.key)})})});const styles=StyleSheet.create({container:{flexDirection:"row",gap:8,padding:14,backgroundColor:macOSColors.background.base},card:{flex:1,backgroundColor:macOSColors.background.card,borderRadius:12,borderWidth:1,borderColor:macOSColors.border.default,padding:10,gap:4},cardActive:{borderWidth:1.5,backgroundColor:"rgba(0, 184, 230, 0.05)",shadowColor:macOSColors.semantic.info,shadowOffset:{width:0,height:2},shadowOpacity:.1,shadowRadius:8,elevation:3},cardDisabled:{opacity:.5},cardContent:{flexDirection:"row",alignItems:"center",gap:6},cardLabel:{fontSize:10,fontWeight:"700",letterSpacing:.5,color:macOSColors.text.secondary},cardLabelActive:{color:macOSColors.text.primary},cardLabelDisabled:{color:macOSColors.text.muted},cardDescription:{fontSize:9,color:macOSColors.text.muted,lineHeight:12},cardDescriptionActive:{color:macOSColors.text.secondary},cardDescriptionDisabled:{color:macOSColors.text.muted}});