react-native-debug-toolkit 2.1.0 → 2.3.0

package/src/types/index.ts

@@ -1,127 +1,29 @@
-import type { ComponentType } from 'react';
-
-export type DebugFeatureListener = () => void;
-
-export type BuiltInFeatureName =
-  | 'network'
-  | 'console'
-  | 'zustand'
-  | 'navigation'
-  | 'track'
-  | 'environment'
-  | 'clipboard';
-
-/** Props passed to a feature's renderContent component */
-export interface DebugFeatureRenderProps<TData = unknown> {
-  data: TData[];
-  feature: DebugFeature<TData>;
-}
-
-/**
- * Type-erased feature for heterogeneous collections.
- * Individual features should use `DebugFeature<TData>` with their specific data type.
- * This alias is only for places that hold features of multiple types.
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type AnyDebugFeature = DebugFeature<any>;
-
-
-/** Base interface all debug features must implement */
-export interface DebugFeature<TData = unknown> {
-  name: string;
-  label: string;
-  setup: () => void;
-  getData: () => TData[];
-  clear?: () => void;
-  cleanup: () => void;
-  subscribe?: (listener: DebugFeatureListener) => () => void;
-  renderContent?: ComponentType<DebugFeatureRenderProps<TData>>;
-  badge?: () => { label: string; color: string } | null;
-}
-
-export interface NetworkLogEntry {
-  id: string;
-  timestamp: number;
-  duration?: number;
-  request: {
-    url: string;
-    method: string;
-    headers?: Record<string, string>;
-    body?: unknown;
-  };
-  response?: {
-    status: number;
-    statusText?: string;
-    headers?: Record<string, string>;
-    data?: unknown;
-    success?: boolean;
-  };
-  error?: string;
-}
-
-export interface ConsoleLogEntry {
-  id: string;
-  timestamp: number;
-  level: 'log' | 'info' | 'warn' | 'error';
-  data: unknown[];
-}
-
-export interface ZustandLogEntry {
-  id: string;
-  timestamp: number;
-  action: string;
-  prevState: unknown;
-  nextState: unknown;
-  actionCompleteTime?: number;
-  storeName?: string;
-}
-
-export interface NavigationLogEntry {
-  id: string;
-  timestamp: number;
-  action: string;
-  from: string;
-  to: string;
-  startTime?: number;
-  duration?: number;
-  debugLog?: string;
-}
-
-export interface TrackLogEntry {
-  id: string;
-  timestamp: number;
-  eventName: string;
-  [key: string]: unknown;
-}
-
-export interface EnvironmentConfig {
-  id: string;
-  label: string;
-  host: string;
-  color?: string;
-}
-
-export interface EnvironmentState {
-  environments: EnvironmentConfig[];
-  currentEnvironmentId: string | null;
-}
-
-export interface NavigationContainerRef {
-  getCurrentRoute?: () => { name?: string } | undefined;
-  getRootState?: () => unknown;
-  addListener: (event: string, callback: () => void) => () => void;
-}
-
-export interface ThirdPartyLibAction {
-  id: string;
-  label: string;
-  onPress: () => void;
-}
-
-export interface ThirdPartyLib {
-  id: string;
-  name: string;
-  description: string;
-  platform: 'ios' | 'android' | 'both';
-  actions: ThirdPartyLibAction[];
-}
+export type {
+  AnyDebugFeature,
+  BuiltInFeatureName,
+  DebugFeature,
+  DebugFeatureListener,
+  DebugFeatureRenderProps,
+} from './feature';
+
+export type {
+  ConsoleLogEntry,
+  NavigationLogEntry,
+  NetworkLogEntry,
+  TrackLogEntry,
+  ZustandLogEntry,
+} from './logs';
+
+export type {
+  EnvironmentConfig,
+  EnvironmentState,
+} from './environment';
+
+export type {
+  NavigationContainerRef,
+} from './navigation';
+
+export type {
+  ThirdPartyLib,
+  ThirdPartyLibAction,
+} from './thirdPartyLibs';

package/src/types/logs.ts

