react-native-debug-toolkit 2.0.0 → 2.1.0

package/lib/commonjs/components/FloatPanelView.js

@@ -3,396 +3,148 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FloatPanelView = void 0;
+exports.FloatPanelView = FloatPanelView;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
-var _constants = require("../utils/constants");
+var _FloatIcon = require("./FloatIcon");
+var _DebugPanel = require("./DebugPanel");
+var _FeatureTabBar = require("./FeatureTabBar");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-class FloatPanelView extends _react.Component {
-  tabScrollViewRef = /*#__PURE__*/_react.default.createRef();
-  unsubscribeFns = [];
-  refreshTimeout = null;
-  isDisposed = false;
-  isSwitchingTab = false;
-  underlineInitialized = false;
-  tabScrollOffset = 0;
-  tabViewportWidth = 0;
-  tabContentWidth = 0;
-  tabLayouts = [];
-  constructor(props) {
-    super(props);
-    const initialPosition = {
-      x: _constants.Layout.screenWidth - _constants.Layout.iconSize - 16,
-      y: _constants.Layout.screenHeight / 2 - _constants.Layout.iconSize / 2
-    };
-    this.state = {
-      isOpen: false,
-      toFloat: true,
-      pan: new _reactNative.Animated.ValueXY(initialPosition),
-      scale: new _reactNative.Animated.Value(1),
-      lastPosition: initialPosition,
-      activeTab: 0,
-      panelTranslateY: new _reactNative.Animated.Value(_constants.Layout.screenHeight),
-      backdropOpacity: new _reactNative.Animated.Value(0),
-      contentOpacity: new _reactNative.Animated.Value(1),
-      contentTranslateX: new _reactNative.Animated.Value(0),
-      underlineTranslateX: new _reactNative.Animated.Value(0),
-      underlineWidth: 0
-    };
-    this.gestureResponder = _reactNative.PanResponder.create({
-      onStartShouldSetPanResponder: () => true,
-      onMoveShouldSetPanResponder: () => true,
-      onPanResponderGrant: () => {
-        this.setState({
-          toFloat: true
-        });
-        _reactNative.Animated.spring(this.state.scale, {
-          toValue: 0.9,
-          friction: 5,
-          useNativeDriver: true
-        }).start();
-      },
-      onPanResponderMove: (_, gs) => {
-        const {
-          lastPosition
-        } = this.state;
-        const x = Math.max(0, Math.min(lastPosition.x + gs.dx, _constants.Layout.screenWidth - _constants.Layout.iconSize));
-        const y = Math.max(0, Math.min(lastPosition.y + gs.dy, _constants.Layout.screenHeight - _constants.Layout.iconSize));
-        this.state.pan.setValue({
-          x,
-          y
-        });
-      },
-      onPanResponderRelease: (_, gs) => {
-        if (Math.abs(gs.dx) < 5 && Math.abs(gs.dy) < 5) {
-          _reactNative.Animated.spring(this.state.scale, {
-            toValue: 1,
-            friction: 5,
-            useNativeDriver: true
-          }).start();
-          this.togglePanel();
-          return;
-        }
-        _reactNative.Animated.spring(this.state.scale, {
-          toValue: 1,
-          friction: 5,
-          useNativeDriver: true
-        }).start();
-        const {
-          lastPosition
-        } = this.state;
-        const newPosition = {
-          x: Math.max(0, Math.min(lastPosition.x + gs.dx, _constants.Layout.screenWidth - _constants.Layout.iconSize)),
-          y: Math.max(0, Math.min(lastPosition.y + gs.dy, _constants.Layout.screenHeight - _constants.Layout.iconSize))
-        };
-        this.setState({
-          lastPosition: newPosition,
-          toFloat: true
-        });
-      },
-      onPanResponderTerminate: (_, gs) => {
-        const {
-          lastPosition
-        } = this.state;
-        const newPosition = {
-          x: Math.max(0, Math.min(lastPosition.x + gs.dx, _constants.Layout.screenWidth - _constants.Layout.iconSize)),
-          y: Math.max(0, Math.min(lastPosition.y + gs.dy, _constants.Layout.screenHeight - _constants.Layout.iconSize))
-        };
-        this.setState({
-          lastPosition: newPosition
-        });
-      }
-    });
-    this.panelResponder = _reactNative.PanResponder.create({
-      onStartShouldSetPanResponder: () => true,
-      onMoveShouldSetPanResponder: (_, gs) => gs.dy > 5,
-      onPanResponderMove: (_, gs) => {
-        if (gs.dy > 0) {
-          this.state.panelTranslateY.setValue(gs.dy);
-          this.state.backdropOpacity.setValue(Math.max(0, 1 - gs.dy / 200));
-        }
-      },
-      onPanResponderRelease: (_, gs) => {
-        if (gs.dy > 100) {
-          this.closePanel();
-        } else {
-          _reactNative.Animated.spring(this.state.panelTranslateY, {
-            toValue: 0,
-            friction: 8,
-            tension: 50,
-            useNativeDriver: true
-          }).start();
-          _reactNative.Animated.timing(this.state.backdropOpacity, {
-            toValue: 1,
-            duration: 200,
-            useNativeDriver: true
-          }).start();
-        }
-      }
-    });
+// ─── Error Boundary ────────────────────────────────────
 
-    // Horizontal swipe for tab switching
-    this.swipeResponder = _reactNative.PanResponder.create({
-      onStartShouldSetPanResponder: () => false,
-      onMoveShouldSetPanResponder: (_, gs) => {
-        if (this.isSwitchingTab) return false;
-        return Math.abs(gs.dx) > 25 && Math.abs(gs.dx) > Math.abs(gs.dy) * 2.5;
-      },
-      onPanResponderRelease: (_, gs) => {
-        const tabs = this.getTabs();
-        if (gs.dx < -40 && this.state.activeTab < tabs.length - 1) {
-          this.switchTab(this.state.activeTab + 1);
-        } else if (gs.dx > 40 && this.state.activeTab > 0) {
-          this.switchTab(this.state.activeTab - 1);
-        }
-      },
-      onPanResponderTerminationRequest: () => true
-    });
-  }
-  componentDidMount() {
-    this.isDisposed = false;
-    this.subscribeToFeatures(this.props.features);
-  }
-  componentDidUpdate(prevProps) {
-    if (prevProps.features !== this.props.features) {
-      this.unsubscribeFromFeatures();
-      this.subscribeToFeatures(this.props.features);
-      if (this.state.activeTab >= this.props.features.length) {
-        this.setState({
-          activeTab: 0
-        });
-      }
-    }
-  }
-  componentWillUnmount() {
-    this.isDisposed = true;
-    if (this.refreshTimeout) {
-      clearTimeout(this.refreshTimeout);
-      this.refreshTimeout = null;
-    }
-    this.unsubscribeFromFeatures();
-  }
-  scheduleRefresh() {
-    if (this.isDisposed || this.refreshTimeout) return;
-    this.refreshTimeout = setTimeout(() => {
-      this.refreshTimeout = null;
-      if (!this.isDisposed) this.forceUpdate();
-    }, 0);
+class DebugErrorBoundary extends _react.Component {
+  state = {
+    hasError: false
+  };
+  static getDerivedStateFromError() {
+    return {
+      hasError: true
+    };
   }
-  subscribeToFeatures(features) {
-    this.unsubscribeFns = features.map(feature => feature.subscribe?.(() => this.scheduleRefresh())).filter(unsubscribe => typeof unsubscribe === 'function');
+  componentDidCatch(error, info) {
+    console.error('[DebugToolkit] Panel crashed:', error, info.componentStack);
+    this.props.onError();
   }
-  unsubscribeFromFeatures() {
-    this.unsubscribeFns.forEach(unsubscribe => unsubscribe());
-    this.unsubscribeFns = [];
+  render() {
+    if (this.state.hasError) return null;
+    return this.props.children;
   }
-  togglePanel = () => {
-    if (this.state.isOpen) this.closePanel();else this.openPanel();
-  };
-  openPanel = () => {
-    this.resetTabMeasurements();
-    this.setState({
-      isOpen: true,
-      toFloat: false,
-      underlineWidth: 0
-    }, () => {
-      _reactNative.Animated.parallel([_reactNative.Animated.spring(this.state.panelTranslateY, {
-        toValue: 0,
-        friction: 8,
-        tension: 65,
-        useNativeDriver: true
-      }), _reactNative.Animated.timing(this.state.backdropOpacity, {
-        toValue: 1,
-        duration: 250,
-        useNativeDriver: true
-      })]).start();
-    });
-  };
-  closePanel = () => {
-    _reactNative.Animated.parallel([_reactNative.Animated.spring(this.state.panelTranslateY, {
-      toValue: _constants.Layout.screenHeight,
-      friction: 8,
-      tension: 65,
-      useNativeDriver: true
-    }), _reactNative.Animated.timing(this.state.backdropOpacity, {
-      toValue: 0,
-      duration: 200,
-      useNativeDriver: true
-    })]).start(() => {
-      this.setState({
-        isOpen: false,
-        toFloat: true
-      });
+}
+function FloatPanelView({
+  features,
+  onClearAll
+}) {
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const [activeTab, setActiveTab] = (0, _react.useState)(0);
+
+  // Content slide animation
+  const contentOpacity = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
+  const contentTranslateX = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const isSwitchingTab = (0, _react.useRef)(false);
+
+  // Refs to avoid stale closures in PanResponder
+  const activeTabRef = (0, _react.useRef)(0);
+  activeTabRef.current = activeTab;
+  const featuresLengthRef = (0, _react.useRef)(features.length);
+  featuresLengthRef.current = features.length;
+  const switchTabRef = (0, _react.useRef)(() => {});
+
+  // Swipe-to-switch responder
+  const swipeResponder = (0, _react.useRef)(_reactNative.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] = (0, _react.useState)(0);
+  const refreshQueued = (0, _react.useRef)(false);
+  const scheduleRefresh = (0, _react.useCallback)(() => {
+    if (refreshQueued.current) return;
+    refreshQueued.current = true;
+    requestAnimationFrame(() => {
+      refreshQueued.current = false;
+      setTick(t => t + 1);
     });
-  };
-  resetTabMeasurements() {
-    this.underlineInitialized = false;
-    this.tabScrollOffset = 0;
-    this.tabViewportWidth = 0;
-    this.tabContentWidth = 0;
-    this.tabLayouts = [];
-    this.state.underlineTranslateX.setValue(0);
-  }
-  switchTab = index => {
-    if (this.isSwitchingTab || index === this.state.activeTab) return;
-    this.isSwitchingTab = true;
-    const direction = index > this.state.activeTab ? 1 : -1;
+  }, []);
+  (0, _react.useEffect)(() => {
+    const unsubs = features.map(f => f.subscribe?.(() => scheduleRefresh())).filter(u => typeof u === 'function');
+    return () => unsubs.forEach(u => u());
+  }, [features, scheduleRefresh]);
 
-    // Auto-scroll tab bar first, then animate underline
-    const layout = this.tabLayouts[index];
-    if (layout) {
-      const targetScrollX = this.getTabScrollTarget(index);
-      this.tabScrollOffset = targetScrollX;
-      if (this.tabScrollViewRef.current) {
-        this.tabScrollViewRef.current.scrollTo({
-          x: targetScrollX,
-          animated: true
-        });
-      }
-      this.animateUnderline(index, targetScrollX);
-    }
+  // Reset activeTab if features shrink
+  (0, _react.useEffect)(() => {
+    if (activeTab >= features.length) setActiveTab(0);
+  }, [features.length, activeTab]);
 
-    // Animate content: slide out + fade out
-    _reactNative.Animated.parallel([_reactNative.Animated.timing(this.state.contentOpacity, {
+  // Tab switching with content animation
+  const switchTab = (0, _react.useCallback)(index => {
+    if (isSwitchingTab.current || index === activeTabRef.current) return;
+    isSwitchingTab.current = true;
+    const direction = index > activeTabRef.current ? 1 : -1;
+    _reactNative.Animated.parallel([_reactNative.Animated.timing(contentOpacity, {
       toValue: 0,
       duration: 80,
       useNativeDriver: true
-    }), _reactNative.Animated.timing(this.state.contentTranslateX, {
+    }), _reactNative.Animated.timing(contentTranslateX, {
       toValue: -direction * 40,
       duration: 80,
       useNativeDriver: true
     })]).start(() => {
-      this.setState({
-        activeTab: index
-      }, () => {
-        // Reset translateX to opposite side instantly, then slide in + fade in
-        this.state.contentTranslateX.setValue(direction * 40);
-        _reactNative.Animated.parallel([_reactNative.Animated.timing(this.state.contentOpacity, {
-          toValue: 1,
-          duration: 150,
-          useNativeDriver: true
-        }), _reactNative.Animated.timing(this.state.contentTranslateX, {
-          toValue: 0,
-          duration: 200,
-          easing: _reactNative.Easing.out(_reactNative.Easing.cubic),
-          useNativeDriver: true
-        })]).start(() => {
-          this.isSwitchingTab = false;
-        });
-      });
-    });
-  };
-  animateUnderline(index, scrollOffset) {
-    const layout = this.tabLayouts[index];
-    if (!layout) {
-      return;
-    }
-    const offsetX = this.getClampedTabScrollOffset(scrollOffset ?? this.tabScrollOffset);
-    this.setState({
-      underlineWidth: layout.width
-    });
-    _reactNative.Animated.spring(this.state.underlineTranslateX, {
-      toValue: layout.x - offsetX,
-      friction: 7,
-      tension: 50,
-      useNativeDriver: true
-    }).start();
-  }
-  getMaxTabScrollOffset() {
-    return Math.max(0, this.tabContentWidth - this.tabViewportWidth);
-  }
-  getClampedTabScrollOffset(offset) {
-    return Math.min(Math.max(0, offset), this.getMaxTabScrollOffset());
-  }
-  getTabScrollTarget(index) {
-    const layout = this.tabLayouts[index];
-    if (!layout) {
-      return this.getClampedTabScrollOffset(this.tabScrollOffset);
-    }
-    return this.getClampedTabScrollOffset(layout.x - 60);
-  }
-  tryInitializeTabBar() {
-    if (this.underlineInitialized || this.tabViewportWidth <= 0 || this.tabContentWidth <= 0) {
-      return;
-    }
-    const layout = this.tabLayouts[this.state.activeTab];
-    if (!layout) {
-      return;
-    }
-    const targetScrollX = this.getTabScrollTarget(this.state.activeTab);
-    this.tabScrollOffset = targetScrollX;
-    if (this.tabScrollViewRef.current) {
-      this.tabScrollViewRef.current.scrollTo({
-        x: targetScrollX,
-        animated: false
+      setActiveTab(index);
+      contentTranslateX.setValue(direction * 40);
+      _reactNative.Animated.parallel([_reactNative.Animated.timing(contentOpacity, {
+        toValue: 1,
+        duration: 150,
+        useNativeDriver: true
+      }), _reactNative.Animated.timing(contentTranslateX, {
+        toValue: 0,
+        duration: 200,
+        easing: _reactNative.Easing.out(_reactNative.Easing.cubic),
+        useNativeDriver: true
+      })]).start(() => {
+        isSwitchingTab.current = false;
       });
-    }
-    this.state.underlineTranslateX.setValue(layout.x - targetScrollX);
-    this.setState({
-      underlineWidth: layout.width
     });
-    this.underlineInitialized = true;
-  }
-  syncUnderlineToActiveTab() {
-    const layout = this.tabLayouts[this.state.activeTab];
-    if (!layout) {
-      return;
-    }
-    const clampedOffset = this.getClampedTabScrollOffset(this.tabScrollOffset);
-    if (clampedOffset !== this.tabScrollOffset) {
-      this.tabScrollOffset = clampedOffset;
-    }
-    this.state.underlineTranslateX.setValue(layout.x - clampedOffset);
-    if (this.state.underlineWidth !== layout.width) {
-      this.setState({
-        underlineWidth: layout.width
-      });
-    }
-  }
-  handleTabLayout = (index, event) => {
-    const {
-      x,
-      width
-    } = event.nativeEvent.layout;
-    this.tabLayouts[index] = {
-      x,
-      width
-    };
-    if (index === this.state.activeTab) {
-      this.tryInitializeTabBar();
-    }
-  };
-  getTabs() {
-    return this.props.features.map(f => ({
-      label: f.label,
-      id: f.name
-    }));
-  }
-  renderFeatureContent() {
-    const tabs = this.getTabs();
-    if (tabs.length === 0) {
+  }, [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 = features.map(f => ({
+    label: f.label,
+    id: f.name
+  }));
+
+  // Render active feature content
+  const renderFeatureContent = () => {
+    if (features.length === 0) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: styles.emptyText,
         children: "No debug features enabled"
       });
     }
-    const featureId = tabs[this.state.activeTab]?.id;
-    const feature = this.props.features.find(f => f.name === featureId);
-    if (!feature) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.emptyText,
-        children: "Feature not found"
-      });
-    }
+    const feature = features[activeTab];
+    if (!feature) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.emptyText,
+      children: "Feature not found"
+    });
     const data = feature.getData();
     const TabComponent = feature.renderContent;
-    if (TabComponent) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(TabComponent, {
-        data: data,
-        feature: feature
-      });
-    }
+    if (TabComponent) return /*#__PURE__*/(0, _jsxRuntime.jsx)(TabComponent, {
+      data: data,
+      feature: feature
+    });
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: styles.genericContent,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -400,187 +152,37 @@ class FloatPanelView extends _react.Component {
         children: JSON.stringify(data, null, 2)
       })
     });
-  }
-  render() {
-    const {
-      isOpen,
-      toFloat,
-      pan,
-      scale,
-      panelTranslateY,
-      backdropOpacity,
-      activeTab,
-      contentOpacity
-    } = this.state;
-    const tabs = this.getTabs();
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DebugErrorBoundary, {
+    onError: () => setIsOpen(false),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.container,
       pointerEvents: "box-none",
-      children: [!isOpen && toFloat && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-        ...this.gestureResponder.panHandlers,
-        style: [styles.floatBtn, {
-          transform: [{
-            translateX: pan.x
-          }, {
-            translateY: pan.y
-          }, {
-            scale
-          }]
-        }],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
-          onPress: this.togglePanel,
-          style: styles.floatBtnInner,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.iconGrid,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              style: styles.iconRow,
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-                style: [styles.iconCell, {
-                  backgroundColor: _constants.Colors.primary
-                }]
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-                style: [styles.iconCell, {
-                  backgroundColor: _constants.Colors.success
-                }]
-              })]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              style: styles.iconRow,
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-                style: [styles.iconCell, {
-                  backgroundColor: _constants.Colors.warning
-                }]
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-                style: [styles.iconCell, {
-                  backgroundColor: _constants.Colors.purple
-                }]
-              })]
-            })]
-          }), (() => {
-            const envBadge = this.props.features.map(f => f.badge?.()).find(b => b != null);
-            if (!envBadge) return null;
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-              style: [styles.envBadge, {
-                backgroundColor: envBadge.color
-              }],
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.envBadgeText,
-                children: envBadge.label
-              })
-            });
-          })()]
-        })
-      }), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.panelContainer,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-          style: [styles.backdrop, {
-            opacity: backdropOpacity
-          }],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-            style: styles.backdropPressable,
-            onPress: this.closePanel
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
-          style: [styles.panel, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FloatIcon.FloatIcon, {
+        visible: !isOpen,
+        onPress: () => setIsOpen(true),
+        badge: envBadge
+      }), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DebugPanel.DebugPanel, {
+        onClose: () => setIsOpen(false),
+        onClearAll: onClearAll,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FeatureTabBar.FeatureTabBar, {
+          tabs: tabs,
+          activeIndex: activeTab,
+          onSelectTab: switchTab
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+          style: [styles.contentContainer, {
+            opacity: contentOpacity,
             transform: [{
-              translateY: panelTranslateY
+              translateX: contentTranslateX
             }]
           }],
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            ...this.panelResponder.panHandlers,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-              style: styles.dragHandle,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-                style: styles.dragIndicator
-              })
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              style: styles.header,
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.headerTitle,
-                children: "Debug Toolkit"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-                style: styles.headerButtons,
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-                  onPress: () => {
-                    this.props.onClearAll();
-                    this.closePanel();
-                  },
-                  style: styles.clearAllButton,
-                  activeOpacity: 0.6,
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                    style: styles.clearButtonText,
-                    children: "Clear"
-                  })
-                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-                  onPress: this.closePanel,
-                  style: styles.closeButton,
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                    style: styles.closeButtonText,
-                    children: "\u2715"
-                  })
-                })]
-              })]
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.panelContent,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              style: styles.tabBarContainer,
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
-                ref: this.tabScrollViewRef,
-                horizontal: true,
-                showsHorizontalScrollIndicator: false,
-                contentContainerStyle: styles.tabsScrollContainer,
-                onLayout: e => {
-                  this.tabViewportWidth = e.nativeEvent.layout.width;
-                  this.tryInitializeTabBar();
-                },
-                onContentSizeChange: width => {
-                  this.tabContentWidth = width;
-                  this.tryInitializeTabBar();
-                },
-                onScroll: e => {
-                  this.tabScrollOffset = this.getClampedTabScrollOffset(e.nativeEvent.contentOffset.x);
-                  // Keep underline aligned with active tab during manual scroll
-                  if (!this.isSwitchingTab) {
-                    this.syncUnderlineToActiveTab();
-                  }
-                },
-                scrollEventThrottle: 16,
-                children: tabs.map((tab, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-                  style: styles.tab,
-                  onPress: () => this.switchTab(index),
-                  activeOpacity: 0.7,
-                  onLayout: e => this.handleTabLayout(index, e),
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                    style: [styles.tabText, activeTab === index && styles.activeTabText],
-                    numberOfLines: 1,
-                    children: tab.label
-                  })
-                }, tab.id))
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-                style: [styles.slidingUnderline, {
-                  width: this.state.underlineWidth,
-                  transform: [{
-                    translateX: this.state.underlineTranslateX
-                  }]
-                }]
-              })]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-              style: [styles.contentContainer, {
-                opacity: contentOpacity,
-                transform: [{
-                  translateX: this.state.contentTranslateX
-                }]
-              }],
-              ...this.swipeResponder.panHandlers,
-              children: this.renderFeatureContent()
-            })]
-          })]
+          ...swipeResponder.panHandlers,
+          children: renderFeatureContent()
         })]
       })]
