react-native-debug-toolkit 0.6.4 → 2.0.0

package/lib/commonjs/components/FloatPanelView.js

@@ -0,0 +1,797 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FloatPanelView = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _constants = require("../utils/constants");
+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();
+        }
+      }
+    });
+
+    // 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);
+  }
+  subscribeToFeatures(features) {
+    this.unsubscribeFns = features.map(feature => feature.subscribe?.(() => this.scheduleRefresh())).filter(unsubscribe => typeof unsubscribe === 'function');
+  }
+  unsubscribeFromFeatures() {
+    this.unsubscribeFns.forEach(unsubscribe => unsubscribe());
+    this.unsubscribeFns = [];
+  }
+  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
+      });
+    });
+  };
+  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;
+
+    // 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);
+    }
+
+    // Animate content: slide out + fade out
+    _reactNative.Animated.parallel([_reactNative.Animated.timing(this.state.contentOpacity, {
+      toValue: 0,
+      duration: 80,
+      useNativeDriver: true
+    }), _reactNative.Animated.timing(this.state.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
+      });
+    }
+    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) {
+      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 data = feature.getData();
+    const TabComponent = feature.renderContent;
+    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, {
+        style: styles.jsonContent,
+        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, {
+      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, {
+            transform: [{
+              translateY: panelTranslateY
+            }]
+          }],
+          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()
+            })]
+          })]
+        })]
+      })]
+    });
+  }
+}
+exports.FloatPanelView = FloatPanelView;
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    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,
+    fontSize: 13
+  },
+  genericContent: {
+    padding: 16,
+    flex: 1
+  },
+  jsonContent: {
+    fontFamily: 'monospace',
+    fontSize: 12,
+    color: _constants.Colors.text
+  }
+});
+//# sourceMappingURL=FloatPanelView.js.map