@@ -0,0 +1,54 @@
+export interface NetworkLogEntry {
+  id: string;
+  timestamp: number;
+  duration?: number;
+  request: {
+    url: string;
+    method: string;
+    headers?: Record<string, string>;
+    body?: unknown;
+  };
+  response?: {
+    status: number;
+    statusText?: string;
+    headers?: Record<string, string>;
+    data?: unknown;
+    success?: boolean;
+  };
+  error?: string;
+}
+
+export interface ConsoleLogEntry {
+  id: string;
+  timestamp: number;
+  level: 'log' | 'info' | 'warn' | 'error';
+  data: unknown[];
+}
+
+export interface ZustandLogEntry {
+  id: string;
+  timestamp: number;
+  action: string;
+  prevState: unknown;
+  nextState: unknown;
+  actionCompleteTime?: number;
+  storeName?: string;
+}
+
+export interface NavigationLogEntry {
+  id: string;
+  timestamp: number;
+  action: string;
+  from: string;
+  to: string;
+  startTime?: number;
+  duration?: number;
+  debugLog?: string;
+}
+
+export interface TrackLogEntry {
+  id: string;
+  timestamp: number;
+  eventName: string;
+  [key: string]: unknown;
+}

package/src/types/navigation.ts

@@ -0,0 +1,5 @@
+export interface NavigationContainerRef {
+  getCurrentRoute?: () => { name?: string } | undefined;
+  getRootState?: () => unknown;
+  addListener: (event: string, callback: () => void) => () => void;
+}

package/src/types/thirdPartyLibs.ts

@@ -0,0 +1,13 @@
+export interface ThirdPartyLibAction {
+  id: string;
+  label: string;
+  onPress: () => void;
+}
+
+export interface ThirdPartyLib {
+  id: string;
+  name: string;
+  description: string;
+  platform: 'ios' | 'android' | 'both';
+  actions: ThirdPartyLibAction[];
+}

package/src/{components → ui}/DebugView.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react';
 import { DebugToolkitProvider } from '../core/DebugToolkitProvider';
-import { initializeDebugToolkit } from '../initialize';
-import type { FeatureConfigs } from '../initialize';
-import { useNavigationLogger } from '../hooks/useNavigationLogger';
+import { initializeDebugToolkit } from '../core/initialize';
+import type { FeatureConfigs } from '../core/initialize';
+import { useNavigationLogger } from '../features/navigation/useNavigationLogger';
 import type { EnvironmentConfig, NavigationContainerRef } from '../types';
 
 // --- Types ---

