react-native-debug-toolkit 2.0.0 → 2.2.0

package/src/ui/panel/DebugPanel.tsx

@@ -0,0 +1,215 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Animated,
+  PanResponder,
+  Pressable,
+  TouchableOpacity,
+  useWindowDimensions,
+} from 'react-native';
+import { Colors } from '../theme/colors';
+
+interface DebugPanelProps {
+  onClose: () => void;
+  onClearAll: () => void;
+  children: React.ReactNode;
+}
+
+export function DebugPanel({ onClose, onClearAll, children }: DebugPanelProps) {
+  const { height: screenHeight } = useWindowDimensions();
+  const panelTranslateY = useRef(new Animated.Value(screenHeight)).current;
+  const backdropOpacity = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      Animated.parallel([
+        Animated.spring(panelTranslateY, {
+          toValue: 0,
+          friction: 8,
+          tension: 65,
+          useNativeDriver: true,
+        }),
+        Animated.timing(backdropOpacity, {
+          toValue: 1,
+          duration: 250,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    });
+  }, [panelTranslateY, backdropOpacity]);
+
+  const closePanel = useCallback(() => {
+    Animated.parallel([
+      Animated.spring(panelTranslateY, {
+        toValue: screenHeight,
+        friction: 8,
+        tension: 65,
+        useNativeDriver: true,
+      }),
+      Animated.timing(backdropOpacity, {
+        toValue: 0,
+        duration: 200,
+        useNativeDriver: true,
+      }),
+    ]).start(() => onClose());
+  }, [panelTranslateY, backdropOpacity, onClose, screenHeight]);
+
+  const panelResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: (_, gs) => gs.dy > 5,
+      onPanResponderMove: (_, gs) => {
+        if (gs.dy > 0) {
+          panelTranslateY.setValue(gs.dy);
+          backdropOpacity.setValue(Math.max(0, 1 - gs.dy / 200));
+        }
+      },
+      onPanResponderRelease: (_, gs) => {
+        if (gs.dy > 100) {
+          closePanel();
+        } else {
+          Animated.spring(panelTranslateY, {
+            toValue: 0,
+            friction: 8,
+            tension: 50,
+            useNativeDriver: true,
+          }).start();
+          Animated.timing(backdropOpacity, {
+            toValue: 1,
+            duration: 200,
+            useNativeDriver: true,
+          }).start();
+        }
+      },
+    }),
+  ).current;
+
+  return (
+    <View style={styles.container}>
+      <Animated.View style={[styles.backdrop, { opacity: backdropOpacity }]}>
+        <Pressable style={styles.backdropPressable} onPress={closePanel} />
+      </Animated.View>
+      <Animated.View
+        style={[styles.panel, { transform: [{ translateY: panelTranslateY }] }]}
+      >
+        <View {...panelResponder.panHandlers}>
+          <View style={styles.dragHandle}>
+            <View style={styles.dragIndicator} />
+          </View>
+          <View style={styles.header}>
+            <Text style={styles.headerTitle}>Debug Toolkit</Text>
+            <View style={styles.headerButtons}>
+              <TouchableOpacity
+                onPress={() => {
+                  onClearAll();
+                  closePanel();
+                }}
+                style={styles.clearButton}
+                activeOpacity={0.6}
+              >
+                <Text style={styles.clearButtonText}>Clear</Text>
+              </TouchableOpacity>
+              <Pressable onPress={closePanel} style={styles.closeButton}>
+                <Text style={styles.closeButtonText}>✕</Text>
+              </Pressable>
+            </View>
+          </View>
+        </View>
+        <View style={styles.panelContent}>{children}</View>
+      </Animated.View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'flex-end',
+  },
+  backdrop: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0,0,0,0.35)',
+  },
+  backdropPressable: { flex: 1 },
+  panel: {
+    width: '100%',
+    height: '90%',
+    backgroundColor: Colors.background,
+    borderTopLeftRadius: 28,
+    borderTopRightRadius: 28,
+    overflow: 'hidden',
+    elevation: 24,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: -4 },
+    shadowOpacity: 0.08,
+    shadowRadius: 12,
+  },
+  dragHandle: {
+    width: '100%',
+    height: 28,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: Colors.surface,
+  },
+  dragIndicator: {
+    width: 40,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: Colors.textLight,
+  },
+  panelContent: { flex: 1 },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+    paddingTop: 6,
+    paddingBottom: 10,
+    backgroundColor: Colors.surface,
+  },
+  headerTitle: {
+    fontSize: 17,
+    fontWeight: '600',
+    color: Colors.text,
+  },
+  headerButtons: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+  clearButton: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 8,
+    backgroundColor: `${Colors.error}0F`,
+  },
+  clearButtonText: {
+    color: Colors.error,
+    fontSize: 14,
+    fontWeight: '500',
+  },
+  closeButton: {
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    backgroundColor: Colors.background,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  closeButtonText: {
+    fontSize: 16,
+    fontWeight: '400',
+    color: Colors.textSecondary,
+    lineHeight: 16,
+  },
+});

