@buoy-gg/bottom-sheet 7.0.41 → 7.0.42

package/lib/module/components/BottomSheet.js

@@ -1,1157 +1 @@
-"use strict";
-
-/**
- * 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
- */
-
-import { useState, useRef, useEffect, useMemo, useCallback, memo } from "react";
-import { View, StyleSheet, TouchableWithoutFeedback, Dimensions, PanResponder, Animated, ScrollView, Text, Platform, StatusBar } from "react-native";
-import { absoluteFill, ToolBackground } from "@buoy-gg/shared-ui";
-
-// ============================================================================
-// CONSTANTS - Modal dimensions and configuration
-// ============================================================================
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const SCREEN = 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 (Platform.OS === "android") {
-    const androidVersion = Platform.Version;
-    const statusBarHeight = StatusBar.currentHeight || 0;
-    const hasGestureNav = androidVersion >= 29;
-    return {
-      top: statusBarHeight,
-      bottom: hasGestureNav ? 20 : 0,
-      left: 0,
-      right: 0
-    };
-  }
-
-  // iOS
-  const {
-    width,
-    height
-  } = 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] = useState(() => getPureJSSafeAreaInsets());
-  useEffect(() => {
-    const updateInsets = () => {
-      setInsets(getPureJSSafeAreaInsets());
-    };
-    const subscription = 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__*/memo(function DragIndicator({
-  isResizing,
-  mode,
-  hasCustomContent = false,
-  theme = defaultTheme
-}) {
-  const styles = createDynamicStyles(theme);
-  return /*#__PURE__*/_jsxs(View, {
-    style: [styles.dragIndicatorContainer, hasCustomContent && styles.dragIndicatorContainerCustom],
-    children: [/*#__PURE__*/_jsx(View, {
-      style: [styles.dragIndicator, mode === "floating" && styles.floatingDragIndicator, isResizing && styles.dragIndicatorActive]
-    }), isResizing && mode === "bottomSheet" && /*#__PURE__*/_jsxs(View, {
-      style: styles.resizeGripContainer,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: styles.resizeGripLine
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.resizeGripLine
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.resizeGripLine
-      })]
-    })]
-  });
-});
-
-/**
- * CornerHandle - Resize handle for floating mode corners
- */
-const CornerHandle = /*#__PURE__*/memo(function CornerHandle({
-  isActive,
-  theme = defaultTheme
-}) {
-  const styles = createDynamicStyles(theme);
-  return /*#__PURE__*/_jsx(View, {
-    style: [styles.cornerHandle],
-    children: /*#__PURE__*/_jsx(View, {
-      style: [styles.handler, isActive && styles.handlerActive]
-    })
-  });
-});
-
-/**
- * ModalHeader - Header bar with title, controls, and drag area
- */
-
-const ModalHeader = /*#__PURE__*/memo(function ModalHeader({
-  header,
-  onClose,
-  onToggleMode,
-  isResizing,
-  mode,
-  panHandlers,
-  theme = defaultTheme
-}) {
-  const styles = createDynamicStyles(theme);
-  const lastTapRef = useRef(0);
-  const tapCountRef = useRef(0);
-  const tapTimeoutRef = useRef(null);
-  const handleHeaderTap = 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]);
-  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__*/_jsxs(View, {
-      style: styles.headerInner,
-      children: [/*#__PURE__*/_jsx(DragIndicator, {
-        isResizing: isResizing,
-        mode: mode,
-        hasCustomContent: true,
-        theme: theme
-      }), header.customContent]
-    });
-    return /*#__PURE__*/_jsx(View, {
-      style: styles.header,
-      ...headerProps,
-      children: shouldHandleTap ? /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
-        onPress: handleHeaderTap,
-        children: headerContent
-      }) : headerContent
-    });
-  }
-  const headerContent = /*#__PURE__*/_jsxs(View, {
-    style: styles.headerInner,
-    children: [/*#__PURE__*/_jsx(DragIndicator, {
-      isResizing: isResizing,
-      mode: mode,
-      theme: theme
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.headerContent,
-      children: [header?.title && /*#__PURE__*/_jsx(Text, {
-        style: styles.headerTitle,
-        children: header.title
-      }), header?.subtitle && /*#__PURE__*/_jsx(Text, {
-        style: styles.headerSubtitle,
-        children: header.subtitle
-      })]
-    }), /*#__PURE__*/_jsx(View, {
-      style: styles.headerHintText,
-      children: /*#__PURE__*/_jsx(Text, {
-        style: styles.hintText,
-        children: "Double tap: Toggle \u2022 Triple tap: Close"
-      })
-    })]
-  });
-  return /*#__PURE__*/_jsx(View, {
-    style: [styles.header, mode === "floating" && styles.floatingModeHeader],
-    ...headerProps,
-    children: shouldHandleTap ? /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
-      onPress: handleHeaderTap,
-      children: headerContent
-    }) : headerContent
-  });
-});
-
-// ============================================================================
-// DRAGGABLE HEADER - For floating mode
-// ============================================================================
-
-const DraggableHeader = /*#__PURE__*/memo(function DraggableHeader({
-  children,
-  position,
-  onDragStart,
-  onDragEnd,
-  onTap,
-  containerBounds = Dimensions.get("window"),
-  elementSize = {
-    width: 100,
-    height: 50
-  },
-  minPosition = {
-    x: 0,
-    y: 0
-  },
-  style,
-  enabled = true
-}) {
-  const isDraggingRef = useRef(false);
-  const dragDistanceRef = useRef(0);
-  const touchOffsetRef = useRef({
-    x: 0,
-    y: 0
-  });
-  const panResponder = useMemo(() => 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__*/_jsx(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 = useMemo(() => createDynamicStyles(theme), [theme]);
-  const insets = useSafeAreaInsets();
-  const [mode, setMode] = useState(initialMode);
-  const [isResizing, setIsResizing] = useState(false);
-  const [isDragging, setIsDragging] = useState(false);
-  const [panelHeight, setPanelHeight] = useState(initialHeight);
-  const [dimensions, setDimensions] = useState({
-    width: FLOATING_WIDTH,
-    height: FLOATING_HEIGHT,
-    top: (SCREEN.height - FLOATING_HEIGHT) / 2,
-    left: (SCREEN.width - FLOATING_WIDTH) / 2
-  });
-  const [containerBounds] = useState({
-    width: SCREEN.width,
-    height: SCREEN.height
-  });
-
-  // ============================================================================
-  // ANIMATED VALUES - All using native driver
-  // ============================================================================
-  const visibilityProgress = useRef(new Animated.Value(0)).current;
-  const bottomSheetTranslateY = useRef(new Animated.Value(SCREEN.height)).current;
-  const animatedBottomPosition = useRef(new Animated.Value(initialHeight)).current;
-  const currentHeightRef = useRef(initialHeight);
-
-  // Floating mode animations
-  const floatingPosition = useRef(new Animated.ValueXY({
-    x: (SCREEN.width - FLOATING_WIDTH) / 2,
-    y: (SCREEN.height - FLOATING_HEIGHT) / 2
-  })).current;
-  const animatedWidth = useRef(new Animated.Value(FLOATING_WIDTH)).current;
-  const animatedFloatingHeight = useRef(new Animated.Value(FLOATING_HEIGHT)).current;
-
-  // Refs for resize handles
-  const currentDimensionsRef = useRef(dimensions);
-  const startDimensionsRef = useRef(dimensions);
-
-  // Update refs when dimensions change
-  useEffect(() => {
-    currentDimensionsRef.current = dimensions;
-  }, [dimensions]);
-
-  // Cleanup on unmount
-  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 = useCallback(() => {
-    setIsDragging(false);
-    setIsResizing(false);
-    const newMode = mode === "bottomSheet" ? "floating" : "bottomSheet";
-    setMode(newMode);
-    onModeChange?.(newMode);
-  }, [mode, onModeChange]);
-  useEffect(() => {
-    setIsDragging(false);
-    setIsResizing(false);
-  }, [mode]);
-
-  // ============================================================================
-  // EFFECT: Visibility Animations - All using native driver!
-  // ============================================================================
-  useEffect(() => {
-    let openAnimation = null;
-    let closeAnimation = null;
-    if (visible) {
-      bottomSheetTranslateY.setValue(SCREEN.height);
-      visibilityProgress.setValue(0);
-      if (mode === "bottomSheet") {
-        openAnimation = Animated.parallel([Animated.spring(bottomSheetTranslateY, {
-          toValue: 0,
-          tension: 180,
-          friction: 22,
-          useNativeDriver: true
-        }), Animated.timing(visibilityProgress, {
-          toValue: 1,
-          duration: 200,
-          useNativeDriver: true
-        })]);
-        openAnimation.start();
-      } else {
-        openAnimation = Animated.timing(visibilityProgress, {
-          toValue: 1,
-          duration: 200,
-          useNativeDriver: true
-        });
-        openAnimation.start();
-      }
-    } else {
-      if (mode === "bottomSheet") {
-        closeAnimation = Animated.parallel([Animated.spring(bottomSheetTranslateY, {
-          toValue: SCREEN.height,
-          tension: 180,
-          friction: 22,
-          useNativeDriver: true
-        }), Animated.timing(visibilityProgress, {
-          toValue: 0,
-          duration: 200,
-          useNativeDriver: true
-        })]);
-        closeAnimation.start();
-      } else {
-        closeAnimation = 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 = useRef(0);
-  const bottomSheetPanResponder = useMemo(() => 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) {
-        Animated.parallel([Animated.timing(visibilityProgress, {
-          toValue: 0,
-          duration: 200,
-          useNativeDriver: true
-        }), 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 = useCallback(corner => {
-    let didResize = false;
-    return 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 = useMemo(() => {
-    return {
-      topLeft: createResizeHandler("topLeft"),
-      topRight: createResizeHandler("topRight"),
-      bottomLeft: createResizeHandler("bottomLeft"),
-      bottomRight: createResizeHandler("bottomRight")
-    };
-  }, [createResizeHandler]);
-
-  // ============================================================================
-  // Floating Mode Drag Handlers
-  // ============================================================================
-  const handleFloatingDragStart = useCallback(() => {
-    setIsDragging(true);
-  }, []);
-  const handleFloatingDragEnd = useCallback(finalPosition => {
-    setIsDragging(false);
-    const currentDims = currentDimensionsRef.current;
-    const newDimensions = {
-      ...currentDims,
-      left: finalPosition.x,
-      top: finalPosition.y
-    };
-    setDimensions(newDimensions);
-  }, []);
-  const lastTapRef = useRef(0);
-  const tapCountRef = useRef(0);
-  const tapTimeoutRef = useRef(null);
-  const handleFloatingTap = 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]);
-  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__*/_jsxs(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__*/_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__*/_jsx(ModalHeader, {
-          header: header,
-          onClose: onClose,
-          onToggleMode: toggleMode,
-          isResizing: isDragging || isResizing,
-          mode: mode,
-          theme: theme
-        })
-      }), /*#__PURE__*/_jsxs(View, {
-        style: [styles.content, customStyles.content],
-        children: [background ? /*#__PURE__*/_jsx(ToolBackground, {}) : null, /*#__PURE__*/_jsx(ScrollView, {
-          style: {
-            flex: 1
-          },
-          contentContainerStyle: {
-            flexGrow: 1,
-            paddingBottom: footerHeight
-          },
-          showsVerticalScrollIndicator: true,
-          nestedScrollEnabled: true,
-          children: children
-        }), footer ? /*#__PURE__*/_jsx(View, {
-          style: styles.footerContainer,
-          children: footer
-        }) : null]
-      }), /*#__PURE__*/_jsx(View, {
-        ...resizeHandlers.topLeft.panHandlers,
-        style: [styles.cornerHandleWrapper, {
-          top: 4,
-          left: 4
-        }],
-        hitSlop: {
-          top: 8,
-          left: 8,
-          right: 8,
-          bottom: 8
-        },
-        children: /*#__PURE__*/_jsx(CornerHandle, {
-          isActive: isDragging || isResizing,
-          theme: theme
-        })
-      }), /*#__PURE__*/_jsx(View, {
-        ...resizeHandlers.topRight.panHandlers,
-        style: [styles.cornerHandleWrapper, {
-          top: 4,
-          right: 4
-        }],
-        hitSlop: {
-          top: 8,
-          left: 8,
-          right: 8,
-          bottom: 8
-        },
-        children: /*#__PURE__*/_jsx(CornerHandle, {
-          isActive: isDragging || isResizing,
-          theme: theme
-        })
-      }), /*#__PURE__*/_jsx(View, {
-        ...resizeHandlers.bottomLeft.panHandlers,
-        style: [styles.cornerHandleWrapper, {
-          bottom: 4,
-          left: 4
-        }],
-        hitSlop: {
-          top: 8,
-          left: 8,
-          right: 8,
-          bottom: 8
-        },
-        children: /*#__PURE__*/_jsx(CornerHandle, {
-          isActive: isDragging || isResizing,
-          theme: theme
-        })
-      }), /*#__PURE__*/_jsx(View, {
-        ...resizeHandlers.bottomRight.panHandlers,
-        style: [styles.cornerHandleWrapper, {
-          bottom: 4,
-          right: 4
-        }],
-        hitSlop: {
-          top: 8,
-          left: 8,
-          right: 8,
-          bottom: 8
-        },
-        children: /*#__PURE__*/_jsx(CornerHandle, {
-          isActive: isDragging || isResizing,
-          theme: theme
-        })
-      })]
-    });
-  }
-
-  // Render bottom sheet mode
-  return /*#__PURE__*/_jsx(View, {
-    style: styles.fullScreenContainer,
-    pointerEvents: "box-none",
-    children: /*#__PURE__*/_jsx(Animated.View, {
-      style: [styles.bottomSheetWrapper, {
-        opacity: modalOpacity,
-        transform: [{
-          translateY: bottomSheetTranslateY
-        }]
-      }],
-      children: /*#__PURE__*/_jsxs(Animated.View, {
-        style: [styles.bottomSheet, customStyles.container, {
-          height: animatedBottomPosition
-        }],
-        children: [/*#__PURE__*/_jsx(ModalHeader, {
-          header: header,
-          onClose: onClose,
-          onToggleMode: toggleMode,
-          isResizing: isResizing,
-          mode: mode,
-          panHandlers: bottomSheetPanResponder.panHandlers,
-          theme: theme
-        }), /*#__PURE__*/_jsxs(View, {
-          style: [styles.content, customStyles.content],
-          children: [background ? /*#__PURE__*/_jsx(ToolBackground, {}) : null, /*#__PURE__*/_jsx(ScrollView, {
-            style: {
-              flex: 1
-            },
-            contentContainerStyle: {
-              flexGrow: 1,
-              paddingBottom: footerHeight
-            },
-            showsVerticalScrollIndicator: true,
-            nestedScrollEnabled: true,
-            children: children
-          }), footer ? /*#__PURE__*/_jsx(View, {
-            style: styles.footerContainer,
-            children: footer
-          }) : null]
-        })]
-      })
-    })
-  });
-};
-
-// ============================================================================
-// DYNAMIC STYLES - Creates styles based on theme
-// ============================================================================
-const createDynamicStyles = theme => StyleSheet.create({
-  fullScreenContainer: {
-    ...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
-// ============================================================================
-export const BottomSheet = /*#__PURE__*/memo(BottomSheetComponent);
+"use strict";import{useState as W,useRef as g,useEffect as _,useMemo as ht,useCallback as X,memo as et}from"react";import{View as s,StyleSheet as jt,TouchableWithoutFeedback as Pt,Dimensions as ut,PanResponder as Tt,Animated as u,ScrollView as Ft,Text as Mt,Platform as Ot,StatusBar as Xt}from"react-native";import{absoluteFill as Jt,ToolBackground as Bt}from"@buoy-gg/shared-ui";import{jsx as t,jsxs as I}from"react/jsx-runtime";const w=ut.get("window");const qt=100;const $t=400;const ot=380;const nt=500;const rt=w.width*.25;const at=80;const Kt={"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 Et=()=>{if(Ot.OS==="android"){const R=Ot.Version;const l=Xt.currentHeight||0;const M=R>=29;return{top:l,bottom:M?20:0,left:0,right:0}}const{width:e,height:r}=ut.get("window");const a=`${e},${r}`;const p=Kt[a];if(p){return{...p,left:0,right:0}}return{top:20,bottom:0,left:0,right:0}};const Ut=()=>{const[e,r]=W(()=>Et());_(()=>{const a=()=>{r(Et())};const p=ut.addEventListener("change",a);return()=>{p?.remove()}},[]);return e};const pt={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 Nt=et(function e({isResizing:r,mode:a,hasCustomContent:p=false,theme:R=pt}){const l=ft(R);return I(s,{style:[l.dragIndicatorContainer,p&&l.dragIndicatorContainerCustom],children:[t(s,{style:[l.dragIndicator,a==="floating"&&l.floatingDragIndicator,r&&l.dragIndicatorActive]}),r&&a==="bottomSheet"&&I(s,{style:l.resizeGripContainer,children:[t(s,{style:l.resizeGripLine}),t(s,{style:l.resizeGripLine}),t(s,{style:l.resizeGripLine})]})]})});const gt=et(function e({isActive:r,theme:a=pt}){const p=ft(a);return t(s,{style:[p.cornerHandle],children:t(s,{style:[p.handler,r&&p.handlerActive]})})});const kt=et(function e({header:r,onClose:a,onToggleMode:p,isResizing:R,mode:l,panHandlers:M,theme:x=pt}){const m=ft(x);const F=g(0);const y=g(0);const b=g(null);const C=X(()=>{const o=Date.now();const h=o-F.current;if(h>500){y.current=0}y.current++;F.current=o;if(b.current){clearTimeout(b.current)}b.current=setTimeout(()=>{if(y.current===2){p()}else if(y.current>=3){a()}y.current=0},300)},[p,a]);_(()=>{return()=>{if(b.current){clearTimeout(b.current)}}},[]);const H=M?M:{};const O=!!M;if(r?.customContent){const o=I(s,{style:m.headerInner,children:[t(Nt,{isResizing:R,mode:l,hasCustomContent:true,theme:x}),r.customContent]});return t(s,{style:m.header,...H,children:O?t(Pt,{onPress:C,children:o}):o})}const c=I(s,{style:m.headerInner,children:[t(Nt,{isResizing:R,mode:l,theme:x}),I(s,{style:m.headerContent,children:[r?.title&&t(Mt,{style:m.headerTitle,children:r.title}),r?.subtitle&&t(Mt,{style:m.headerSubtitle,children:r.subtitle})]}),t(s,{style:m.headerHintText,children:t(Mt,{style:m.hintText,children:"Double tap: Toggle \u2022 Triple tap: Close"})})]});return t(s,{style:[m.header,l==="floating"&&m.floatingModeHeader],...H,children:O?t(Pt,{onPress:C,children:c}):c})});const Qt=et(function e({children:r,position:a,onDragStart:p,onDragEnd:R,onTap:l,containerBounds:M=ut.get("window"),elementSize:x={width:100,height:50},minPosition:m={x:0,y:0},style:F,enabled:y=true}){const b=g(false);const C=g(0);const H=g({x:0,y:0});const O=ht(()=>Tt.create({onStartShouldSetPanResponder:()=>y,onMoveShouldSetPanResponder:(c,o)=>y&&(Math.abs(o.dx)>1||Math.abs(o.dy)>1),onPanResponderTerminationRequest:()=>false,onPanResponderGrant:c=>{b.current=false;C.current=0;H.current={x:c.nativeEvent.locationX,y:c.nativeEvent.locationY};a.stopAnimation(({x:o,y:h})=>{a.setOffset({x:o,y:h});a.setValue({x:0,y:0})})},onPanResponderMove:(c,o)=>{const h=Math.abs(o.dx)+Math.abs(o.dy);C.current=h;if(h>5&&!b.current){b.current=true;p?.()}const d=c.nativeEvent.pageX-H.current.x;const mt=c.nativeEvent.pageY-H.current.y;a.setOffset({x:0,y:0});a.setValue({x:d,y:mt})},onPanResponderRelease:()=>{const c=Number(JSON.stringify(a.x));const o=Number(JSON.stringify(a.y));if(C.current<=5&&!b.current){a.setOffset({x:0,y:0});a.setValue({x:c,y:o});l?.();return}const h=Math.max(m.x,Math.min(c,M.width-x.width));const d=Math.max(m.y,Math.min(o,M.height-x.height));a.setValue({x:h,y:d});R?.({x:h,y:d});b.current=false},onPanResponderTerminate:()=>{b.current=false}}),[y,a,p,R,l,M,x,m]);return t(s,{style:F,...O.panHandlers,children:r})});const Zt=({visible:e,onClose:r,children:a,header:p,styles:R={},minHeight:l=qt,maxHeight:M,initialHeight:x=$t,initialMode:m="bottomSheet",onModeChange:F,footer:y,footerHeight:b=0,onBack:C,theme:H,background:O=true})=>{const c={...pt,...H};const o=ht(()=>ft(c),[c]);const h=Ut();const[d,mt]=W(m);const[D,V]=W(false);const[Y,it]=W(false);const[te,zt]=W(x);const[B,bt]=W({width:ot,height:nt,top:(w.height-nt)/2,left:(w.width-ot)/2});const[st]=W({width:w.width,height:w.height});const S=g(new u.Value(0)).current;const v=g(new u.Value(w.height)).current;const j=g(new u.Value(x)).current;const lt=g(x);const A=g(new u.ValueXY({x:(w.width-ot)/2,y:(w.height-nt)/2})).current;const Rt=g(new u.Value(ot)).current;const yt=g(new u.Value(nt)).current;const J=g(B);const St=g(B);_(()=>{J.current=B},[B]);_(()=>{return()=>{S.stopAnimation();v.stopAnimation();j.stopAnimation();A.stopAnimation();Rt.stopAnimation();yt.stopAnimation();S.setValue(0);v.setValue(w.height);j.setValue(x);lt.current=x}},[]);const Ct=S.interpolate({inputRange:[0,1],outputRange:[0,1],extrapolate:"clamp"});const vt=M||w.height-h.top;const ct=X(()=>{it(false);V(false);const i=d==="bottomSheet"?"floating":"bottomSheet";mt(i);F?.(i)},[d,F]);_(()=>{it(false);V(false)},[d]);_(()=>{let i=null;let n=null;if(e){v.setValue(w.height);S.setValue(0);if(d==="bottomSheet"){i=u.parallel([u.spring(v,{toValue:0,tension:180,friction:22,useNativeDriver:true}),u.timing(S,{toValue:1,duration:200,useNativeDriver:true})]);i.start()}else{i=u.timing(S,{toValue:1,duration:200,useNativeDriver:true});i.start()}}else{if(d==="bottomSheet"){n=u.parallel([u.spring(v,{toValue:w.height,tension:180,friction:22,useNativeDriver:true}),u.timing(S,{toValue:0,duration:200,useNativeDriver:true})]);n.start()}else{n=u.timing(S,{toValue:0,duration:200,useNativeDriver:true});n.start()}}return()=>{if(i)i.stop();if(n)n.stop()}},[e,d,S,v]);const It=g(0);const Gt=ht(()=>Tt.create({onStartShouldSetPanResponder:()=>d==="bottomSheet",onMoveShouldSetPanResponder:(i,n)=>d==="bottomSheet"&&Math.abs(n.dy)>3,onPanResponderTerminationRequest:()=>false,onPanResponderGrant:i=>{V(true);It.current=i.nativeEvent.locationY||0;j.stopAnimation(n=>{lt.current=n});v.stopAnimation()},onPanResponderMove:i=>{const n=i.nativeEvent.pageY-It.current;let T=w.height-n;T=Math.max(l,Math.min(T,vt));j.setValue(T);lt.current=T},onPanResponderRelease:(i,n)=>{V(false);const T=lt.current;const U=n.vy>.8&&n.dy>50||n.dy>150&&T<=l;if(U){u.parallel([u.timing(S,{toValue:0,duration:200,useNativeDriver:true}),u.spring(v,{toValue:w.height,tension:180,friction:22,useNativeDriver:true})]).start(()=>r());return}zt(T)},onPanResponderTerminate:()=>{V(false)}}),[d,l,vt,j,v,S,r]);const q=X(i=>{let n=false;return Tt.create({onStartShouldSetPanResponder:()=>d==="floating",onMoveShouldSetPanResponder:()=>d==="floating",onPanResponderGrant:()=>{n=false;const T=J.current;A.stopAnimation(({x:U,y:E})=>{A.setValue({x:U,y:E})});V(true);St.current={...T}},onPanResponderMove:(T,U)=>{const{dx:E,dy:Q}=U;if(Math.abs(E)<.5&&Math.abs(Q)<.5)return;n=true;const Dt=Math.max(0,h.left||0);const Vt=st.width-Math.max(0,h.right||0);const At=Math.max(0,h.top||0);const Lt=st.height-Math.max(0,h.bottom||0);const f=St.current;const N=f.left+f.width;const k=f.top+f.height;let L=f.left;let P=f.top;let Z=N;let tt=k;switch(i){case"topLeft":{const z=Math.max(Dt,Math.min(f.left+E,N-rt));const G=Math.max(At,Math.min(f.top+Q,k-at));L=z;P=G;Z=N;tt=k;break}case"topRight":{const z=Math.min(Vt,Math.max(N+E,f.left+rt));const G=Math.max(At,Math.min(f.top+Q,k-at));L=f.left;P=G;Z=z;tt=k;break}case"bottomLeft":{const z=Math.max(Dt,Math.min(f.left+E,N-rt));const G=Math.min(Lt,Math.max(k+Q,f.top+at));L=z;P=f.top;Z=N;tt=G;break}case"bottomRight":{const z=Math.min(Vt,Math.max(N+E,f.left+rt));const G=Math.min(Lt,Math.max(k+Q,f.top+at));L=f.left;P=f.top;Z=z;tt=G;break}}const wt=Math.max(rt,Z-L);const xt=Math.max(at,tt-P);bt({width:wt,height:xt,left:L,top:P});Rt.setValue(wt);yt.setValue(xt);A.setValue({x:L,y:P});J.current={width:wt,height:xt,left:L,top:P}},onPanResponderRelease:()=>{V(false);if(i==="topRight"&&!n){r();return}if(i==="topLeft"&&!n&&C){C();return}n=false;bt(J.current)},onPanResponderTerminate:()=>{V(false);n=false}})},[d,st,h.left,h.right,h.top,h.bottom,A,Rt,yt,r,C]);const dt=ht(()=>{return{topLeft:q("topLeft"),topRight:q("topRight"),bottomLeft:q("bottomLeft"),bottomRight:q("bottomRight")}},[q]);const Wt=X(()=>{it(true)},[]);const _t=X(i=>{it(false);const n=J.current;const T={...n,left:i.x,top:i.y};bt(T)},[]);const Ht=g(0);const $=g(0);const K=g(null);const Yt=X(()=>{const i=Date.now();const n=i-Ht.current;if(n>500){$.current=0}$.current++;Ht.current=i;if(K.current){clearTimeout(K.current)}K.current=setTimeout(()=>{if($.current===2){ct()}else if($.current>=3){r()}$.current=0},300)},[ct,r]);_(()=>{return()=>{if(K.current){clearTimeout(K.current)}}},[]);if(!e){return null}if(d==="floating"){return I(u.View,{style:[o.floatingModal,{width:B.width,height:B.height,opacity:Ct,transform:[{translateX:A.x},{translateY:A.y}]},(Y||D)&&o.floatingModalDragging,R.container],children:[t(Qt,{position:A,onDragStart:Wt,onDragEnd:_t,onTap:Yt,containerBounds:st,elementSize:B,minPosition:{x:0,y:h.top},style:o.floatingHeader,enabled:d==="floating"&&!D,children:t(kt,{header:p,onClose:r,onToggleMode:ct,isResizing:Y||D,mode:d,theme:c})}),I(s,{style:[o.content,R.content],children:[O?t(Bt,{}):null,t(Ft,{style:{flex:1},contentContainerStyle:{flexGrow:1,paddingBottom:b},showsVerticalScrollIndicator:true,nestedScrollEnabled:true,children:a}),y?t(s,{style:o.footerContainer,children:y}):null]}),t(s,{...dt.topLeft.panHandlers,style:[o.cornerHandleWrapper,{top:4,left:4}],hitSlop:{top:8,left:8,right:8,bottom:8},children:t(gt,{isActive:Y||D,theme:c})}),t(s,{...dt.topRight.panHandlers,style:[o.cornerHandleWrapper,{top:4,right:4}],hitSlop:{top:8,left:8,right:8,bottom:8},children:t(gt,{isActive:Y||D,theme:c})}),t(s,{...dt.bottomLeft.panHandlers,style:[o.cornerHandleWrapper,{bottom:4,left:4}],hitSlop:{top:8,left:8,right:8,bottom:8},children:t(gt,{isActive:Y||D,theme:c})}),t(s,{...dt.bottomRight.panHandlers,style:[o.cornerHandleWrapper,{bottom:4,right:4}],hitSlop:{top:8,left:8,right:8,bottom:8},children:t(gt,{isActive:Y||D,theme:c})})]})}return t(s,{style:o.fullScreenContainer,pointerEvents:"box-none",children:t(u.View,{style:[o.bottomSheetWrapper,{opacity:Ct,transform:[{translateY:v}]}],children:I(u.View,{style:[o.bottomSheet,R.container,{height:j}],children:[t(kt,{header:p,onClose:r,onToggleMode:ct,isResizing:D,mode:d,panHandlers:Gt.panHandlers,theme:c}),I(s,{style:[o.content,R.content],children:[O?t(Bt,{}):null,t(Ft,{style:{flex:1},contentContainerStyle:{flexGrow:1,paddingBottom:b},showsVerticalScrollIndicator:true,nestedScrollEnabled:true,children:a}),y?t(s,{style:o.footerContainer,children:y}):null]})]})})})};const ft=e=>jt.create({fullScreenContainer:{...Jt,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:ot,height:nt},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}});export const BottomSheet=et(Zt);