@buoy-gg/bottom-sheet 1.7.2

package/lib/module/components/BottomSheet.js

@@ -0,0 +1,1155 @@
+"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";
+
+// ============================================================================
+// 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
+}) => {
+  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: [/*#__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: [/*#__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: {
+    ...StyleSheet.absoluteFillObject,
+    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);