package/src/ui/panel/FeatureTabBar.tsx

@@ -0,0 +1,204 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Animated,
+  ScrollView,
+  TouchableOpacity,
+} from 'react-native';
+import { Colors } from '../theme/colors';
+
+export interface TabItem {
+  id: string;
+  label: string;
+}
+
+interface FeatureTabBarProps {
+  tabs: TabItem[];
+  activeIndex: number;
+  onSelectTab: (index: number) => void;
+}
+
+export function FeatureTabBar({ tabs, activeIndex, onSelectTab }: FeatureTabBarProps) {
+  const [underlineWidth, setUnderlineWidth] = useState(0);
+  const underlineTranslateX = useRef(new Animated.Value(0)).current;
+  const tabScrollViewRef = useRef<ScrollView>(null);
+  const tabLayouts = useRef<Array<{ x: number; width: number }>>([]);
+  const tabScrollOffset = useRef(0);
+  const tabViewportWidth = useRef(0);
+  const tabContentWidth = useRef(0);
+  const underlineInit = useRef(false);
+  const isSwitching = useRef(false);
+
+  const maxTabScroll = useCallback(
+    () => Math.max(0, tabContentWidth.current - tabViewportWidth.current),
+    [],
+  );
+  const clampScroll = useCallback(
+    (offset: number) => Math.min(Math.max(0, offset), maxTabScroll()),
+    [maxTabScroll],
+  );
+  const getTabScrollTarget = useCallback(
+    (index: number) => {
+      const layout = tabLayouts.current[index];
+      return layout ? clampScroll(layout.x - 60) : clampScroll(tabScrollOffset.current);
+    },
+    [clampScroll],
+  );
+
+  const animateUnderline = useCallback(
+    (index: number, scrollOffset?: number) => {
+      const layout = tabLayouts.current[index];
+      if (!layout) return;
+      const offsetX = clampScroll(scrollOffset ?? tabScrollOffset.current);
+      setUnderlineWidth(layout.width);
+      Animated.spring(underlineTranslateX, {
+        toValue: layout.x - offsetX,
+        friction: 7,
+        tension: 50,
+        useNativeDriver: true,
+      }).start();
+    },
+    [clampScroll, underlineTranslateX],
+  );
+
+  const syncUnderlineToActiveTab = useCallback(() => {
+    const layout = tabLayouts.current[activeIndex];
+    if (!layout) return;
+    const clamped = clampScroll(tabScrollOffset.current);
+    if (clamped !== tabScrollOffset.current) tabScrollOffset.current = clamped;
+    underlineTranslateX.setValue(layout.x - clamped);
+    setUnderlineWidth(layout.width);
+  }, [activeIndex, clampScroll, underlineTranslateX]);
+
+  const tryInit = useCallback(() => {
+    if (underlineInit.current || tabViewportWidth.current <= 0 || tabContentWidth.current <= 0)
+      return;
+    const layout = tabLayouts.current[activeIndex];
+    if (!layout) return;
+    const target = getTabScrollTarget(activeIndex);
+    tabScrollOffset.current = target;
+    tabScrollViewRef.current?.scrollTo({ x: target, animated: false });
+    underlineTranslateX.setValue(layout.x - target);
+    setUnderlineWidth(layout.width);
+    underlineInit.current = true;
+  }, [activeIndex, getTabScrollTarget, underlineTranslateX]);
+
+  const handleSelectTab = useCallback(
+    (index: number) => {
+      if (isSwitching.current || index === activeIndex) return;
+      isSwitching.current = true;
+
+      const layout = tabLayouts.current[index];
+      if (layout) {
+        const target = getTabScrollTarget(index);
+        tabScrollOffset.current = target;
+        tabScrollViewRef.current?.scrollTo({ x: target, animated: true });
+        animateUnderline(index, target);
+      }
+
+      onSelectTab(index);
+      setTimeout(() => {
+        isSwitching.current = false;
+      }, 350);
+    },
+    [activeIndex, animateUnderline, getTabScrollTarget, onSelectTab],
+  );
+
+  // React to external activeIndex changes (e.g. swipe-to-switch)
+  useEffect(() => {
+    if (!underlineInit.current) return;
+    const layout = tabLayouts.current[activeIndex];
+    if (!layout) return;
+    const target = getTabScrollTarget(activeIndex);
+    tabScrollOffset.current = target;
+    tabScrollViewRef.current?.scrollTo({ x: target, animated: true });
+    animateUnderline(activeIndex, target);
+  }, [activeIndex, animateUnderline, getTabScrollTarget]);
+
+  return (
+    <View style={styles.container}>
+      <ScrollView
+        ref={tabScrollViewRef}
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.scrollContent}
+        onLayout={(e) => {
+          tabViewportWidth.current = e.nativeEvent.layout.width;
+          tryInit();
+        }}
+        onContentSizeChange={(width) => {
+          tabContentWidth.current = width;
+          tryInit();
+        }}
+        onScroll={(e) => {
+          tabScrollOffset.current = clampScroll(e.nativeEvent.contentOffset.x);
+          if (!isSwitching.current) syncUnderlineToActiveTab();
+        }}
+        scrollEventThrottle={16}
+      >
+        {tabs.map((tab, index) => (
+          <TouchableOpacity
+            key={tab.id}
+            style={styles.tab}
+            onPress={() => handleSelectTab(index)}
+            activeOpacity={0.7}
+            onLayout={(e) => {
+              const { x, width } = e.nativeEvent.layout;
+              tabLayouts.current[index] = { x, width };
+              if (index === activeIndex) tryInit();
+            }}
+          >
+            <Text
+              style={[styles.tabText, activeIndex === index && styles.activeTabText]}
+              numberOfLines={1}
+            >
+              {tab.label}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </ScrollView>
+      <Animated.View
+        style={[
+          styles.underline,
+          { width: underlineWidth, transform: [{ translateX: underlineTranslateX }] },
+        ]}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: Colors.surface,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: Colors.border,
+  },
+  scrollContent: {
+    paddingHorizontal: 20,
+    flexDirection: 'row',
+  },
+  tab: {
+    paddingVertical: 10,
+    paddingHorizontal: 14,
+    marginRight: 8,
+  },
+  tabText: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: Colors.textLight,
+  },
+  activeTabText: {
+    color: Colors.primary,
+    fontWeight: '600',
+  },
+  underline: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    height: 2.5,
+    borderRadius: 1.25,
+    backgroundColor: Colors.primary,
+  },
+});