package/src/{components → ui/floating}/FloatIcon.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import {
   View,
   Text,
@@ -8,8 +8,11 @@ import {
   Pressable,
   useWindowDimensions,
 } from 'react-native';
-import { Colors } from '../utils/colors';
-import { ICON_SIZE } from '../utils/layout';
+import { Colors } from '../theme/colors';
+import { ICON_SIZE } from '../theme/layout';
+import { getPreference, setPreference, KEYS } from '../../utils/debugPreferences';
+
+const EDGE_MARGIN = 16;
 
 interface FloatIconProps {
   visible: boolean;
@@ -19,14 +22,32 @@ interface FloatIconProps {
 
 export function FloatIcon({ visible, onPress, badge }: FloatIconProps) {
   const { width: screenWidth, height: screenHeight } = useWindowDimensions();
-  const initialX = screenWidth - ICON_SIZE - 16;
-  const initialY = screenHeight / 2 - ICON_SIZE / 2;
+  const defaultX = screenWidth - ICON_SIZE - EDGE_MARGIN;
+  const defaultY = screenHeight / 2 - ICON_SIZE / 2;
 
-  const pan = useRef(
-    new Animated.ValueXY({ x: initialX, y: initialY }),
-  ).current;
+  const pan = useRef(new Animated.ValueXY({ x: defaultX, y: defaultY })).current;
   const scale = useRef(new Animated.Value(1)).current;
-  const lastPosition = useRef({ x: initialX, y: initialY });
+  const lastPosition = useRef({ x: defaultX, y: defaultY });
+  const positionLoaded = useRef(false);
+
+  // Restore saved position
+  useEffect(() => {
+    let mounted = true;
+    getPreference(KEYS.fabPosition).then((saved) => {
+      if (!mounted || !saved) return;
+      try {
+        const pos = JSON.parse(saved) as { x: number; y: number };
+        const x = Math.max(0, Math.min(pos.x, screenWidth - ICON_SIZE));
+        const y = Math.max(0, Math.min(pos.y, screenHeight - ICON_SIZE));
+        lastPosition.current = { x, y };
+        pan.setValue({ x, y });
+        positionLoaded.current = true;
+      } catch {
+        // ignore bad data
+      }
+    });
+    return () => { mounted = false; };
+  }, [screenWidth, screenHeight, pan]);
 
   const panResponder = useRef(
     PanResponder.create({
@@ -57,28 +78,38 @@ export function FloatIcon({ visible, onPress, badge }: FloatIconProps) {
           return;
         }
         Animated.spring(scale, { toValue: 1, friction: 5, useNativeDriver: true }).start();
-        lastPosition.current = {
-          x: Math.max(
-            0,
-            Math.min(lastPosition.current.x + gs.dx, screenWidth - ICON_SIZE),
-          ),
-          y: Math.max(
-            0,
-            Math.min(lastPosition.current.y + gs.dy, screenHeight - ICON_SIZE),
-          ),
-        };
+
+        // Snap to nearest edge
+        const rawX = lastPosition.current.x + gs.dx;
+        const midX = screenWidth / 2 - ICON_SIZE / 2;
+        const snappedX = rawX < midX ? EDGE_MARGIN : screenWidth - ICON_SIZE - EDGE_MARGIN;
+
+        const finalY = Math.max(
+          0,
+          Math.min(lastPosition.current.y + gs.dy, screenHeight - ICON_SIZE),
+        );
+
+        lastPosition.current = { x: snappedX, y: finalY };
+        Animated.spring(pan, {
+          toValue: { x: snappedX, y: finalY },
+          friction: 7,
+          tension: 40,
+          useNativeDriver: true,
+        }).start();
+
+        // Persist
+        setPreference(KEYS.fabPosition, JSON.stringify({ x: snappedX, y: finalY }));
       },
       onPanResponderTerminate: (_: unknown, gs: { dx: number; dy: number }) => {
-        lastPosition.current = {
-          x: Math.max(
-            0,
-            Math.min(lastPosition.current.x + gs.dx, screenWidth - ICON_SIZE),
-          ),
-          y: Math.max(
-            0,
-            Math.min(lastPosition.current.y + gs.dy, screenHeight - ICON_SIZE),
-          ),
-        };
+        const snappedX =
+          lastPosition.current.x + gs.dx < screenWidth / 2 - ICON_SIZE / 2
+            ? EDGE_MARGIN
+            : screenWidth - ICON_SIZE - EDGE_MARGIN;
+        const finalY = Math.max(
+          0,
+          Math.min(lastPosition.current.y + gs.dy, screenHeight - ICON_SIZE),
+        );
+        lastPosition.current = { x: snappedX, y: finalY };
       },
     }),
   ).current;

package/src/{components → ui/panel}/DebugPanel.tsx

@@ -9,7 +9,7 @@ import {
   TouchableOpacity,
   useWindowDimensions,
 } from 'react-native';
-import { Colors } from '../utils/colors';
+import { Colors } from '../theme/colors';
 
 interface DebugPanelProps {
   onClose: () => void;
@@ -156,7 +156,7 @@ const styles = StyleSheet.create({
   },
   dragHandle: {
     width: '100%',
-    height: 20,
+    height: 28,
     alignItems: 'center',
     justifyContent: 'center',
     backgroundColor: Colors.surface,
@@ -165,7 +165,7 @@ const styles = StyleSheet.create({
     width: 40,
     height: 4,
     borderRadius: 2,
-    backgroundColor: '#D1D1D6',
+    backgroundColor: Colors.textLight,
   },
   panelContent: { flex: 1 },
   header: {
@@ -191,7 +191,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 12,
     paddingVertical: 6,
     borderRadius: 8,
-    backgroundColor: 'rgba(255,59,48,0.06)',
+    backgroundColor: `${Colors.error}0F`,
   },
   clearButtonText: {
     color: Colors.error,

package/src/{components → ui/panel}/FeatureTabBar.tsx

@@ -7,7 +7,7 @@ import {
   ScrollView,
   TouchableOpacity,
 } from 'react-native';
-import { Colors } from '../utils/colors';
+import { Colors } from '../theme/colors';
 
 export interface TabItem {
   id: string;

package/src/{components → ui/panel}/FloatPanelView.tsx

@@ -7,8 +7,9 @@ import {
   PanResponder,
   Easing,
 } from 'react-native';
-import type { AnyDebugFeature } from '../types';
-import { FloatIcon } from './FloatIcon';
+import type { AnyDebugFeature } from '../../types';
+import { getPreference, setPreference, KEYS } from '../../utils/debugPreferences';
+import { FloatIcon } from '../floating/FloatIcon';
 import { DebugPanel } from './DebugPanel';
 import { FeatureTabBar } from './FeatureTabBar';
 import type { TabItem } from './FeatureTabBar';
@@ -41,12 +42,29 @@ class DebugErrorBoundary extends Component<
 
 interface FloatPanelViewProps {
   features: AnyDebugFeature[];
+  panelOpen: boolean;
+  onOpenPanel: () => void;
+  onClosePanel: () => void;
   onClearAll: () => void;
 }
 
-export function FloatPanelView({ features, onClearAll }: FloatPanelViewProps) {
-  const [isOpen, setIsOpen] = useState(false);
+export function FloatPanelView({ features, panelOpen, onOpenPanel, onClosePanel, onClearAll }: FloatPanelViewProps) {
   const [activeTab, setActiveTab] = useState(0);
+  const tabLoaded = useRef(false);
+
+  // Restore last tab on mount
+  useEffect(() => {
+    let mounted = true;
+    getPreference(KEYS.lastTab).then((val) => {
+      if (!mounted || !val) return;
+      const idx = parseInt(val, 10);
+      if (!isNaN(idx) && idx >= 0) {
+        setActiveTab(idx);
+        tabLoaded.current = true;
+      }
+    });
+    return () => { mounted = false; };
+  }, []);
 
   // Content slide animation
   const contentOpacity = useRef(new Animated.Value(1)).current;
@@ -96,9 +114,12 @@ export function FloatPanelView({ features, onClearAll }: FloatPanelViewProps) {
     return () => unsubs.forEach((u) => u());
   }, [features, scheduleRefresh]);
 
-  // Reset activeTab if features shrink
+  // Clamp activeTab if features shrink
   useEffect(() => {
-    if (activeTab >= features.length) setActiveTab(0);
+    if (features.length > 0 && activeTab >= features.length) {
+      setActiveTab(0);
+      setPreference(KEYS.lastTab, '0');
+    }
   }, [features.length, activeTab]);
 
   // Tab switching with content animation
@@ -117,6 +138,7 @@ export function FloatPanelView({ features, onClearAll }: FloatPanelViewProps) {
         }),
       ]).start(() => {
         setActiveTab(index);
+        setPreference(KEYS.lastTab, String(index));
         contentTranslateX.setValue(direction * 40);
         Animated.parallel([
           Animated.timing(contentOpacity, { toValue: 1, duration: 150, useNativeDriver: true }),
@@ -148,22 +170,25 @@ export function FloatPanelView({ features, onClearAll }: FloatPanelViewProps) {
     }
     const feature = features[activeTab];
     if (!feature) return <Text style={styles.emptyText}>Feature not found</Text>;
-    const data = feature.getData();
+    const snapshot = feature.getSnapshot();
     const TabComponent = feature.renderContent;
-    if (TabComponent) return <TabComponent data={data} feature={feature} />;
+    if (TabComponent) return <TabComponent snapshot={snapshot} feature={feature} />;
     return (
       <View style={styles.genericContent}>
-        <Text style={styles.jsonContent}>{JSON.stringify(data, null, 2)}</Text>
+        <Text style={styles.jsonContent}>{JSON.stringify(snapshot, null, 2)}</Text>
       </View>
     );
   };
 
   return (
-    <DebugErrorBoundary onError={() => setIsOpen(false)}>
+    <DebugErrorBoundary onError={onClosePanel}>
       <View style={styles.container} pointerEvents="box-none">
-        <FloatIcon visible={!isOpen} onPress={() => setIsOpen(true)} badge={envBadge} />
-        {isOpen && (
-          <DebugPanel onClose={() => setIsOpen(false)} onClearAll={onClearAll}>
+        <FloatIcon visible={!panelOpen} onPress={onOpenPanel} badge={envBadge} />
+        {panelOpen && (
+          <DebugPanel
+            onClose={onClosePanel}
+            onClearAll={onClearAll}
+          >
             <FeatureTabBar tabs={tabs} activeIndex={activeTab} onSelectTab={switchTab} />
             <Animated.View
               style={[

package/src/{components → ui}/shared/CollapsibleSection.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { View, Text, Pressable, StyleSheet, Animated } from 'react-native';
-import { Colors } from '../../utils/colors';
+import { Colors } from '../theme/colors';
 
 interface Props {
   title: string;

package/src/{components → ui}/shared/CopyButton.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import { TouchableOpacity, Text, StyleSheet } from 'react-native';
-import { Colors } from '../../utils/colors';
+import { Colors } from '../theme/colors';
 import { copyToComputer } from '../../utils/copyToComputer';
 
 interface CopyButtonProps {

package/src/{components → ui}/shared/LogListScreen.tsx

@@ -7,8 +7,8 @@ import {
   StyleSheet,
   Animated,
 } from 'react-native';
-import { Colors } from '../../utils/colors';
-import { useSlideDetailAnimation } from '../../hooks/useSlideDetailAnimation';
+import { Colors } from '../theme/colors';
+import { useSlideDetailAnimation } from './useSlideDetailAnimation';
 
 interface LogListItem {
   id: string;

package/src/{utils → ui/theme}/colors.ts

@@ -1,6 +1,4 @@
-// Apple iOS System Color Palette
 export const Colors = {
-  // System
   primary: '#007AFF',
   text: '#1C1C1E',
   textSecondary: '#8E8E93',
@@ -9,16 +7,13 @@ export const Colors = {
   background: '#F2F2F7',
   surface: '#FFFFFF',
 
-  // Semantic
   success: '#34C759',
   error: '#FF3B30',
   warning: '#FF9500',
   info: '#5AC8FA',
 
-  // Accent
   purple: '#AF52DE',
 
-  // HTTP Method Colors
   get: '#007AFF',
   post: '#34C759',
   put: '#FF9500',

package/src/utils/createChannelFeature.ts

@@ -1,10 +1,18 @@
 import type { ComponentType } from 'react';
 import type { DebugFeature, DebugFeatureListener, DebugFeatureRenderProps } from '../types';
 import type { EventChannel } from './createEventChannel';
-import { createObservableStore } from './createObservableStore';
+import { createObservableStore, type ObservableStore } from './createObservableStore';
+import { createPersistedObservableStore } from './createPersistedObservableStore';
 
 const DEFAULT_MAX_LOGS = 200;
 
+export interface ChannelFeaturePersistConfig<TEntry> {
+  storageKey: string;
+  maxPersist: number;
+  debounceMs?: number;
+  serialize?: (entry: TEntry) => unknown;
+}
+
 /**
  * Generic factory for features that subscribe to an event channel.
  * Eliminates boilerplate across channel-based features (Track, Navigation, Zustand).
@@ -13,19 +21,36 @@ const DEFAULT_MAX_LOGS = 200;
  * @param toEntry - Maps a payload + auto-generated id to a typed log entry
  * @param options - Feature name, label, render component, and optional maxLogs
  */
-export function createChannelFeature<TPayload, TEntry>(
+export function createChannelFeature<TPayload, TEntry extends { id?: string }>(
   getChannel: () => EventChannel<TPayload>,
   toEntry: (payload: TPayload, id: string) => TEntry,
   options: {
     name: string;
     label: string;
-    renderContent?: ComponentType<DebugFeatureRenderProps<TEntry>>;
+    renderContent?: ComponentType<DebugFeatureRenderProps<TEntry[]>>;
     maxLogs?: number;
+    persist?: ChannelFeaturePersistConfig<TEntry>;
   },
-): DebugFeature<TEntry> {
+): DebugFeature<TEntry[]> {
   const maxLogs = options.maxLogs ?? DEFAULT_MAX_LOGS;
-  const logStore = createObservableStore<TEntry>();
   let nextId = 0;
+  let logStore: ObservableStore<TEntry>;
+  let getId: () => string;
+
+  if (options.persist) {
+    const persisted = createPersistedObservableStore<TEntry>({
+      storageKey: options.persist.storageKey,
+      maxPersist: options.persist.maxPersist,
+      debounceMs: options.persist.debounceMs,
+      serialize: options.persist.serialize,
+    });
+    logStore = persisted;
+    getId = () => persisted.nextId();
+  } else {
+    logStore = createObservableStore<TEntry>();
+    getId = () => String(nextId++);
+  }
+
   let initialized = false;
   let unsubscribe: (() => void) | null = null;
 
@@ -36,11 +61,11 @@ export function createChannelFeature<TPayload, TEntry>(
     setup: () => {
       if (initialized) return;
       unsubscribe = getChannel().subscribe((payload) => {
-        logStore.push(toEntry(payload, String(nextId++)), maxLogs);
+        logStore.push(toEntry(payload, getId()), maxLogs);
       });
       initialized = true;
     },
-    getData: () => logStore.getData(),
+    getSnapshot: () => logStore.getData(),
     clear: () => {
       logStore.clear();
     },

package/src/utils/createObservableStore.ts

@@ -3,6 +3,7 @@ export type StoreListener = () => void;
 export interface ObservableStore<T> {
   getData: () => T[];
   push: (item: T, maxEntries?: number) => void;
+  pushBatch: (items: T[]) => void;
   clear: () => void;
   subscribe: (listener: StoreListener) => () => void;
 }
@@ -25,6 +26,11 @@ export function createObservableStore<T>(): ObservableStore<T> {
       }
       notify();
     },
+    pushBatch: (items) => {
+      if (items.length === 0) return;
+      data = [...data, ...items];
+      notify();
+    },
     clear: () => {
       if (data.length === 0) {
         return;