-    });
-  }
+    })
+  });
 }
-exports.FloatPanelView = FloatPanelView;
 const styles = _reactNative.StyleSheet.create({
   container: {
     position: 'absolute',
@@ -590,198 +192,13 @@ const styles = _reactNative.StyleSheet.create({
     bottom: 0,
     zIndex: 999
   },
-  // Float button
-  floatBtn: {
-    position: 'absolute',
-    width: _constants.Layout.iconSize,
-    height: _constants.Layout.iconSize,
-    borderRadius: _constants.Layout.iconSize / 2,
-    backgroundColor: '#FFFFFF',
-    elevation: 6,
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowOpacity: 0.12,
-    shadowRadius: 8
-  },
-  floatBtnInner: {
-    width: '100%',
-    height: '100%',
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  iconGrid: {
-    width: 22,
-    height: 22,
-    justifyContent: 'space-between'
-  },
-  iconRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between'
-  },
-  iconCell: {
-    width: 8,
-    height: 8,
-    borderRadius: 2.5
-  },
-  envBadge: {
-    position: 'absolute',
-    top: -4,
-    right: -4,
-    minWidth: 20,
-    height: 18,
-    borderRadius: 9,
-    paddingHorizontal: 5,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderWidth: 2,
-    borderColor: '#FFF',
-    elevation: 4
-  },
-  envBadgeText: {
-    color: '#FFF',
-    fontSize: 9,
-    fontWeight: '700'
-  },
-  // Panel
-  panelContainer: {
-    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: _constants.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: 20,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: _constants.Colors.surface
-  },
-  dragIndicator: {
-    width: 40,
-    height: 4,
-    borderRadius: 2,
-    backgroundColor: '#D1D1D6'
-  },
-  panelContent: {
-    flex: 1
-  },
   contentContainer: {
     flex: 1
   },
-  // Header
-  header: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingHorizontal: 20,
-    paddingTop: 6,
-    paddingBottom: 10,
-    backgroundColor: _constants.Colors.surface
-  },
-  headerTitle: {
-    fontSize: 17,
-    fontWeight: '600',
-    color: _constants.Colors.text
-  },
-  headerButtons: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 12
-  },
-  clearAllButton: {
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    borderRadius: 8,
-    backgroundColor: 'rgba(255,59,48,0.06)'
-  },
-  clearButtonText: {
-    color: _constants.Colors.error,
-    fontSize: 14,
-    fontWeight: '500'
-  },
-  closeButton: {
-    width: 30,
-    height: 30,
-    borderRadius: 15,
-    backgroundColor: _constants.Colors.background,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  closeButtonText: {
-    fontSize: 16,
-    fontWeight: '400',
-    color: _constants.Colors.textSecondary,
-    lineHeight: 16
-  },
-  // Tab bar - iOS 17 sliding underline style
-  tabBarContainer: {
-    backgroundColor: _constants.Colors.surface,
-    borderBottomWidth: _reactNative.StyleSheet.hairlineWidth,
-    borderBottomColor: _constants.Colors.border
-  },
-  tabsScrollContainer: {
-    paddingHorizontal: 20,
-    flexDirection: 'row'
-  },
-  tab: {
-    paddingVertical: 10,
-    paddingHorizontal: 14,
-    marginRight: 8
-  },
-  tabText: {
-    fontSize: 14,
-    fontWeight: '500',
-    color: _constants.Colors.textLight
-  },
-  activeTabText: {
-    color: _constants.Colors.primary,
-    fontWeight: '600'
-  },
-  slidingUnderline: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    height: 2.5,
-    borderRadius: 1.25,
-    backgroundColor: _constants.Colors.primary
-  },
-  // Misc
   emptyText: {
     padding: 20,
     textAlign: 'center',
-    color: _constants.Colors.textLight,
+    color: '#C7C7CC',
     fontSize: 13
   },
   genericContent: {
@@ -791,7 +208,7 @@ const styles = _reactNative.StyleSheet.create({
   jsonContent: {
     fontFamily: 'monospace',
     fontSize: 12,
-    color: _constants.Colors.text
+    color: '#1C1C1E'
   }
 });
 //# sourceMappingURL=FloatPanelView.js.map