package/src/ui/panel/FloatPanelView.tsx

@@ -0,0 +1,227 @@
+import React, { Component, useCallback, useEffect, useRef, useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Animated,
+  PanResponder,
+  Easing,
+} from 'react-native';
+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';
+
+// ─── Error Boundary ────────────────────────────────────
+interface ErrorBoundaryState {
+  hasError: boolean;
+}
+
+class DebugErrorBoundary extends Component<
+  { children: React.ReactNode; onError: () => void },
+  ErrorBoundaryState
+> {
+  state: ErrorBoundaryState = { hasError: false };
+
+  static getDerivedStateFromError(): ErrorBoundaryState {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, info: React.ErrorInfo) {
+    console.error('[DebugToolkit] Panel crashed:', error, info.componentStack);
+    this.props.onError();
+  }
+
+  render() {
+    if (this.state.hasError) return null;
+    return this.props.children;
+  }
+}
+
+interface FloatPanelViewProps {
+  features: AnyDebugFeature[];
+  panelOpen: boolean;
+  onOpenPanel: () => void;
+  onClosePanel: () => void;
+  onClearAll: () => void;
+}
+
+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;
+  const contentTranslateX = useRef(new Animated.Value(0)).current;
+  const isSwitchingTab = useRef(false);
+
+  // Refs to avoid stale closures in PanResponder
+  const activeTabRef = useRef(0);
+  activeTabRef.current = activeTab;
+  const featuresLengthRef = useRef(features.length);
+  featuresLengthRef.current = features.length;
+  const switchTabRef = useRef<(index: number) => void>(() => {});
+
+  // Swipe-to-switch responder
+  const swipeResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => false,
+      onMoveShouldSetPanResponder: (_, gs) => {
+        if (isSwitchingTab.current) return false;
+        return Math.abs(gs.dx) > 25 && Math.abs(gs.dx) > Math.abs(gs.dy) * 2.5;
+      },
+      onPanResponderRelease: (_, gs) => {
+        const tab = activeTabRef.current;
+        if (gs.dx < -40 && tab < featuresLengthRef.current - 1) switchTabRef.current(tab + 1);
+        else if (gs.dx > 40 && tab > 0) switchTabRef.current(tab - 1);
+      },
+      onPanResponderTerminationRequest: () => true,
+    }),
+  ).current;
+
+  // Feature subscription → re-render on data changes
+  const [, setTick] = useState(0);
+  const refreshQueued = useRef(false);
+  const scheduleRefresh = useCallback(() => {
+    if (refreshQueued.current) return;
+    refreshQueued.current = true;
+    requestAnimationFrame(() => {
+      refreshQueued.current = false;
+      setTick((t) => t + 1);
+    });
+  }, []);
+
+  useEffect(() => {
+    const unsubs = features
+      .map((f) => f.subscribe?.(() => scheduleRefresh()))
+      .filter((u): u is () => void => typeof u === 'function');
+    return () => unsubs.forEach((u) => u());
+  }, [features, scheduleRefresh]);
+
+  // Clamp activeTab if features shrink
+  useEffect(() => {
+    if (features.length > 0 && activeTab >= features.length) {
+      setActiveTab(0);
+      setPreference(KEYS.lastTab, '0');
+    }
+  }, [features.length, activeTab]);
+
+  // Tab switching with content animation
+  const switchTab = useCallback(
+    (index: number) => {
+      if (isSwitchingTab.current || index === activeTabRef.current) return;
+      isSwitchingTab.current = true;
+      const direction = index > activeTabRef.current ? 1 : -1;
+
+      Animated.parallel([
+        Animated.timing(contentOpacity, { toValue: 0, duration: 80, useNativeDriver: true }),
+        Animated.timing(contentTranslateX, {
+          toValue: -direction * 40,
+          duration: 80,
+          useNativeDriver: true,
+        }),
+      ]).start(() => {
+        setActiveTab(index);
+        setPreference(KEYS.lastTab, String(index));
+        contentTranslateX.setValue(direction * 40);
+        Animated.parallel([
+          Animated.timing(contentOpacity, { toValue: 1, duration: 150, useNativeDriver: true }),
+          Animated.timing(contentTranslateX, {
+            toValue: 0,
+            duration: 200,
+            easing: Easing.out(Easing.cubic),
+            useNativeDriver: true,
+          }),
+        ]).start(() => {
+          isSwitchingTab.current = false;
+        });
+      });
+    },
+    [contentOpacity, contentTranslateX],
+  );
+
+  // Keep ref in sync
+  switchTabRef.current = switchTab;
+
+  // Badge (first feature that returns one)
+  const envBadge = features.map((f) => f.badge?.()).find((b) => b != null) ?? null;
+  const tabs: TabItem[] = features.map((f) => ({ label: f.label, id: f.name }));
+
+  // Render active feature content
+  const renderFeatureContent = () => {
+    if (features.length === 0) {
+      return <Text style={styles.emptyText}>No debug features enabled</Text>;
+    }
+    const feature = features[activeTab];
+    if (!feature) return <Text style={styles.emptyText}>Feature not found</Text>;
+    const snapshot = feature.getSnapshot();
+    const TabComponent = feature.renderContent;
+    if (TabComponent) return <TabComponent snapshot={snapshot} feature={feature} />;
+    return (
+      <View style={styles.genericContent}>
+        <Text style={styles.jsonContent}>{JSON.stringify(snapshot, null, 2)}</Text>
+      </View>
+    );
+  };
+
+  return (
+    <DebugErrorBoundary onError={onClosePanel}>
+      <View style={styles.container} pointerEvents="box-none">
+        <FloatIcon visible={!panelOpen} onPress={onOpenPanel} badge={envBadge} />
+        {panelOpen && (
+          <DebugPanel
+            onClose={onClosePanel}
+            onClearAll={onClearAll}
+          >
+            <FeatureTabBar tabs={tabs} activeIndex={activeTab} onSelectTab={switchTab} />
+            <Animated.View
+              style={[
+                styles.contentContainer,
+                { opacity: contentOpacity, transform: [{ translateX: contentTranslateX }] },
+              ]}
+              {...swipeResponder.panHandlers}
+            >
+              {renderFeatureContent()}
+            </Animated.View>
+          </DebugPanel>
+        )}
+      </View>
+    </DebugErrorBoundary>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 999,
+  },
+  contentContainer: { flex: 1 },
+  emptyText: {
+    padding: 20,
+    textAlign: 'center',
+    color: '#C7C7CC',
+    fontSize: 13,
+  },
+  genericContent: { padding: 16, flex: 1 },
+  jsonContent: { fontFamily: 'monospace', fontSize: 12, color: '#1C1C1E' },
+});

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/constants';
+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/constants';
+import { Colors } from '../theme/colors';
 import { copyToComputer } from '../../utils/copyToComputer';
 
 interface CopyButtonProps {