@buoy-gg/bottom-sheet 7.0.40 → 7.0.42

package/lib/commonjs/components/BottomSheet.js

@@ -1,1160 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.BottomSheet = void 0;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _sharedUi = require("@buoy-gg/shared-ui");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * BottomSheet - Ultra-optimized modal component for true 60FPS performance
- *
- * Achieves 60FPS by following key principles:
- * 1. ALWAYS use native driver (useNativeDriver: true)
- * 2. Use transforms instead of layout properties (translateY instead of height)
- * 3. Use interpolation for all calculations (no JS thread math)
- * 4. Minimize PanResponder JS work (direct setValue, no state updates)
- *
- * Based on the proven JsModal component from @buoy-gg/shared-ui
- */
-
-// ============================================================================
-// CONSTANTS - Modal dimensions and configuration
-// ============================================================================
-const SCREEN = _reactNative.Dimensions.get("window");
-const MIN_HEIGHT = 100;
-const DEFAULT_HEIGHT = 400;
-const FLOATING_WIDTH = 380;
-const FLOATING_HEIGHT = 500;
-const FLOATING_MIN_WIDTH = SCREEN.width * 0.25; // 1/4 of screen width
-const FLOATING_MIN_HEIGHT = 80; // Just a bit more than header height (60px header + 20px content)
-
-// ============================================================================
-// SAFE AREA INSETS - Simplified version for standalone package
-// ============================================================================
-
-// Device detection map for iOS
-const iPhoneDimensionMap = {
-  // iPhone 14 Pro, 14 Pro Max, 15, 15 Plus, 15 Pro, 15 Pro Max, 16 series (Dynamic Island)
-  "393,852": {
-    top: 59,
-    bottom: 34
-  },
-  // 14 Pro, 15, 15 Pro, 16, 16 Pro
-  "430,932": {
-    top: 59,
-    bottom: 34
-  },
-  // 14 Pro Max, 15 Plus, 15 Pro Max, 16 Plus, 16 Pro Max
-  // iPhone 12, 12 Pro, 13, 13 Pro, 14
-  "390,844": {
-    top: 47,
-    bottom: 34
-  },
-  // iPhone 12 Pro Max, 13 Pro Max, 14 Plus
-  "428,926": {
-    top: 47,
-    bottom: 34
-  },
-  // iPhone 12 mini, 13 mini
-  "375,812": {
-    top: 50,
-    bottom: 34
-  },
-  // iPhone XR, 11
-  "414,896": {
-    top: 48,
-    bottom: 34
-  }
-};
-const getPureJSSafeAreaInsets = () => {
-  if (_reactNative.Platform.OS === "android") {
-    const androidVersion = _reactNative.Platform.Version;
-    const statusBarHeight = _reactNative.StatusBar.currentHeight || 0;
-    const hasGestureNav = androidVersion >= 29;
-    return {
-      top: statusBarHeight,
-      bottom: hasGestureNav ? 20 : 0,
-      left: 0,
-      right: 0
-    };
-  }
-
-  // iOS
-  const {
-    width,
-    height
-  } = _reactNative.Dimensions.get("window");
-  const dimensionKey = `${width},${height}`;
-  const deviceInsets = iPhoneDimensionMap[dimensionKey];
-  if (deviceInsets) {
-    return {
-      ...deviceInsets,
-      left: 0,
-      right: 0
-    };
-  }
-
-  // Default for older iPhones without notch
-  return {
-    top: 20,
-    // Standard status bar
-    bottom: 0,
-    left: 0,
-    right: 0
-  };
-};
-const useSafeAreaInsets = () => {
-  const [insets, setInsets] = (0, _react.useState)(() => getPureJSSafeAreaInsets());
-  (0, _react.useEffect)(() => {
-    const updateInsets = () => {
-      setInsets(getPureJSSafeAreaInsets());
-    };
-    const subscription = _reactNative.Dimensions.addEventListener("change", updateInsets);
-    return () => {
-      subscription?.remove();
-    };
-  }, []);
-  return insets;
-};
-
-// ============================================================================
-// DEFAULT THEME - Simple, customizable color palette
-// ============================================================================
-const defaultTheme = {
-  background: "rgba(8, 12, 21, 0.98)",
-  panel: "rgba(16, 22, 35, 0.98)",
-  border: "#00B8E666",
-  primary: "#FFFFFF",
-  secondary: "#B8BFC9",
-  muted: "#7A8599",
-  success: "#4AFF9F",
-  error: "#FF5252",
-  info: "#00B8E6"
-};
-
-// ============================================================================
-// TYPE DEFINITIONS - Interface contracts for the modal
-// ============================================================================
-
-// ============================================================================
-// ICON COMPONENTS - Visual indicators for modal controls
-// ============================================================================
-
-/**
- * DragIndicator - Visual feedback for draggable areas
- */
-const DragIndicator = /*#__PURE__*/(0, _react.memo)(function DragIndicator({
-  isResizing,
-  mode,
-  hasCustomContent = false,
-  theme = defaultTheme
-}) {
-  const styles = createDynamicStyles(theme);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [styles.dragIndicatorContainer, hasCustomContent && styles.dragIndicatorContainerCustom],
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.dragIndicator, mode === "floating" && styles.floatingDragIndicator, isResizing && styles.dragIndicatorActive]
-    }), isResizing && mode === "bottomSheet" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.resizeGripContainer,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.resizeGripLine
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.resizeGripLine
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.resizeGripLine
-      })]
-    })]
-  });
-});
-
-/**
- * CornerHandle - Resize handle for floating mode corners
- */
-const CornerHandle = /*#__PURE__*/(0, _react.memo)(function CornerHandle({
-  isActive,
-  theme = defaultTheme
-}) {
-  const styles = createDynamicStyles(theme);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: [styles.cornerHandle],
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.handler, isActive && styles.handlerActive]
-    })
-  });
-});
-
-/**
- * ModalHeader - Header bar with title, controls, and drag area
- */
-
-const ModalHeader = /*#__PURE__*/(0, _react.memo)(function ModalHeader({
-  header,
-  onClose,
-  onToggleMode,
-  isResizing,
-  mode,
-  panHandlers,
-  theme = defaultTheme
-}) {
-  const styles = createDynamicStyles(theme);
-  const lastTapRef = (0, _react.useRef)(0);
-  const tapCountRef = (0, _react.useRef)(0);
-  const tapTimeoutRef = (0, _react.useRef)(null);
-  const handleHeaderTap = (0, _react.useCallback)(() => {
-    const now = Date.now();
-    const timeSinceLastTap = now - lastTapRef.current;
-    if (timeSinceLastTap > 500) {
-      tapCountRef.current = 0;
-    }
-    tapCountRef.current++;
-    lastTapRef.current = now;
-    if (tapTimeoutRef.current) {
-      clearTimeout(tapTimeoutRef.current);
-    }
-    tapTimeoutRef.current = setTimeout(() => {
-      if (tapCountRef.current === 2) {
-        onToggleMode();
-      } else if (tapCountRef.current >= 3) {
-        onClose();
-      }
-      tapCountRef.current = 0;
-    }, 300);
-  }, [onToggleMode, onClose]);
-  (0, _react.useEffect)(() => {
-    return () => {
-      if (tapTimeoutRef.current) {
-        clearTimeout(tapTimeoutRef.current);
-      }
-    };
-  }, []);
-  const headerProps = panHandlers ? panHandlers : {};
-  const shouldHandleTap = !!panHandlers;
-
-  // If custom content is provided and it's a complete replacement
-  if (header?.customContent) {
-    const headerContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.headerInner,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DragIndicator, {
-        isResizing: isResizing,
-        mode: mode,
-        hasCustomContent: true,
-        theme: theme
-      }), header.customContent]
-    });
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.header,
-      ...headerProps,
-      children: shouldHandleTap ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
-        onPress: handleHeaderTap,
-        children: headerContent
-      }) : headerContent
-    });
-  }
-  const headerContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.headerInner,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DragIndicator, {
-      isResizing: isResizing,
-      mode: mode,
-      theme: theme
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.headerContent,
-      children: [header?.title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.headerTitle,
-        children: header.title
-      }), header?.subtitle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.headerSubtitle,
-        children: header.subtitle
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.headerHintText,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.hintText,
-        children: "Double tap: Toggle \u2022 Triple tap: Close"
-      })
-    })]
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: [styles.header, mode === "floating" && styles.floatingModeHeader],
-    ...headerProps,
-    children: shouldHandleTap ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
-      onPress: handleHeaderTap,
-      children: headerContent
-    }) : headerContent
-  });
-});
-
-// ============================================================================
-// DRAGGABLE HEADER - For floating mode
-// ============================================================================
-
-const DraggableHeader = /*#__PURE__*/(0, _react.memo)(function DraggableHeader({
-  children,
-  position,
-  onDragStart,
-  onDragEnd,
-  onTap,
-  containerBounds = _reactNative.Dimensions.get("window"),
-  elementSize = {
-    width: 100,
-    height: 50
-  },
-  minPosition = {
-    x: 0,
-    y: 0
-  },
-  style,
-  enabled = true
-}) {
-  const isDraggingRef = (0, _react.useRef)(false);
-  const dragDistanceRef = (0, _react.useRef)(0);
-  const touchOffsetRef = (0, _react.useRef)({
-    x: 0,
-    y: 0
-  });
-  const panResponder = (0, _react.useMemo)(() => _reactNative.PanResponder.create({
-    onStartShouldSetPanResponder: () => enabled,
-    onMoveShouldSetPanResponder: (_, g) => enabled && (Math.abs(g.dx) > 1 || Math.abs(g.dy) > 1),
-    onPanResponderTerminationRequest: () => false,
-    onPanResponderGrant: evt => {
-      isDraggingRef.current = false;
-      dragDistanceRef.current = 0;
-      touchOffsetRef.current = {
-        x: evt.nativeEvent.locationX,
-        y: evt.nativeEvent.locationY
-      };
-      position.stopAnimation(({
-        x,
-        y
-      }) => {
-        position.setOffset({
-          x,
-          y
-        });
-        position.setValue({
-          x: 0,
-          y: 0
-        });
-      });
-    },
-    onPanResponderMove: (evt, gestureState) => {
-      const totalDistance = Math.abs(gestureState.dx) + Math.abs(gestureState.dy);
-      dragDistanceRef.current = totalDistance;
-      if (totalDistance > 5 && !isDraggingRef.current) {
-        isDraggingRef.current = true;
-        onDragStart?.();
-      }
-      const x = evt.nativeEvent.pageX - touchOffsetRef.current.x;
-      const y = evt.nativeEvent.pageY - touchOffsetRef.current.y;
-      position.setOffset({
-        x: 0,
-        y: 0
-      });
-      position.setValue({
-        x,
-        y
-      });
-    },
-    onPanResponderRelease: () => {
-      const currentX = Number(JSON.stringify(position.x));
-      const currentY = Number(JSON.stringify(position.y));
-      if (dragDistanceRef.current <= 5 && !isDraggingRef.current) {
-        position.setOffset({
-          x: 0,
-          y: 0
-        });
-        position.setValue({
-          x: currentX,
-          y: currentY
-        });
-        onTap?.();
-        return;
-      }
-      const clampedX = Math.max(minPosition.x, Math.min(currentX, containerBounds.width - elementSize.width));
-      const clampedY = Math.max(minPosition.y, Math.min(currentY, containerBounds.height - elementSize.height));
-      position.setValue({
-        x: clampedX,
-        y: clampedY
-      });
-      onDragEnd?.({
-        x: clampedX,
-        y: clampedY
-      });
-      isDraggingRef.current = false;
-    },
-    onPanResponderTerminate: () => {
-      isDraggingRef.current = false;
-    }
-  }), [enabled, position, onDragStart, onDragEnd, onTap, containerBounds, elementSize, minPosition]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: style,
-    ...panResponder.panHandlers,
-    children: children
-  });
-});
-
-// ============================================================================
-// MAIN COMPONENT - Optimized for 60FPS with transforms and interpolation
-// ============================================================================
-const BottomSheetComponent = ({
-  visible,
-  onClose,
-  children,
-  header,
-  styles: customStyles = {},
-  minHeight = MIN_HEIGHT,
-  maxHeight,
-  initialHeight = DEFAULT_HEIGHT,
-  initialMode = "bottomSheet",
-  onModeChange,
-  footer,
-  footerHeight = 0,
-  onBack,
-  theme: customTheme,
-  background = true
-}) => {
-  const theme = {
-    ...defaultTheme,
-    ...customTheme
-  };
-  const styles = (0, _react.useMemo)(() => createDynamicStyles(theme), [theme]);
-  const insets = useSafeAreaInsets();
-  const [mode, setMode] = (0, _react.useState)(initialMode);
-  const [isResizing, setIsResizing] = (0, _react.useState)(false);
-  const [isDragging, setIsDragging] = (0, _react.useState)(false);
-  const [panelHeight, setPanelHeight] = (0, _react.useState)(initialHeight);
-  const [dimensions, setDimensions] = (0, _react.useState)({
-    width: FLOATING_WIDTH,
-    height: FLOATING_HEIGHT,
-    top: (SCREEN.height - FLOATING_HEIGHT) / 2,
-    left: (SCREEN.width - FLOATING_WIDTH) / 2
-  });
-  const [containerBounds] = (0, _react.useState)({
-    width: SCREEN.width,
-    height: SCREEN.height
-  });
-
-  // ============================================================================
-  // ANIMATED VALUES - All using native driver
-  // ============================================================================
-  const visibilityProgress = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
-  const bottomSheetTranslateY = (0, _react.useRef)(new _reactNative.Animated.Value(SCREEN.height)).current;
-  const animatedBottomPosition = (0, _react.useRef)(new _reactNative.Animated.Value(initialHeight)).current;
-  const currentHeightRef = (0, _react.useRef)(initialHeight);
-
-  // Floating mode animations
-  const floatingPosition = (0, _react.useRef)(new _reactNative.Animated.ValueXY({
-    x: (SCREEN.width - FLOATING_WIDTH) / 2,
-    y: (SCREEN.height - FLOATING_HEIGHT) / 2
-  })).current;
-  const animatedWidth = (0, _react.useRef)(new _reactNative.Animated.Value(FLOATING_WIDTH)).current;
-  const animatedFloatingHeight = (0, _react.useRef)(new _reactNative.Animated.Value(FLOATING_HEIGHT)).current;
-
-  // Refs for resize handles
-  const currentDimensionsRef = (0, _react.useRef)(dimensions);
-  const startDimensionsRef = (0, _react.useRef)(dimensions);
-
-  // Update refs when dimensions change
-  (0, _react.useEffect)(() => {
-    currentDimensionsRef.current = dimensions;
-  }, [dimensions]);
-
-  // Cleanup on unmount
-  (0, _react.useEffect)(() => {
-    return () => {
-      visibilityProgress.stopAnimation();
-      bottomSheetTranslateY.stopAnimation();
-      animatedBottomPosition.stopAnimation();
-      floatingPosition.stopAnimation();
-      animatedWidth.stopAnimation();
-      animatedFloatingHeight.stopAnimation();
-      visibilityProgress.setValue(0);
-      bottomSheetTranslateY.setValue(SCREEN.height);
-      animatedBottomPosition.setValue(initialHeight);
-      currentHeightRef.current = initialHeight;
-    };
-  }, []);
-
-  // ============================================================================
-  // INTERPOLATIONS - All math done natively!
-  // ============================================================================
-  const modalOpacity = visibilityProgress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 1],
-    extrapolate: "clamp"
-  });
-  const effectiveMaxHeight = maxHeight || SCREEN.height - insets.top;
-
-  // Mode toggle handler
-  const toggleMode = (0, _react.useCallback)(() => {
-    setIsDragging(false);
-    setIsResizing(false);
-    const newMode = mode === "bottomSheet" ? "floating" : "bottomSheet";
-    setMode(newMode);
-    onModeChange?.(newMode);
-  }, [mode, onModeChange]);
-  (0, _react.useEffect)(() => {
-    setIsDragging(false);
-    setIsResizing(false);
-  }, [mode]);
-
-  // ============================================================================
-  // EFFECT: Visibility Animations - All using native driver!
-  // ============================================================================
-  (0, _react.useEffect)(() => {
-    let openAnimation = null;
-    let closeAnimation = null;
-    if (visible) {
-      bottomSheetTranslateY.setValue(SCREEN.height);
-      visibilityProgress.setValue(0);
-      if (mode === "bottomSheet") {
-        openAnimation = _reactNative.Animated.parallel([_reactNative.Animated.spring(bottomSheetTranslateY, {
-          toValue: 0,
-          tension: 180,
-          friction: 22,
-          useNativeDriver: true
-        }), _reactNative.Animated.timing(visibilityProgress, {
-          toValue: 1,
-          duration: 200,
-          useNativeDriver: true
-        })]);
-        openAnimation.start();
-      } else {
-        openAnimation = _reactNative.Animated.timing(visibilityProgress, {
-          toValue: 1,
-          duration: 200,
-          useNativeDriver: true
-        });
-        openAnimation.start();
-      }
-    } else {
-      if (mode === "bottomSheet") {
-        closeAnimation = _reactNative.Animated.parallel([_reactNative.Animated.spring(bottomSheetTranslateY, {
-          toValue: SCREEN.height,
-          tension: 180,
-          friction: 22,
-          useNativeDriver: true
-        }), _reactNative.Animated.timing(visibilityProgress, {
-          toValue: 0,
-          duration: 200,
-          useNativeDriver: true
-        })]);
-        closeAnimation.start();
-      } else {
-        closeAnimation = _reactNative.Animated.timing(visibilityProgress, {
-          toValue: 0,
-          duration: 200,
-          useNativeDriver: true
-        });
-        closeAnimation.start();
-      }
-    }
-    return () => {
-      if (openAnimation) openAnimation.stop();
-      if (closeAnimation) closeAnimation.stop();
-    };
-  }, [visible, mode, visibilityProgress, bottomSheetTranslateY]);
-
-  // ============================================================================
-  // OPTIMIZED PAN RESPONDER: Bottom Sheet Resize
-  // ============================================================================
-  const headerTouchOffsetRef = (0, _react.useRef)(0);
-  const bottomSheetPanResponder = (0, _react.useMemo)(() => _reactNative.PanResponder.create({
-    onStartShouldSetPanResponder: () => mode === "bottomSheet",
-    onMoveShouldSetPanResponder: (evt, gestureState) => mode === "bottomSheet" && Math.abs(gestureState.dy) > 3,
-    onPanResponderTerminationRequest: () => false,
-    onPanResponderGrant: evt => {
-      setIsResizing(true);
-      headerTouchOffsetRef.current = evt.nativeEvent.locationY || 0;
-      animatedBottomPosition.stopAnimation(val => {
-        currentHeightRef.current = val;
-      });
-      bottomSheetTranslateY.stopAnimation();
-    },
-    onPanResponderMove: evt => {
-      const sheetTop = evt.nativeEvent.pageY - headerTouchOffsetRef.current;
-      let targetHeight = SCREEN.height - sheetTop;
-      targetHeight = Math.max(minHeight, Math.min(targetHeight, effectiveMaxHeight));
-      animatedBottomPosition.setValue(targetHeight);
-      currentHeightRef.current = targetHeight;
-    },
-    onPanResponderRelease: (evt, gestureState) => {
-      setIsResizing(false);
-      const finalHeight = currentHeightRef.current;
-      const shouldClose = gestureState.vy > 0.8 && gestureState.dy > 50 || gestureState.dy > 150 && finalHeight <= minHeight;
-      if (shouldClose) {
-        _reactNative.Animated.parallel([_reactNative.Animated.timing(visibilityProgress, {
-          toValue: 0,
-          duration: 200,
-          useNativeDriver: true
-        }), _reactNative.Animated.spring(bottomSheetTranslateY, {
-          toValue: SCREEN.height,
-          tension: 180,
-          friction: 22,
-          useNativeDriver: true
-        })]).start(() => onClose());
-        return;
-      }
-      setPanelHeight(finalHeight);
-    },
-    onPanResponderTerminate: () => {
-      setIsResizing(false);
-    }
-  }), [mode, minHeight, effectiveMaxHeight, animatedBottomPosition, bottomSheetTranslateY, visibilityProgress, onClose]);
-
-  // ============================================================================
-  // CREATE RESIZE HANDLER: For 4-corner resize in floating mode
-  // ============================================================================
-  const createResizeHandler = (0, _react.useCallback)(corner => {
-    let didResize = false;
-    return _reactNative.PanResponder.create({
-      onStartShouldSetPanResponder: () => mode === "floating",
-      onMoveShouldSetPanResponder: () => mode === "floating",
-      onPanResponderGrant: () => {
-        didResize = false;
-        const currentDims = currentDimensionsRef.current;
-        floatingPosition.stopAnimation(({
-          x,
-          y
-        }) => {
-          floatingPosition.setValue({
-            x,
-            y
-          });
-        });
-        setIsResizing(true);
-        startDimensionsRef.current = {
-          ...currentDims
-        };
-      },
-      onPanResponderMove: (_evt, gestureState) => {
-        const {
-          dx,
-          dy
-        } = gestureState;
-        if (Math.abs(dx) < 0.5 && Math.abs(dy) < 0.5) return;
-        didResize = true;
-        const minLeft = Math.max(0, insets.left || 0);
-        const maxRight = containerBounds.width - Math.max(0, insets.right || 0);
-        const minTop = Math.max(0, insets.top || 0);
-        const maxBottom = containerBounds.height - Math.max(0, insets.bottom || 0);
-        const start = startDimensionsRef.current;
-        const startRight = start.left + start.width;
-        const startBottom = start.top + start.height;
-        let left = start.left;
-        let top = start.top;
-        let right = startRight;
-        let bottom = startBottom;
-        switch (corner) {
-          case "topLeft":
-            {
-              const newLeft = Math.max(minLeft, Math.min(start.left + dx, startRight - FLOATING_MIN_WIDTH));
-              const newTop = Math.max(minTop, Math.min(start.top + dy, startBottom - FLOATING_MIN_HEIGHT));
-              left = newLeft;
-              top = newTop;
-              right = startRight;
-              bottom = startBottom;
-              break;
-            }
-          case "topRight":
-            {
-              const newRight = Math.min(maxRight, Math.max(startRight + dx, start.left + FLOATING_MIN_WIDTH));
-              const newTop = Math.max(minTop, Math.min(start.top + dy, startBottom - FLOATING_MIN_HEIGHT));
-              left = start.left;
-              top = newTop;
-              right = newRight;
-              bottom = startBottom;
-              break;
-            }
-          case "bottomLeft":
-            {
-              const newLeft = Math.max(minLeft, Math.min(start.left + dx, startRight - FLOATING_MIN_WIDTH));
-              const newBottom = Math.min(maxBottom, Math.max(startBottom + dy, start.top + FLOATING_MIN_HEIGHT));
-              left = newLeft;
-              top = start.top;
-              right = startRight;
-              bottom = newBottom;
-              break;
-            }
-          case "bottomRight":
-            {
-              const newRight = Math.min(maxRight, Math.max(startRight + dx, start.left + FLOATING_MIN_WIDTH));
-              const newBottom = Math.min(maxBottom, Math.max(startBottom + dy, start.top + FLOATING_MIN_HEIGHT));
-              left = start.left;
-              top = start.top;
-              right = newRight;
-              bottom = newBottom;
-              break;
-            }
-        }
-        const updatedWidth = Math.max(FLOATING_MIN_WIDTH, right - left);
-        const updatedHeight = Math.max(FLOATING_MIN_HEIGHT, bottom - top);
-        setDimensions({
-          width: updatedWidth,
-          height: updatedHeight,
-          left,
-          top
-        });
-        animatedWidth.setValue(updatedWidth);
-        animatedFloatingHeight.setValue(updatedHeight);
-        floatingPosition.setValue({
-          x: left,
-          y: top
-        });
-        currentDimensionsRef.current = {
-          width: updatedWidth,
-          height: updatedHeight,
-          left,
-          top
-        };
-      },
-      onPanResponderRelease: () => {
-        setIsResizing(false);
-        if (corner === "topRight" && !didResize) {
-          onClose();
-          return;
-        }
-        if (corner === "topLeft" && !didResize && onBack) {
-          onBack();
-          return;
-        }
-        didResize = false;
-        setDimensions(currentDimensionsRef.current);
-      },
-      onPanResponderTerminate: () => {
-        setIsResizing(false);
-        didResize = false;
-      }
-    });
-  }, [mode, containerBounds, insets.left, insets.right, insets.top, insets.bottom, floatingPosition, animatedWidth, animatedFloatingHeight, onClose, onBack]);
-  const resizeHandlers = (0, _react.useMemo)(() => {
-    return {
-      topLeft: createResizeHandler("topLeft"),
-      topRight: createResizeHandler("topRight"),
-      bottomLeft: createResizeHandler("bottomLeft"),
-      bottomRight: createResizeHandler("bottomRight")
-    };
-  }, [createResizeHandler]);
-
-  // ============================================================================
-  // Floating Mode Drag Handlers
-  // ============================================================================
-  const handleFloatingDragStart = (0, _react.useCallback)(() => {
-    setIsDragging(true);
-  }, []);
-  const handleFloatingDragEnd = (0, _react.useCallback)(finalPosition => {
-    setIsDragging(false);
-    const currentDims = currentDimensionsRef.current;
-    const newDimensions = {
-      ...currentDims,
-      left: finalPosition.x,
-      top: finalPosition.y
-    };
-    setDimensions(newDimensions);
-  }, []);
-  const lastTapRef = (0, _react.useRef)(0);
-  const tapCountRef = (0, _react.useRef)(0);
-  const tapTimeoutRef = (0, _react.useRef)(null);
-  const handleFloatingTap = (0, _react.useCallback)(() => {
-    const now = Date.now();
-    const timeSinceLastTap = now - lastTapRef.current;
-    if (timeSinceLastTap > 500) {
-      tapCountRef.current = 0;
-    }
-    tapCountRef.current++;
-    lastTapRef.current = now;
-    if (tapTimeoutRef.current) {
-      clearTimeout(tapTimeoutRef.current);
-    }
-    tapTimeoutRef.current = setTimeout(() => {
-      if (tapCountRef.current === 2) {
-        toggleMode();
-      } else if (tapCountRef.current >= 3) {
-        onClose();
-      }
-      tapCountRef.current = 0;
-    }, 300);
-  }, [toggleMode, onClose]);
-  (0, _react.useEffect)(() => {
-    return () => {
-      if (tapTimeoutRef.current) {
-        clearTimeout(tapTimeoutRef.current);
-      }
-    };
-  }, []);
-
-  // ============================================================================
-  // RENDER: Modal UI with transform-based animations
-  // ============================================================================
-
-  if (!visible) {
-    return null;
-  }
-
-  // Render floating mode
-  if (mode === "floating") {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
-      style: [styles.floatingModal, {
-        width: dimensions.width,
-        height: dimensions.height,
-        opacity: modalOpacity,
-        transform: [{
-          translateX: floatingPosition.x
-        }, {
-          translateY: floatingPosition.y
-        }]
-      }, (isDragging || isResizing) && styles.floatingModalDragging, customStyles.container],
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DraggableHeader, {
-        position: floatingPosition,
-        onDragStart: handleFloatingDragStart,
-        onDragEnd: handleFloatingDragEnd,
-        onTap: handleFloatingTap,
-        containerBounds: containerBounds,
-        elementSize: dimensions,
-        minPosition: {
-          x: 0,
-          y: insets.top
-        },
-        style: styles.floatingHeader,
-        enabled: mode === "floating" && !isResizing,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ModalHeader, {
-          header: header,
-          onClose: onClose,
-          onToggleMode: toggleMode,
-          isResizing: isDragging || isResizing,
-          mode: mode,
-          theme: theme
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: [styles.content, customStyles.content],
-        children: [background ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolBackground, {}) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
-          style: {
-            flex: 1
-          },
-          contentContainerStyle: {
-            flexGrow: 1,
-            paddingBottom: footerHeight
-          },
-          showsVerticalScrollIndicator: true,
-          nestedScrollEnabled: true,
-          children: children
-        }), footer ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: styles.footerContainer,
-          children: footer
-        }) : null]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        ...resizeHandlers.topLeft.panHandlers,
-        style: [styles.cornerHandleWrapper, {
-          top: 4,
-          left: 4
-        }],
-        hitSlop: {
-          top: 8,
-          left: 8,
-          right: 8,
-          bottom: 8
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CornerHandle, {
-          isActive: isDragging || isResizing,
-          theme: theme
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        ...resizeHandlers.topRight.panHandlers,
-        style: [styles.cornerHandleWrapper, {
-          top: 4,
-          right: 4
-        }],
-        hitSlop: {
-          top: 8,
-          left: 8,
-          right: 8,
-          bottom: 8
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CornerHandle, {
-          isActive: isDragging || isResizing,
-          theme: theme
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        ...resizeHandlers.bottomLeft.panHandlers,
-        style: [styles.cornerHandleWrapper, {
-          bottom: 4,
-          left: 4
-        }],
-        hitSlop: {
-          top: 8,
-          left: 8,
-          right: 8,
-          bottom: 8
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CornerHandle, {
-          isActive: isDragging || isResizing,
-          theme: theme
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        ...resizeHandlers.bottomRight.panHandlers,
-        style: [styles.cornerHandleWrapper, {
-          bottom: 4,
-          right: 4
-        }],
-        hitSlop: {
-          top: 8,
-          left: 8,
-          right: 8,
-          bottom: 8
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CornerHandle, {
-          isActive: isDragging || isResizing,
-          theme: theme
-        })
-      })]
-    });
-  }
-
-  // Render bottom sheet mode
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: styles.fullScreenContainer,
-    pointerEvents: "box-none",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-      style: [styles.bottomSheetWrapper, {
-        opacity: modalOpacity,
-        transform: [{
-          translateY: bottomSheetTranslateY
-        }]
-      }],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
-        style: [styles.bottomSheet, customStyles.container, {
-          height: animatedBottomPosition
-        }],
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ModalHeader, {
-          header: header,
-          onClose: onClose,
-          onToggleMode: toggleMode,
-          isResizing: isResizing,
-          mode: mode,
-          panHandlers: bottomSheetPanResponder.panHandlers,
-          theme: theme
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: [styles.content, customStyles.content],
-          children: [background ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolBackground, {}) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
-            style: {
-              flex: 1
-            },
-            contentContainerStyle: {
-              flexGrow: 1,
-              paddingBottom: footerHeight
-            },
-            showsVerticalScrollIndicator: true,
-            nestedScrollEnabled: true,
-            children: children
-          }), footer ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: styles.footerContainer,
-            children: footer
-          }) : null]
-        })]
-      })
-    })
-  });
-};
-
-// ============================================================================
-// DYNAMIC STYLES - Creates styles based on theme
-// ============================================================================
-const createDynamicStyles = theme => _reactNative.StyleSheet.create({
-  fullScreenContainer: {
-    ..._sharedUi.absoluteFill,
-    zIndex: 1000
-  },
-  bottomSheetWrapper: {
-    position: "absolute",
-    bottom: 0,
-    left: 0,
-    right: 0
-  },
-  bottomSheet: {
-    backgroundColor: theme.panel,
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
-    borderWidth: 1,
-    borderColor: theme.border,
-    shadowColor: theme.info,
-    shadowOffset: {
-      width: 0,
-      height: -4
-    },
-    shadowOpacity: 0.3,
-    shadowRadius: 12,
-    elevation: 20
-  },
-  floatingModal: {
-    position: "absolute",
-    backgroundColor: theme.panel,
-    borderRadius: 16,
-    borderWidth: 1,
-    borderColor: theme.border,
-    shadowColor: theme.info,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.5,
-    shadowRadius: 20,
-    elevation: 24,
-    zIndex: 1000,
-    width: FLOATING_WIDTH,
-    height: FLOATING_HEIGHT
-  },
-  floatingModalDragging: {
-    borderColor: theme.success,
-    borderWidth: 2,
-    shadowColor: theme.success + "99",
-    shadowOpacity: 0.8,
-    shadowRadius: 12
-  },
-  header: {
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
-    backgroundColor: theme.panel,
-    minHeight: 56,
-    borderWidth: 1,
-    borderColor: theme.border,
-    borderBottomWidth: 1,
-    borderBottomColor: "rgba(255, 255, 255, 0.1)"
-  },
-  floatingHeader: {
-    borderTopLeftRadius: 14,
-    borderTopRightRadius: 14
-  },
-  floatingModeHeader: {
-    borderTopLeftRadius: 14,
-    borderTopRightRadius: 14
-  },
-  headerInner: {
-    flex: 1,
-    justifyContent: "center"
-  },
-  dragIndicatorContainer: {
-    alignItems: "center",
-    paddingVertical: 8,
-    backgroundColor: "transparent"
-  },
-  dragIndicatorContainerCustom: {
-    paddingTop: 6,
-    paddingBottom: 2,
-    backgroundColor: "transparent"
-  },
-  dragIndicator: {
-    width: 40,
-    height: 3,
-    backgroundColor: theme.info + "99",
-    borderRadius: 2,
-    shadowColor: theme.info,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.8,
-    shadowRadius: 4
-  },
-  floatingDragIndicator: {
-    width: 50,
-    height: 5,
-    backgroundColor: theme.muted
-  },
-  dragIndicatorActive: {
-    backgroundColor: theme.success,
-    width: 40
-  },
-  resizeGripContainer: {
-    position: "absolute",
-    flexDirection: "row",
-    gap: 2,
-    marginTop: 12
-  },
-  resizeGripLine: {
-    width: 12,
-    height: 1,
-    backgroundColor: theme.success,
-    opacity: 0.6
-  },
-  headerContent: {
-    paddingHorizontal: 16,
-    alignItems: "center"
-  },
-  headerTitle: {
-    fontSize: 16,
-    fontWeight: "600",
-    color: theme.primary
-  },
-  headerSubtitle: {
-    fontSize: 12,
-    color: theme.secondary,
-    paddingTop: 4
-  },
-  headerHintText: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    justifyContent: "center",
-    alignItems: "center"
-  },
-  hintText: {
-    fontSize: 10,
-    color: theme.muted,
-    fontStyle: "italic"
-  },
-  content: {
-    flex: 1,
-    backgroundColor: theme.background,
-    borderBottomLeftRadius: 16,
-    borderBottomRightRadius: 16,
-    overflow: "hidden"
-  },
-  cornerHandle: {
-    position: "absolute",
-    zIndex: 1
-  },
-  cornerHandleWrapper: {
-    position: "absolute",
-    width: 30,
-    height: 30,
-    zIndex: 1000
-  },
-  handler: {
-    width: 20,
-    height: 20,
-    backgroundColor: "transparent",
-    borderRadius: 10,
-    borderWidth: 0,
-    borderColor: "transparent"
-  },
-  handlerActive: {
-    backgroundColor: theme.success + "1A",
-    borderColor: theme.success,
-    borderWidth: 2,
-    shadowColor: theme.success + "99",
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 1,
-    shadowRadius: 8
-  },
-  footerContainer: {
-    position: "absolute",
-    left: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: theme.background,
-    borderBottomLeftRadius: 16,
-    borderBottomRightRadius: 16
-  }
-});
-
-// ============================================================================
-// EXPORT - Memoized modal component for optimal performance
-// ============================================================================
-const BottomSheet = exports.BottomSheet = /*#__PURE__*/(0, _react.memo)(BottomSheetComponent);
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.BottomSheet=void 0;var _react=require("react");var _reactNative=require("react-native");var _sharedUi=require("@buoy-gg/shared-ui");var _jsxRuntime=require("react/jsx-runtime");const SCREEN=_reactNative.Dimensions.get("window");const MIN_HEIGHT=100;const DEFAULT_HEIGHT=400;const FLOATING_WIDTH=380;const FLOATING_HEIGHT=500;const FLOATING_MIN_WIDTH=SCREEN.width*.25;const FLOATING_MIN_HEIGHT=80;const iPhoneDimensionMap={"393,852":{top:59,bottom:34},"430,932":{top:59,bottom:34},"390,844":{top:47,bottom:34},"428,926":{top:47,bottom:34},"375,812":{top:50,bottom:34},"414,896":{top:48,bottom:34}};const getPureJSSafeAreaInsets=()=>{if(_reactNative.Platform.OS==="android"){const p=_reactNative.Platform.Version;const s=_reactNative.StatusBar.currentHeight||0;const x=p>=29;return{top:s,bottom:x?20:0,left:0,right:0}}const{width:e,height:o}=_reactNative.Dimensions.get("window");const r=`${e},${o}`;const c=iPhoneDimensionMap[r];if(c){return{...c,left:0,right:0}}return{top:20,bottom:0,left:0,right:0}};const useSafeAreaInsets=()=>{const[e,o]=(0,_react.useState)(()=>getPureJSSafeAreaInsets());(0,_react.useEffect)(()=>{const r=()=>{o(getPureJSSafeAreaInsets())};const c=_reactNative.Dimensions.addEventListener("change",r);return()=>{c?.remove()}},[]);return e};const defaultTheme={background:"rgba(8, 12, 21, 0.98)",panel:"rgba(16, 22, 35, 0.98)",border:"#00B8E666",primary:"#FFFFFF",secondary:"#B8BFC9",muted:"#7A8599",success:"#4AFF9F",error:"#FF5252",info:"#00B8E6"};const DragIndicator=(0,_react.memo)(function e({isResizing:o,mode:r,hasCustomContent:c=false,theme:p=defaultTheme}){const s=createDynamicStyles(p);return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[s.dragIndicatorContainer,c&&s.dragIndicatorContainerCustom],children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[s.dragIndicator,r==="floating"&&s.floatingDragIndicator,o&&s.dragIndicatorActive]}),o&&r==="bottomSheet"&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:s.resizeGripContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:s.resizeGripLine}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:s.resizeGripLine}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:s.resizeGripLine})]})]})});const CornerHandle=(0,_react.memo)(function e({isActive:o,theme:r=defaultTheme}){const c=createDynamicStyles(r);return(0,_jsxRuntime.jsx)(_reactNative.View,{style:[c.cornerHandle],children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:[c.handler,o&&c.handlerActive]})})});const ModalHeader=(0,_react.memo)(function e({header:o,onClose:r,onToggleMode:c,isResizing:p,mode:s,panHandlers:x,theme:m=defaultTheme}){const h=createDynamicStyles(m);const j=(0,_react.useRef)(0);const g=(0,_react.useRef)(0);const f=(0,_react.useRef)(null);const w=(0,_react.useCallback)(()=>{const t=Date.now();const d=t-j.current;if(d>500){g.current=0}g.current++;j.current=t;if(f.current){clearTimeout(f.current)}f.current=setTimeout(()=>{if(g.current===2){c()}else if(g.current>=3){r()}g.current=0},300)},[c,r]);(0,_react.useEffect)(()=>{return()=>{if(f.current){clearTimeout(f.current)}}},[]);const S=x?x:{};const A=!!x;if(o?.customContent){const t=(0,_jsxRuntime.jsxs)(_reactNative.View,{style:h.headerInner,children:[(0,_jsxRuntime.jsx)(DragIndicator,{isResizing:p,mode:s,hasCustomContent:true,theme:m}),o.customContent]});return(0,_jsxRuntime.jsx)(_reactNative.View,{style:h.header,...S,children:A?(0,_jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback,{onPress:w,children:t}):t})}const i=(0,_jsxRuntime.jsxs)(_reactNative.View,{style:h.headerInner,children:[(0,_jsxRuntime.jsx)(DragIndicator,{isResizing:p,mode:s,theme:m}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:h.headerContent,children:[o?.title&&(0,_jsxRuntime.jsx)(_reactNative.Text,{style:h.headerTitle,children:o.title}),o?.subtitle&&(0,_jsxRuntime.jsx)(_reactNative.Text,{style:h.headerSubtitle,children:o.subtitle})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:h.headerHintText,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:h.hintText,children:"Double tap: Toggle \u2022 Triple tap: Close"})})]});return(0,_jsxRuntime.jsx)(_reactNative.View,{style:[h.header,s==="floating"&&h.floatingModeHeader],...S,children:A?(0,_jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback,{onPress:w,children:i}):i})});const DraggableHeader=(0,_react.memo)(function e({children:o,position:r,onDragStart:c,onDragEnd:p,onTap:s,containerBounds:x=_reactNative.Dimensions.get("window"),elementSize:m={width:100,height:50},minPosition:h={x:0,y:0},style:j,enabled:g=true}){const f=(0,_react.useRef)(false);const w=(0,_react.useRef)(0);const S=(0,_react.useRef)({x:0,y:0});const A=(0,_react.useMemo)(()=>_reactNative.PanResponder.create({onStartShouldSetPanResponder:()=>g,onMoveShouldSetPanResponder:(i,t)=>g&&(Math.abs(t.dx)>1||Math.abs(t.dy)>1),onPanResponderTerminationRequest:()=>false,onPanResponderGrant:i=>{f.current=false;w.current=0;S.current={x:i.nativeEvent.locationX,y:i.nativeEvent.locationY};r.stopAnimation(({x:t,y:d})=>{r.setOffset({x:t,y:d});r.setValue({x:0,y:0})})},onPanResponderMove:(i,t)=>{const d=Math.abs(t.dx)+Math.abs(t.dy);w.current=d;if(d>5&&!f.current){f.current=true;c?.()}const l=i.nativeEvent.pageX-S.current.x;const K=i.nativeEvent.pageY-S.current.y;r.setOffset({x:0,y:0});r.setValue({x:l,y:K})},onPanResponderRelease:()=>{const i=Number(JSON.stringify(r.x));const t=Number(JSON.stringify(r.y));if(w.current<=5&&!f.current){r.setOffset({x:0,y:0});r.setValue({x:i,y:t});s?.();return}const d=Math.max(h.x,Math.min(i,x.width-m.width));const l=Math.max(h.y,Math.min(t,x.height-m.height));r.setValue({x:d,y:l});p?.({x:d,y:l});f.current=false},onPanResponderTerminate:()=>{f.current=false}}),[g,r,c,p,s,x,m,h]);return(0,_jsxRuntime.jsx)(_reactNative.View,{style:j,...A.panHandlers,children:o})});const BottomSheetComponent=({visible:e,onClose:o,children:r,header:c,styles:p={},minHeight:s=MIN_HEIGHT,maxHeight:x,initialHeight:m=DEFAULT_HEIGHT,initialMode:h="bottomSheet",onModeChange:j,footer:g,footerHeight:f=0,onBack:w,theme:S,background:A=true})=>{const i={...defaultTheme,...S};const t=(0,_react.useMemo)(()=>createDynamicStyles(i),[i]);const d=useSafeAreaInsets();const[l,K]=(0,_react.useState)(h);const[T,M]=(0,_react.useState)(false);const[E,q]=(0,_react.useState)(false);const[be,he]=(0,_react.useState)(m);const[I,Q]=(0,_react.useState)({width:FLOATING_WIDTH,height:FLOATING_HEIGHT,top:(SCREEN.height-FLOATING_HEIGHT)/2,left:(SCREEN.width-FLOATING_WIDTH)/2});const[X]=(0,_react.useState)({width:SCREEN.width,height:SCREEN.height});const R=(0,_react.useRef)(new _reactNative.Animated.Value(0)).current;const y=(0,_react.useRef)(new _reactNative.Animated.Value(SCREEN.height)).current;const B=(0,_react.useRef)(new _reactNative.Animated.Value(m)).current;const J=(0,_react.useRef)(m);const V=(0,_react.useRef)(new _reactNative.Animated.ValueXY({x:(SCREEN.width-FLOATING_WIDTH)/2,y:(SCREEN.height-FLOATING_HEIGHT)/2})).current;const Z=(0,_react.useRef)(new _reactNative.Animated.Value(FLOATING_WIDTH)).current;const ee=(0,_react.useRef)(new _reactNative.Animated.Value(FLOATING_HEIGHT)).current;const F=(0,_react.useRef)(I);const oe=(0,_react.useRef)(I);(0,_react.useEffect)(()=>{F.current=I},[I]);(0,_react.useEffect)(()=>{return()=>{R.stopAnimation();y.stopAnimation();B.stopAnimation();V.stopAnimation();Z.stopAnimation();ee.stopAnimation();R.setValue(0);y.setValue(SCREEN.height);B.setValue(m);J.current=m}},[]);const re=R.interpolate({inputRange:[0,1],outputRange:[0,1],extrapolate:"clamp"});const ae=x||SCREEN.height-d.top;const U=(0,_react.useCallback)(()=>{q(false);M(false);const a=l==="bottomSheet"?"floating":"bottomSheet";K(a);j?.(a)},[l,j]);(0,_react.useEffect)(()=>{q(false);M(false)},[l]);(0,_react.useEffect)(()=>{let a=null;let n=null;if(e){y.setValue(SCREEN.height);R.setValue(0);if(l==="bottomSheet"){a=_reactNative.Animated.parallel([_reactNative.Animated.spring(y,{toValue:0,tension:180,friction:22,useNativeDriver:true}),_reactNative.Animated.timing(R,{toValue:1,duration:200,useNativeDriver:true})]);a.start()}else{a=_reactNative.Animated.timing(R,{toValue:1,duration:200,useNativeDriver:true});a.start()}}else{if(l==="bottomSheet"){n=_reactNative.Animated.parallel([_reactNative.Animated.spring(y,{toValue:SCREEN.height,tension:180,friction:22,useNativeDriver:true}),_reactNative.Animated.timing(R,{toValue:0,duration:200,useNativeDriver:true})]);n.start()}else{n=_reactNative.Animated.timing(R,{toValue:0,duration:200,useNativeDriver:true});n.start()}}return()=>{if(a)a.stop();if(n)n.stop()}},[e,l,R,y]);const se=(0,_react.useRef)(0);const fe=(0,_react.useMemo)(()=>_reactNative.PanResponder.create({onStartShouldSetPanResponder:()=>l==="bottomSheet",onMoveShouldSetPanResponder:(a,n)=>l==="bottomSheet"&&Math.abs(n.dy)>3,onPanResponderTerminationRequest:()=>false,onPanResponderGrant:a=>{M(true);se.current=a.nativeEvent.locationY||0;B.stopAnimation(n=>{J.current=n});y.stopAnimation()},onPanResponderMove:a=>{const n=a.nativeEvent.pageY-se.current;let b=SCREEN.height-n;b=Math.max(s,Math.min(b,ae));B.setValue(b);J.current=b},onPanResponderRelease:(a,n)=>{M(false);const b=J.current;const z=n.vy>.8&&n.dy>50||n.dy>150&&b<=s;if(z){_reactNative.Animated.parallel([_reactNative.Animated.timing(R,{toValue:0,duration:200,useNativeDriver:true}),_reactNative.Animated.spring(y,{toValue:SCREEN.height,tension:180,friction:22,useNativeDriver:true})]).start(()=>o());return}he(b)},onPanResponderTerminate:()=>{M(false)}}),[l,s,ae,B,y,R,o]);const O=(0,_react.useCallback)(a=>{let n=false;return _reactNative.PanResponder.create({onStartShouldSetPanResponder:()=>l==="floating",onMoveShouldSetPanResponder:()=>l==="floating",onPanResponderGrant:()=>{n=false;const b=F.current;V.stopAnimation(({x:z,y:H})=>{V.setValue({x:z,y:H})});M(true);oe.current={...b}},onPanResponderMove:(b,z)=>{const{dx:H,dy:G}=z;if(Math.abs(H)<.5&&Math.abs(G)<.5)return;n=true;const le=Math.max(0,d.left||0);const de=X.width-Math.max(0,d.right||0);const ce=Math.max(0,d.top||0);const ue=X.height-Math.max(0,d.bottom||0);const u=oe.current;const D=u.left+u.width;const P=u.top+u.height;let v=u.left;let C=u.top;let _=D;let Y=P;switch(a){case"topLeft":{const L=Math.max(le,Math.min(u.left+H,D-FLOATING_MIN_WIDTH));const k=Math.max(ce,Math.min(u.top+G,P-FLOATING_MIN_HEIGHT));v=L;C=k;_=D;Y=P;break}case"topRight":{const L=Math.min(de,Math.max(D+H,u.left+FLOATING_MIN_WIDTH));const k=Math.max(ce,Math.min(u.top+G,P-FLOATING_MIN_HEIGHT));v=u.left;C=k;_=L;Y=P;break}case"bottomLeft":{const L=Math.max(le,Math.min(u.left+H,D-FLOATING_MIN_WIDTH));const k=Math.min(ue,Math.max(P+G,u.top+FLOATING_MIN_HEIGHT));v=L;C=u.top;_=D;Y=k;break}case"bottomRight":{const L=Math.min(de,Math.max(D+H,u.left+FLOATING_MIN_WIDTH));const k=Math.min(ue,Math.max(P+G,u.top+FLOATING_MIN_HEIGHT));v=u.left;C=u.top;_=L;Y=k;break}}const te=Math.max(FLOATING_MIN_WIDTH,_-v);const ne=Math.max(FLOATING_MIN_HEIGHT,Y-C);Q({width:te,height:ne,left:v,top:C});Z.setValue(te);ee.setValue(ne);V.setValue({x:v,y:C});F.current={width:te,height:ne,left:v,top:C}},onPanResponderRelease:()=>{M(false);if(a==="topRight"&&!n){o();return}if(a==="topLeft"&&!n&&w){w();return}n=false;Q(F.current)},onPanResponderTerminate:()=>{M(false);n=false}})},[l,X,d.left,d.right,d.top,d.bottom,V,Z,ee,o,w]);const $=(0,_react.useMemo)(()=>{return{topLeft:O("topLeft"),topRight:O("topRight"),bottomLeft:O("bottomLeft"),bottomRight:O("bottomRight")}},[O]);const pe=(0,_react.useCallback)(()=>{q(true)},[]);const ge=(0,_react.useCallback)(a=>{q(false);const n=F.current;const b={...n,left:a.x,top:a.y};Q(b)},[]);const ie=(0,_react.useRef)(0);const N=(0,_react.useRef)(0);const W=(0,_react.useRef)(null);const me=(0,_react.useCallback)(()=>{const a=Date.now();const n=a-ie.current;if(n>500){N.current=0}N.current++;ie.current=a;if(W.current){clearTimeout(W.current)}W.current=setTimeout(()=>{if(N.current===2){U()}else if(N.current>=3){o()}N.current=0},300)},[U,o]);(0,_react.useEffect)(()=>{return()=>{if(W.current){clearTimeout(W.current)}}},[]);if(!e){return null}if(l==="floating"){return(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{style:[t.floatingModal,{width:I.width,height:I.height,opacity:re,transform:[{translateX:V.x},{translateY:V.y}]},(E||T)&&t.floatingModalDragging,p.container],children:[(0,_jsxRuntime.jsx)(DraggableHeader,{position:V,onDragStart:pe,onDragEnd:ge,onTap:me,containerBounds:X,elementSize:I,minPosition:{x:0,y:d.top},style:t.floatingHeader,enabled:l==="floating"&&!T,children:(0,_jsxRuntime.jsx)(ModalHeader,{header:c,onClose:o,onToggleMode:U,isResizing:E||T,mode:l,theme:i})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[t.content,p.content],children:[A?(0,_jsxRuntime.jsx)(_sharedUi.ToolBackground,{}):null,(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{style:{flex:1},contentContainerStyle:{flexGrow:1,paddingBottom:f},showsVerticalScrollIndicator:true,nestedScrollEnabled:true,children:r}),g?(0,_jsxRuntime.jsx)(_reactNative.View,{style:t.footerContainer,children:g}):null]}),(0,_jsxRuntime.jsx)(_reactNative.View,{...$.topLeft.panHandlers,style:[t.cornerHandleWrapper,{top:4,left:4}],hitSlop:{top:8,left:8,right:8,bottom:8},children:(0,_jsxRuntime.jsx)(CornerHandle,{isActive:E||T,theme:i})}),(0,_jsxRuntime.jsx)(_reactNative.View,{...$.topRight.panHandlers,style:[t.cornerHandleWrapper,{top:4,right:4}],hitSlop:{top:8,left:8,right:8,bottom:8},children:(0,_jsxRuntime.jsx)(CornerHandle,{isActive:E||T,theme:i})}),(0,_jsxRuntime.jsx)(_reactNative.View,{...$.bottomLeft.panHandlers,style:[t.cornerHandleWrapper,{bottom:4,left:4}],hitSlop:{top:8,left:8,right:8,bottom:8},children:(0,_jsxRuntime.jsx)(CornerHandle,{isActive:E||T,theme:i})}),(0,_jsxRuntime.jsx)(_reactNative.View,{...$.bottomRight.panHandlers,style:[t.cornerHandleWrapper,{bottom:4,right:4}],hitSlop:{top:8,left:8,right:8,bottom:8},children:(0,_jsxRuntime.jsx)(CornerHandle,{isActive:E||T,theme:i})})]})}return(0,_jsxRuntime.jsx)(_reactNative.View,{style:t.fullScreenContainer,pointerEvents:"box-none",children:(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[t.bottomSheetWrapper,{opacity:re,transform:[{translateY:y}]}],children:(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{style:[t.bottomSheet,p.container,{height:B}],children:[(0,_jsxRuntime.jsx)(ModalHeader,{header:c,onClose:o,onToggleMode:U,isResizing:T,mode:l,panHandlers:fe.panHandlers,theme:i}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[t.content,p.content],children:[A?(0,_jsxRuntime.jsx)(_sharedUi.ToolBackground,{}):null,(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{style:{flex:1},contentContainerStyle:{flexGrow:1,paddingBottom:f},showsVerticalScrollIndicator:true,nestedScrollEnabled:true,children:r}),g?(0,_jsxRuntime.jsx)(_reactNative.View,{style:t.footerContainer,children:g}):null]})]})})})};const createDynamicStyles=e=>_reactNative.StyleSheet.create({fullScreenContainer:{..._sharedUi.absoluteFill,zIndex:1e3},bottomSheetWrapper:{position:"absolute",bottom:0,left:0,right:0},bottomSheet:{backgroundColor:e.panel,borderTopLeftRadius:16,borderTopRightRadius:16,borderWidth:1,borderColor:e.border,shadowColor:e.info,shadowOffset:{width:0,height:-4},shadowOpacity:.3,shadowRadius:12,elevation:20},floatingModal:{position:"absolute",backgroundColor:e.panel,borderRadius:16,borderWidth:1,borderColor:e.border,shadowColor:e.info,shadowOffset:{width:0,height:0},shadowOpacity:.5,shadowRadius:20,elevation:24,zIndex:1e3,width:FLOATING_WIDTH,height:FLOATING_HEIGHT},floatingModalDragging:{borderColor:e.success,borderWidth:2,shadowColor:e.success+"99",shadowOpacity:.8,shadowRadius:12},header:{borderTopLeftRadius:16,borderTopRightRadius:16,backgroundColor:e.panel,minHeight:56,borderWidth:1,borderColor:e.border,borderBottomWidth:1,borderBottomColor:"rgba(255, 255, 255, 0.1)"},floatingHeader:{borderTopLeftRadius:14,borderTopRightRadius:14},floatingModeHeader:{borderTopLeftRadius:14,borderTopRightRadius:14},headerInner:{flex:1,justifyContent:"center"},dragIndicatorContainer:{alignItems:"center",paddingVertical:8,backgroundColor:"transparent"},dragIndicatorContainerCustom:{paddingTop:6,paddingBottom:2,backgroundColor:"transparent"},dragIndicator:{width:40,height:3,backgroundColor:e.info+"99",borderRadius:2,shadowColor:e.info,shadowOffset:{width:0,height:0},shadowOpacity:.8,shadowRadius:4},floatingDragIndicator:{width:50,height:5,backgroundColor:e.muted},dragIndicatorActive:{backgroundColor:e.success,width:40},resizeGripContainer:{position:"absolute",flexDirection:"row",gap:2,marginTop:12},resizeGripLine:{width:12,height:1,backgroundColor:e.success,opacity:.6},headerContent:{paddingHorizontal:16,alignItems:"center"},headerTitle:{fontSize:16,fontWeight:"600",color:e.primary},headerSubtitle:{fontSize:12,color:e.secondary,paddingTop:4},headerHintText:{position:"absolute",top:0,left:0,right:0,bottom:0,justifyContent:"center",alignItems:"center"},hintText:{fontSize:10,color:e.muted,fontStyle:"italic"},content:{flex:1,backgroundColor:e.background,borderBottomLeftRadius:16,borderBottomRightRadius:16,overflow:"hidden"},cornerHandle:{position:"absolute",zIndex:1},cornerHandleWrapper:{position:"absolute",width:30,height:30,zIndex:1e3},handler:{width:20,height:20,backgroundColor:"transparent",borderRadius:10,borderWidth:0,borderColor:"transparent"},handlerActive:{backgroundColor:e.success+"1A",borderColor:e.success,borderWidth:2,shadowColor:e.success+"99",shadowOffset:{width:0,height:0},shadowOpacity:1,shadowRadius:8},footerContainer:{position:"absolute",left:0,right:0,bottom:0,backgroundColor:e.background,borderBottomLeftRadius:16,borderBottomRightRadius:16}});const BottomSheet=exports.BottomSheet=(0,_react.memo)(BottomSheetComponent);