react-native-debug-toolkit 0.2.1 → 0.3.0

package/index.js

@@ -8,6 +8,7 @@ import { initializeDebugToolkit } from './lib'
 import { createNetworkFeature } from './lib/features/NetworkFeature'
 import { createPerformanceFeature } from './lib/features/PerformanceFeature'
 import { createConsoleLogFeature } from './lib/features/ConsoleLogFeature'
+import { createZustandLogFeature, addZustandLog } from './lib/features/ZustandLogFeature'
 
 export {
   DebugToolKit,
@@ -15,6 +16,8 @@ export {
   createNetworkFeature,
   createPerformanceFeature,
   createConsoleLogFeature,
+  createZustandLogFeature,
+  addZustandLog
 }
 
 export default DebugToolKit

package/lib/features/ConsoleLogFeature.js

@@ -1,44 +1,30 @@
-const MAX_LOGS = 100; // Max number of console logs to store
+const MAX_LOGS = 200; // Max number of console logs to store
 const logs = [];
 const originalConsole = {}; // Store original console methods
 
 const _interceptConsole = () => {
   const levels = ['log', 'info', 'warn', 'error'];
   levels.forEach(level => {
-    if (typeof console[level] === 'function') {
-      originalConsole[level] = console[level]; // Store original (still useful for restoration)
+    if (typeof console[level] === 'function') { // Check if it's actually a function
+      originalConsole[level] = console[level]; // Store original
 
       console[level] = (...args) => {
-        // --- Log Recording Logic ---
+        // Call original console method first
+        originalConsole[level].apply(console, args); // Use apply for proper context
+
+        // Add log entry
         if (logs.length >= MAX_LOGS) {
-          logs.shift();
+          logs.shift(); // Remove the oldest log if limit is reached
         }
-        // Optional: Process arguments for safer storage (recommended)
-        const processedArgs = args.map(arg => {
-          if (arg instanceof Error) return `Error: ${arg.message}${arg.stack ? `\n${arg.stack}` : ''}`;
-          if (arg instanceof Promise) return '[Promise]';
-          if (typeof arg === 'function') return '[Function]';
-          if (typeof arg === 'object' && arg !== null) {
-            try { return JSON.stringify(arg); } catch (e) { return '[Object - Cannot Serialize]'; }
-          }
-          return arg;
-        });
+
+        // Store log data
         logs.push({
           timestamp: new Date(),
           level: level,
-          data: processedArgs, // Store processed args
+          data: args, // Store all arguments passed to console[level]
         });
-        // --- End Log Recording Logic ---
-
-        // --- Do NOT call the original console ---
-        // By omitting the following line, the intercepted log message (including
-        // the "Unhandled Promise Rejection" warning) will ONLY be stored
-        // in this feature's 'logs' array and will NOT be passed through
-        // to the standard developer console output (Metro, browser, etc.).
-        //
-        // originalConsole[level]?.apply(console, args);
 
-        // TODO: Notify UI if needed (based on the stored log)
+        // TODO: Notify UI if needed
       };
     }
   });

package/lib/features/NetworkFeature.js

@@ -2,7 +2,7 @@ import React from 'react'
 
 class NetworkFeature {
   static instance = null
-  static MAX_LOGS = 100
+  static MAX_LOGS = 200
 
   constructor() {
     if (NetworkFeature.instance) {

package/lib/features/ZustandLogFeature.js

@@ -0,0 +1,46 @@
+const MAX_LOGS = 200; // Max number of Zustand logs to store
+const logs = [];
+
+// Zustand middleware to capture state changes
+export const addZustandLog = (action, prevState, nextState, actionCompleteTime, storeName) => {
+      // Store log data
+      logs.push({
+        timestamp: new Date(),
+        action: action,
+        prevState: prevState,
+        nextState: nextState,
+        actionCompleteTime: actionCompleteTime,
+        storeName: storeName,
+      });
+
+      // Trim logs if they exceed the maximum limit
+      if (logs.length > MAX_LOGS) {
+        logs.splice(0, logs.length - MAX_LOGS);
+      }
+};
+
+const setup = () => {
+  if (!__DEV__) {
+    return;
+  }
+  // Note: The actual middleware setup happens in the store creation
+  // This function is mainly for compatibility with the feature API
+};
+
+const getData = () => {
+  return logs;
+};
+
+const cleanup = () => {
+  logs.length = 0; // Clear array
+};
+
+export const createZustandLogFeature = () => {
+  return {
+    name: 'zustand',
+    label: 'Zustand Logs',
+    setup: setup,
+    getData: getData,
+    cleanup: cleanup,
+  };
+};

package/lib/index.js

@@ -2,18 +2,20 @@ import DebugToolKit from './DebugToolKit'
 import { createNetworkFeature } from './features/NetworkFeature'
 import { createPerformanceFeature} from './features/PerformanceFeature'
 import { createConsoleLogFeature } from './features/ConsoleLogFeature'
+import { createZustandLogFeature, zustandLogMiddleware } from './features/ZustandLogFeature'
 
 // Registry mapping feature names (strings) to their creator functions
 const featureRegistry = {
   network: createNetworkFeature,
   console: createConsoleLogFeature,
   performance: createPerformanceFeature,
+  zustand: createZustandLogFeature,
   // Add other built-in features here
   // 'storage': createStorageFeature,
 }
 
 // List of default features (can use strings now)
-const defaultFeatures = ['network', 'console']
+const defaultFeatures = ['network', 'console', 'zustand']
 
 /**
  * Initializes and shows the Debug ToolKit panel with specified features.
@@ -73,4 +75,12 @@ export function initializeDebugToolkit(features = defaultFeatures) {
 }
 
 // Export existing stuff and the new initializer
-export { DebugToolKit, createNetworkFeature, createPerformanceFeature, createConsoleLogFeature, featureRegistry };
+export { 
+  DebugToolKit, 
+  createNetworkFeature, 
+  createPerformanceFeature, 
+  createConsoleLogFeature, 
+  createZustandLogFeature,
+  zustandLogMiddleware,  // Export middleware for use in Zustand stores
+  featureRegistry 
+};

package/lib/utils/DebugConst.js

@@ -19,7 +19,7 @@ export const DebugColors = {
 export const getLogLevelColor = (level) => {
     switch (level?.toLowerCase()) {
       case 'log':
-        return '#666';
+        return '#333';
       case 'info':
         return '#0D96F2';
       case 'warn':
@@ -33,3 +33,17 @@ export const getLogLevelColor = (level) => {
 export const DebugImgs = {
     iconLink: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVGhD7ZgxDoMwDEV9/xvQtReoGBASYmFhYmNiYmNhYWJiQQIJqUh8y05wlAYw+T/pD5Dg9xwnhPR6vV6v1+v1er3eGvuOb7yIhxEQvjAC4hRGQJzGCIhLGAFxGSMgbmEExC2MgLiFERC3MALiFkZA3MIIiFsYAXELIyBuYQTELYyAuIURELcwAuIWRkDcwgiIWxgBcQsjIG5hBMQtjIC4hREQtzAC4hZGQNzCCIhbGAFxCyMgbmEExC2MgLiFERC3MALiFkZA3MIIiFsYAXELIyBuYQTELYyAuIURELcwAuIWRkDcwgiIW/+PYBgfhPtL9WBrfKUAAAAASUVORK5CYII='
 };
+
+// Function to get color for Zustand action types
+export const getZustandActionColor = (action) => {
+  if (!action) return '#666666'; // Default gray
+  
+  // You can customize this based on common Zustand action patterns
+  if (action.startsWith('set')) return '#0D96F2'; // Blue for setters
+  if (action.startsWith('update')) return '#4CAF50'; // Green for updates
+  if (action.startsWith('delete') || action.startsWith('remove')) return '#F93E3E'; // Red for deletions
+  if (action.startsWith('toggle')) return '#FCA130'; // Orange for toggles
+  if (action.startsWith('init')) return '#9C27B0'; // Purple for initialization
+  
+  return '#0D96F2'; // Default blue for other actions
+};

package/lib/utils/StorageUtils.js

@@ -0,0 +1,79 @@
+import { MMKV } from 'react-native-mmkv';
+
+// Create MMKV instance for storing debug logs
+const storage = new MMKV({
+  id: 'debug-toolkit-storage',
+  encryptionKey: 'debug-toolkit-encryption-key'
+});
+
+// Storage keys for different features
+const STORAGE_KEYS = {
+  CONSOLE_LOGS: 'console_logs',
+  NETWORK_LOGS: 'network_logs',
+  PERFORMANCE_DATA: 'performance_data',
+  ZUSTAND_LOGS: 'zustand_logs',
+};
+
+/**
+ * Utility class for storing and retrieving logs using MMKV
+ */
+export class StorageUtils {
+  /**
+   * Save data to MMKV storage
+   * @param {string} key - Storage key
+   * @param {any} data - Data to store
+   */
+  static saveData(key, data) {
+    try {
+      const jsonString = JSON.stringify(data);
+      storage.set(key, jsonString);
+    } catch (error) {
+      console.error(`Error saving data for key ${key}:`, error);
+    }
+  }
+
+  /**
+   * Retrieve data from MMKV storage
+   * @param {string} key - Storage key
+   * @param {any} defaultValue - Default value if data doesn't exist
+   * @returns {any} - Retrieved data or default value
+   */
+  static getData(key, defaultValue = null) {
+    try {
+      const jsonString = storage.getString(key);
+      if (!jsonString) return defaultValue;
+      return JSON.parse(jsonString);
+    } catch (error) {
+      console.error(`Error retrieving data for key ${key}:`, error);
+      return defaultValue;
+    }
+  }
+
+  /**
+   * Delete data from MMKV storage
+   * @param {string} key - Storage key
+   */
+  static deleteData(key) {
+    try {
+      storage.delete(key);
+    } catch (error) {
+      console.error(`Error deleting data for key ${key}:`, error);
+    }
+  }
+
+  /**
+   * Clear all debug toolkit data from storage
+   */
+  static clearAllData() {
+    try {
+      Object.values(STORAGE_KEYS).forEach(key => {
+        storage.delete(key);
+      });
+    } catch (error) {
+      console.error('Error clearing all data:', error);
+    }
+  }
+}
+
+// Export storage keys for use in features
+export { STORAGE_KEYS }; 

package/lib/views/FloatPanelView.js

@@ -15,6 +15,7 @@ import SubViewHTTPLogs from './SubViewHTTPLogs'
 import SubViewPerformance from './SubViewPerformance'
 import TabView from './TabView'
 import SubViewConsoleLogs from './SubViewConsoleLogs'
+import SubViewZustandLogs from './SubViewZustandLogs'
 
 const { width: screenWidth, height: screenHeight } = Dimensions.get('window')
 
@@ -281,6 +282,10 @@ export default class FloatPanelView extends Component {
     if (feature.name === 'console') {
       return <SubViewConsoleLogs logs={data} />
     }
+    
+    if (feature.name === 'zustand') {
+      return <SubViewZustandLogs logs={data} />
+    }
 
     // Generic fallback for other feature types
     return (

package/lib/views/SubViewZustandLogs.js

@@ -0,0 +1,279 @@
+import React, { useState, useMemo } from 'react'
+import {
+  View,
+  Text,
+  StyleSheet,
+  FlatList,
+  TouchableOpacity,
+} from 'react-native'
+import ZustandLogDetails from './ZustandLogDetails'
+import { getZustandActionColor } from '../utils/DebugConst'
+
+const SubViewZustandLogs = ({ logs = [] }) => {
+  const [selectedLog, setSelectedLog] = useState(null)
+
+  // Memoize the sorted logs
+  const sortedLogs = useMemo(() => {
+    // Create a stable copy before sorting
+    return [...logs].sort((a, b) => (b.timestamp || 0) - (a.timestamp || 0));
+  }, [logs]);
+
+  // Helper to format preview of state changes
+  const formatActionPreview = (log) => {
+    if (!log) return '';
+    
+    const { action = 'unknown', storeName } = log;
+    return `Action: ${action}${storeName ? ` (${storeName})` : ''}`;
+  };
+
+  // Safely stringify value for display
+  const safeStringify = (value) => {
+    if (value === undefined) return 'undefined';
+    if (value === null) return 'null';
+    
+    const type = typeof value;
+    if (type === 'string') return `"${value.length > 10 ? value.substring(0, 10) + '...' : value}"`;
+    if (type === 'number' || type === 'boolean') return String(value);
+    if (Array.isArray(value)) return '[...]';
+    if (type === 'object') return '{...}';
+    
+    return String(value);
+  };
+
+  // Helper to find key changes between states with more details
+  const findChangedKeys = (prevState, nextState) => {
+    if (!prevState || !nextState) return [];
+    
+    const changes = [];
+    const allKeys = new Set([...Object.keys(prevState), ...Object.keys(nextState)]);
+    
+    allKeys.forEach(key => {
+      const prevValue = prevState[key];
+      const nextValue = nextState[key];
+      
+      // Check if key is added, removed, or value changed
+      if (!(key in prevState)) {
+        changes.push({
+          key,
+          type: 'added',
+          display: `+${key}: ${safeStringify(nextValue)}`
+        });
+      } else if (!(key in nextState)) {
+        changes.push({
+          key,
+          type: 'removed',
+          display: `-${key}: ${safeStringify(prevValue)}`
+        });
+      } else if (JSON.stringify(prevValue) !== JSON.stringify(nextValue)) {
+        // For primitive types, show the before and after values
+        const isPrimitive = 
+          typeof prevValue !== 'object' || 
+          prevValue === null || 
+          typeof nextValue !== 'object' || 
+          nextValue === null;
+          
+        if (isPrimitive) {
+          changes.push({
+            key,
+            type: 'changed',
+            display: `~${key}: ${safeStringify(prevValue)} → ${safeStringify(nextValue)}`
+          });
+        } else {
+          changes.push({
+            key,
+            type: 'changed',
+            display: `~${key}`
+          });
+        }
+      }
+    });
+    
+    return changes;
+  };
+
+  const renderLogItem = ({ item }) => {
+    const actionPreview = formatActionPreview(item);
+    const actionColor = getZustandActionColor(item.action);
+    const timestamp = item.timestamp
+      ? new Date(item.timestamp).toLocaleTimeString([], { 
+          hour: '2-digit', 
+          minute: '2-digit', 
+          second: '2-digit', 
+          hour12: false 
+        })
+      : '';
+    
+    // Get changed keys with details
+    const changes = findChangedKeys(item.prevState, item.nextState);
+    
+    // Create a formatted display of changes
+    const changesText = changes.length 
+      ? changes.map(change => change.display).join(', ') 
+      : 'No changes detected';
+
+    return (
+      <TouchableOpacity
+        style={styles.logItem}
+        onPress={() => setSelectedLog(item)}>
+        <View style={styles.logItemContainer}>
+          <View
+            style={[styles.actionIndicator, { backgroundColor: actionColor }]}
+          />
+
+          <View style={styles.logContent}>
+             <View style={styles.logHeader}>
+                <Text style={[styles.actionText, { color: actionColor }]}>
+                  {actionPreview}
+                </Text>
+                 <Text style={styles.time}>{timestamp}</Text>
+            </View>
+
+            <Text style={styles.statePathsText} numberOfLines={2}>
+              {changesText}
+            </Text>
+          </View>
+        </View>
+      </TouchableOpacity>
+    )
+  }
+
+  // If a log is selected, show the details view
+  if (selectedLog) {
+    const timestamp = selectedLog.timestamp
+       ? new Date(selectedLog.timestamp).toLocaleTimeString([], { 
+           hour: '2-digit', 
+           minute: '2-digit', 
+           second: '2-digit', 
+           hour12: false 
+         })
+       : '';
+    const actionColor = getZustandActionColor(selectedLog.action);
+    const actionDisplay = selectedLog.storeName 
+      ? `${selectedLog.action} (${selectedLog.storeName})` 
+      : selectedLog.action || 'Unknown Action';
+    
+    return (
+      <View style={styles.container}>
+        <View style={styles.detailsHeader}>
+          <TouchableOpacity
+            style={styles.backButton}
+            onPress={() => setSelectedLog(null)}>
+            <Text style={styles.backButtonText}>← Back</Text>
+          </TouchableOpacity>
+           <View style={styles.headerActionTime}>
+              <Text style={[styles.headerAction, { color: actionColor }]}>
+                {actionDisplay}
+              </Text>
+               <Text style={styles.headerTimestamp}>{timestamp}</Text>
+           </View>
+        </View>
+        <ZustandLogDetails log={selectedLog} />
+      </View>
+    )
+  }
+
+  // Otherwise show the list view
+  return (
+    <View style={styles.container}>
+      {sortedLogs.length === 0 ? (
+        <Text style={styles.emptyText}>No Zustand state changes logged yet</Text>
+      ) : (
+        <FlatList
+          data={sortedLogs}
+          renderItem={renderLogItem}
+          keyExtractor={(item, index) => `${item.timestamp}-${index}`}
+          style={styles.list}
+        />
+      )}
+    </View>
+  )
+}
+
+// Adapted styles from SubViewConsoleLogs
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  list: {
+    flex: 1,
+  },
+  emptyText: {
+    textAlign: 'center',
+    color: '#999',
+    marginTop: 20,
+  },
+  logItem: {
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+  },
+  logItemContainer: {
+    flexDirection: 'row',
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+  },
+  actionIndicator: {
+    width: 4,
+    borderRadius: 2,
+    marginRight: 10,
+  },
+  logContent: {
+    flex: 1,
+  },
+  logHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 5,
+  },
+  actionText: {
+    fontSize: 13,
+    fontWeight: 'bold',
+  },
+  time: {
+    fontSize: 12,
+    color: '#888',
+  },
+  statePathsText: {
+    fontSize: 14,
+    color: '#555',
+    fontFamily: 'monospace',
+  },
+  // Details Header Styles
+  detailsHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 10,
+    paddingHorizontal: 15,
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+    backgroundColor: '#f8f9fa',
+  },
+  backButton: {
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 4,
+    backgroundColor: '#eee',
+    marginRight: 15,
+  },
+  backButtonText: {
+    color: '#333',
+    fontWeight: '500',
+    fontSize: 14,
+  },
+  headerActionTime: {
+    flexDirection: 'row',
+    alignItems: 'baseline',
+  },
+  headerAction: {
+    fontSize: 15,
+    fontWeight: 'bold',
+    marginRight: 8,
+  },
+  headerTimestamp: {
+    fontSize: 13,
+    color: '#666',
+  },
+})
+
+export default SubViewZustandLogs 

package/lib/views/ZustandLogDetails.js

@@ -0,0 +1,355 @@
+import React from 'react'
+import { View, Text, StyleSheet, Clipboard } from 'react-native'
+import { ScrollView, Pressable } from 'react-native'
+import JSONTree from 'react-native-json-tree'
+import { getZustandActionColor } from '../utils/DebugConst'
+
+// Re-using the theme from ConsoleLogDetails for consistency
+const theme = {
+  scheme: 'monokai',
+  author: 'wimer hazenberg (http://www.monokai.nl)',
+  base00: '#272822',
+  base01: '#383830',
+  base02: '#49483e',
+  base03: '#75715e',
+  base04: '#a59f85',
+  base05: '#f8f8f2',
+  base06: '#f5f4f1',
+  base07: '#f9f8f5',
+  base08: '#f92672',
+  base09: '#fd971f',
+  base0A: '#f4bf75',
+  base0B: '#a6e22e',
+  base0C: '#a1efe4',
+  base0D: '#66d9ef',
+  base0E: '#ae81ff',
+  base0F: '#cc6633'
+};
+
+const CopyButton = ({ text, style }) => {
+  const [copied, setCopied] = React.useState(false)
+
+  const handleCopy = async () => {
+    await Clipboard.setString(text)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <Pressable style={[styles.copyButton, style]} onPress={handleCopy}>
+      <Text style={styles.copyButtonText}>{copied ? 'Copied!' : 'Copy'}</Text>
+    </Pressable>
+  )
+}
+
+const CollapsibleSection = ({ title, children, initiallyExpanded = false }) => {
+  const [expanded, setExpanded] = React.useState(initiallyExpanded)
+
+  return (
+    <View style={styles.collapsibleSection}>
+      <Pressable
+        style={styles.sectionHeader}
+        onPress={() => setExpanded(!expanded)}>
+        <Text style={styles.sectionTitle}>{title}</Text>
+        <Text style={styles.expandIcon}>{expanded ? '▼' : '▶'}</Text>
+      </Pressable>
+      {expanded && children}
+    </View>
+  )
+}
+
+const ZustandLogDetails = ({ log }) => {
+  if (!log) {
+    return (
+      <View style={styles.errorContainer}>
+        <Text style={styles.errorText}>Log data is missing</Text>
+      </View>
+    )
+  }
+
+  const { timestamp, action, prevState, nextState, actionCompleteTime, storeName } = log
+  const actionColor = getZustandActionColor(action);
+  
+  // Format data for display and copying
+  const formatStateToString = (state) => {
+    try {
+      return JSON.stringify(state, null, 2);
+    } catch (e) {
+      return '[unserializable state]';
+    }
+  }
+  
+  const formattedPrevState = formatStateToString(prevState);
+  const formattedNextState = formatStateToString(nextState);
+  
+  // Format for the full log copy
+  const formattedLog = `Action: ${action}${storeName ? ` (${storeName})` : ''}
+Previous State: ${formattedPrevState}
+Next State: ${formattedNextState}${actionCompleteTime ? `\nAction Complete Time: ${actionCompleteTime}ms` : ''}`;
+
+  // Function to find differences between states
+  const findDifferences = () => {
+    const changes = [];
+    
+    if (!prevState || !nextState) return changes;
+    
+    // Helper to find differences in objects recursively
+    const findChangesRecursive = (prev, next, path = '') => {
+      if (prev === next) return;
+      
+      if (typeof prev !== 'object' || typeof next !== 'object' || 
+          prev === null || next === null) {
+        changes.push({
+          path: path || 'root',
+          prevValue: prev,
+          nextValue: next
+        });
+        return;
+      }
+      
+      // Check for object keys
+      const allKeys = [...new Set([...Object.keys(prev || {}), ...Object.keys(next || {})])];
+      
+      for (const key of allKeys) {
+        const newPath = path ? `${path}.${key}` : key;
+        if (!(key in prev)) {
+          changes.push({
+            path: newPath,
+            prevValue: undefined,
+            nextValue: next[key]
+          });
+        } else if (!(key in next)) {
+          changes.push({
+            path: newPath,
+            prevValue: prev[key],
+            nextValue: undefined
+          });
+        } else {
+          findChangesRecursive(prev[key], next[key], newPath);
+        }
+      }
+    };
+    
+    findChangesRecursive(prevState, nextState);
+    return changes;
+  };
+  
+  const stateChanges = findDifferences();
+  const hasChanges = stateChanges.length > 0;
+
+  const actionDisplay = storeName ? `${action} (${storeName})` : action;
+
+  return (
+    <ScrollView
+      style={styles.container}
+      contentContainerStyle={styles.contentContainer}
+      showsVerticalScrollIndicator={true}
+      scrollEventThrottle={16}
+      keyboardShouldPersistTaps='handled'>
+
+      <View style={styles.header}>
+        <View style={styles.headerInfo}>
+          <Text style={styles.actionIndicator}>
+            Action: <Text style={[styles.actionName, { color: actionColor }]}>{actionDisplay}</Text>
+          </Text>
+          <Text style={styles.timestamp}>
+            {timestamp
+              ? new Date(timestamp).toLocaleString()
+              : 'Unknown time'}
+          </Text>
+          {actionCompleteTime && (
+            <Text style={styles.actionTime}>
+              Completed in: {actionCompleteTime}ms
+            </Text>
+          )}
+        </View>
+        <CopyButton text={formattedLog} />
+      </View>
+
+      {hasChanges && (
+        <CollapsibleSection title='State Changes' initiallyExpanded={true}>
+          <View style={styles.dataContentWrapper}>
+            <View style={styles.dataContent}>
+              {stateChanges.map((change, index) => (
+                <View key={index} style={[styles.changeItem, index === stateChanges.length - 1 && styles.changeItemLast]}>
+                  <Text style={styles.changePath}>{change.path}</Text>
+                  <View style={styles.changeValues}>
+                    <View style={styles.changeValue}>
+                      <Text style={styles.changeLabel}>From:</Text>
+                      <JSONTree
+                        data={change.prevValue}
+                        theme={theme}
+                        invertTheme={true}
+                        hideRoot={true}
+                        shouldExpandNode={() => true}
+                      />
+                    </View>
+                    <View style={styles.changeValue}>
+                      <Text style={styles.changeLabel}>To:</Text>
+                      <JSONTree
+                        data={change.nextValue}
+                        theme={theme}
+                        invertTheme={true}
+                        hideRoot={true}
+                        shouldExpandNode={() => true}
+                      />
+                    </View>
+                  </View>
+                </View>
+              ))}
+            </View>
+          </View>
+        </CollapsibleSection>
+      )}
+
+      <CollapsibleSection title='Previous State' initiallyExpanded={false}>
+        <View style={styles.dataContentWrapper}>
+          <View style={styles.dataContent}>
+            <JSONTree
+              data={prevState || {}}
+              theme={theme}
+              invertTheme={true}
+              hideRoot={true}
+              shouldExpandNode={(keyPath, data, level) => level < 1}
+            />
+          </View>
+        </View>
+      </CollapsibleSection>
+
+      <CollapsibleSection title='Next State' initiallyExpanded={true}>
+        <View style={styles.dataContentWrapper}>
+          <View style={styles.dataContent}>
+            <JSONTree
+              data={nextState || {}}
+              theme={theme}
+              invertTheme={true}
+              hideRoot={true}
+              shouldExpandNode={(keyPath, data, level) => level < 1}
+            />
+          </View>
+        </View>
+      </CollapsibleSection>
+
+    </ScrollView>
+  )
+}
+
+// Re-using and adapting styles from ConsoleLogDetails
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  contentContainer: {
+    paddingBottom: 20,
+  },
+  header: {
+    flexDirection: 'row',
+    padding: 15,
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  headerInfo: {
+    flexShrink: 1,
+    marginRight: 10,
+  },
+  actionIndicator: {
+    fontSize: 14,
+    marginBottom: 5,
+  },
+  actionName: {
+    fontWeight: 'bold',
+  },
+  timestamp: {
+    fontSize: 13,
+    color: '#666',
+  },
+  actionTime: {
+    fontSize: 13,
+    color: '#666',
+    marginTop: 2,
+  },
+  collapsibleSection: {
+    marginBottom: 1,
+    backgroundColor: '#fff',
+  },
+  sectionHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: 15,
+    backgroundColor: '#f5f5f5',
+  },
+  sectionTitle: {
+    fontSize: 15,
+    fontWeight: 'bold',
+    color: '#333',
+  },
+  expandIcon: {
+    fontSize: 14,
+    color: '#666',
+  },
+  dataContentWrapper: {
+    flex: 1,
+    padding: 10,
+  },
+  dataContent: {
+    backgroundColor: '#f8f9fa',
+    padding: 10,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: '#e9ecef',
+  },
+  errorContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  errorText: {
+    color: '#ff4444',
+    fontSize: 16,
+  },
+  copyButton: {
+    backgroundColor: '#e9ecef',
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 4,
+    flexShrink: 0,
+  },
+  copyButtonText: {
+    fontSize: 12,
+    color: '#666',
+  },
+  changeItem: {
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+    paddingVertical: 8,
+  },
+  changeItemLast: {
+    borderBottomWidth: 0,
+  },
+  changePath: {
+    fontWeight: 'bold',
+    color: '#333',
+    marginBottom: 5,
+    fontFamily: 'monospace',
+  },
+  changeValues: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  changeValue: {
+    flex: 1,
+    padding: 5,
+  },
+  changeLabel: {
+    color: '#666',
+    fontSize: 12,
+    marginBottom: 3,
+  },
+});
+
+export default ZustandLogDetails 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-debug-toolkit",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "A simple yet powerful debugging toolkit for React Native with a convenient floating UI for development",
   "main": "index.js",
   "types": "index.d.ts",
@@ -23,7 +23,7 @@
   "author": "zcj",
   "license": "MIT",
   "dependencies": {
-    "@react-native-async-storage/async-storage": "^2.1.2",
+    "react-native-mmkv": "2.12.2",
     "react-native-json-tree": "^1.5.0",
     "react-native-performance": "5.1.2",
     "react-native-root-siblings": "^4.0.0"