@buoy-gg/bottom-sheet 7.0.41 → 7.0.43

package/lib/module/components/BottomSheet.web.js

@@ -1,790 +1 @@
-"use strict";
-
-/**
- * BottomSheet — Web renderer (React DOM).
- *
- * Same public API and behavior as the native BottomSheet.tsx:
- * - two modes: "bottomSheet" (full-width, continuous drag-resize via header,
- *   fling-down to close) and "floating" (draggable window, 4-corner resize,
- *   tap topRight corner = close, tap topLeft = onBack)
- * - double-tap header toggles mode, triple-tap closes
- * - no backdrop; bottom-sheet container lets taps pass through beside it
- *
- * Web adaptations (each annotated inline with the native token it mirrors):
- * - Pointer Events + setPointerCapture replace PanResponder (one code path
- *   for mouse and touch; capture gives "never release the responder"
- *   semantics). touch-action:none on gesture surfaces or WKWebView/Safari
- *   steals drags for page scroll.
- * - During gestures we write styles directly to the DOM node (native rule:
- *   "direct setValue, no state updates") and commit to React state on release.
- * - Native spring tension:180/friction:22 ≈ cubic-bezier(0.16,1,0.3,1) 320ms;
- *   the 200ms opacity fade is copied as-is.
- * - Safe areas come from env(safe-area-inset-*) via a probe element (the
- *   native iPhone-dimension table is deleted). Requires viewport-fit=cover
- *   in the host page's <meta name="viewport"> to be non-zero on iOS.
- * - Web-only additive props: `disableScrollWrapper` (tools with virtualized
- *   bodies need it — JsModal has it natively) and `zIndex` (AppHost stacking).
- *
- * Intentionally NOT ported: the visibility close animation on prop change —
- * native returns null immediately when visible=false (only the gesture-close
- * animates out), and we mirror that.
- */
-
-import { useState, useRef, useEffect } from 'react';
-// RN component, but safe here: every consumer of the web sheet (desktop
-// renderer, website demos) aliases `react-native` to react-native-web, and
-// the backgrounds primitives handle RNW explicitly.
-import { ToolBackground } from '@buoy-gg/shared-ui';
-import { MIN_HEIGHT, DEFAULT_HEIGHT, FLOATING_WIDTH, FLOATING_HEIGHT, FLOATING_MIN_HEIGHT, floatingMinWidth, resizeCorner, shouldCloseOnRelease } from './bottomSheetGeometry';
-import { useMultiTap } from './useMultiTap';
-
-// ============================================================================
-// THEME — same palette as native BottomSheet.tsx defaultTheme
-// ============================================================================
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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'
-};
-
-// ============================================================================
-// TYPES — identical names to the native module
-// ============================================================================
-
-// ============================================================================
-// VIEWPORT + SAFE AREA
-// ============================================================================
-function subscribeToViewport(onChange) {
-  window.addEventListener('resize', onChange);
-  window.visualViewport?.addEventListener('resize', onChange);
-  return () => {
-    window.removeEventListener('resize', onChange);
-    window.visualViewport?.removeEventListener('resize', onChange);
-  };
-}
-function readViewport() {
-  return {
-    width: window.innerWidth,
-    height: window.innerHeight
-  };
-}
-
-/** env(safe-area-inset-*) via a probe element (replaces the native iPhone table). */
-function readSafeAreaInsets() {
-  const probe = document.createElement('div');
-  probe.style.cssText = 'position:fixed;visibility:hidden;pointer-events:none;' + 'top:env(safe-area-inset-top);bottom:env(safe-area-inset-bottom);' + 'left:env(safe-area-inset-left);right:env(safe-area-inset-right)';
-  document.body.appendChild(probe);
-  // Computed top/bottom/left/right resolve env() to px offsets from their
-  // respective edges — the raw parse IS the inset value.
-  const cs = getComputedStyle(probe);
-  const insets = {
-    top: parseFloat(cs.top) || 0,
-    bottom: parseFloat(cs.bottom) || 0,
-    left: parseFloat(cs.left) || 0,
-    right: parseFloat(cs.right) || 0
-  };
-  document.body.removeChild(probe);
-  return insets;
-}
-function useViewportAndInsets() {
-  const [state, setState] = useState(() => ({
-    viewport: readViewport(),
-    insets: readSafeAreaInsets()
-  }));
-  useEffect(() => {
-    return subscribeToViewport(() => {
-      setState({
-        viewport: readViewport(),
-        insets: readSafeAreaInsets()
-      });
-    });
-  }, []);
-  return state;
-}
-
-// ============================================================================
-// GESTURE PLUMBING — pointer drag with tap detection
-// ============================================================================
-
-/**
- * Shared pointerdown handler factory. Captures the pointer on the target,
- * tracks total deltas + a velocity sample (px/ms, matching RN gestureState.vy
- * units), and reports wasTap when total movement stayed within the native
- * 5px tap threshold (DraggableHeader: dragDistance <= 5).
- */
-function startPointerDrag(e, callbacks) {
-  if (!e.isPrimary) return;
-  const target = e.currentTarget;
-  const startX = e.clientX;
-  const startY = e.clientY;
-  let lastY = e.clientY;
-  let lastT = performance.now();
-  let vy = 0;
-  let maxDistance = 0;
-  callbacks.onStart?.(e);
-  target.setPointerCapture(e.pointerId);
-  const handleMove = ev => {
-    if (ev.pointerId !== e.pointerId) return;
-    const dx = ev.clientX - startX;
-    const dy = ev.clientY - startY;
-    maxDistance = Math.max(maxDistance, Math.abs(dx) + Math.abs(dy));
-    const now = performance.now();
-    const dt = now - lastT;
-    if (dt > 0) {
-      vy = (ev.clientY - lastY) / dt;
-      lastY = ev.clientY;
-      lastT = now;
-    }
-    callbacks.onMove(ev, {
-      dx,
-      dy
-    });
-  };
-  const handleUp = ev => {
-    if (ev.pointerId !== e.pointerId) return;
-    cleanup();
-    callbacks.onEnd(ev, {
-      dx: ev.clientX - startX,
-      dy: ev.clientY - startY,
-      vy,
-      wasTap: maxDistance <= 5
-    });
-  };
-  const cleanup = () => {
-    target.removeEventListener('pointermove', handleMove);
-    target.removeEventListener('pointerup', handleUp);
-    target.removeEventListener('pointercancel', handleUp);
-  };
-  target.addEventListener('pointermove', handleMove);
-  target.addEventListener('pointerup', handleUp);
-  target.addEventListener('pointercancel', handleUp);
-}
-
-// ============================================================================
-// HEADER PIECES
-// ============================================================================
-function DragIndicator({
-  isResizing,
-  mode,
-  hasCustomContent = false,
-  theme
-}) {
-  return /*#__PURE__*/_jsxs("div", {
-    style: {
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      // native: paddingVertical 8 / custom: 6 top, 2 bottom
-      padding: hasCustomContent ? '6px 0 2px' : '8px 0',
-      position: 'relative'
-    },
-    children: [/*#__PURE__*/_jsx("div", {
-      style: {
-        // native dragIndicator: 40×3 info@99 / floating: 50×5 muted / active: success
-        width: isResizing ? 40 : mode === 'floating' ? 50 : 40,
-        height: mode === 'floating' ? 5 : 3,
-        backgroundColor: isResizing ? theme.success : mode === 'floating' ? theme.muted : theme.info + '99',
-        borderRadius: 2,
-        boxShadow: `0 0 4px ${theme.info}CC`
-      }
-    }), isResizing && mode === 'bottomSheet' && /*#__PURE__*/_jsx("div", {
-      style: {
-        position: 'absolute',
-        display: 'flex',
-        flexDirection: 'row',
-        gap: 2,
-        marginTop: 12
-      },
-      children: [0, 1, 2].map(i => /*#__PURE__*/_jsx("div", {
-        style: {
-          width: 12,
-          height: 1,
-          backgroundColor: theme.success,
-          opacity: 0.6
-        }
-      }, i))
-    })]
-  });
-}
-function HeaderBody({
-  header,
-  isResizing,
-  mode,
-  theme
-}) {
-  if (header?.customContent) {
-    return /*#__PURE__*/_jsxs("div", {
-      style: {
-        flex: 1,
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center'
-      },
-      children: [/*#__PURE__*/_jsx(DragIndicator, {
-        isResizing: isResizing,
-        mode: mode,
-        hasCustomContent: true,
-        theme: theme
-      }), header.customContent]
-    });
-  }
-  return /*#__PURE__*/_jsxs("div", {
-    style: {
-      flex: 1,
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      position: 'relative'
-    },
-    children: [/*#__PURE__*/_jsx(DragIndicator, {
-      isResizing: isResizing,
-      mode: mode,
-      theme: theme
-    }), /*#__PURE__*/_jsxs("div", {
-      style: {
-        padding: '0 16px',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center'
-      },
-      children: [header?.title &&
-      /*#__PURE__*/
-      // native headerTitle: 16px / 600 / primary
-      _jsx("span", {
-        style: {
-          fontSize: 16,
-          fontWeight: 600,
-          color: theme.primary
-        },
-        children: header.title
-      }), header?.subtitle &&
-      /*#__PURE__*/
-      // native headerSubtitle: 12px / secondary / paddingTop 4
-      _jsx("span", {
-        style: {
-          fontSize: 12,
-          color: theme.secondary,
-          paddingTop: 4
-        },
-        children: header.subtitle
-      })]
-    }), /*#__PURE__*/_jsx("div", {
-      style: {
-        position: 'absolute',
-        inset: 0,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        pointerEvents: 'none'
-      },
-      children: /*#__PURE__*/_jsx("span", {
-        style: {
-          fontSize: 10,
-          color: theme.muted,
-          fontStyle: 'italic'
-        },
-        children: "Double tap: Toggle \u2022 Triple tap: Close"
-      })
-    })]
-  });
-}
-
-// ============================================================================
-// CONTENT — scroll wrapper + sticky footer (native content/footerContainer)
-// ============================================================================
-function SheetContent({
-  children,
-  footer,
-  footerHeight,
-  disableScrollWrapper,
-  contentStyle,
-  theme,
-  background
-}) {
-  return /*#__PURE__*/_jsxs("div", {
-    style: {
-      // native content: flex 1, background, bottom radius 16, overflow hidden
-      flex: 1,
-      minHeight: 0,
-      display: 'flex',
-      flexDirection: 'column',
-      backgroundColor: theme.background,
-      borderBottomLeftRadius: 16,
-      borderBottomRightRadius: 16,
-      overflow: 'hidden',
-      position: 'relative',
-      ...contentStyle
-    },
-    children: [background ? /*#__PURE__*/_jsx(ToolBackground, {}) : null, disableScrollWrapper ? children : /*#__PURE__*/_jsx("div", {
-      style: {
-        flex: 1,
-        minHeight: 0,
-        overflowY: 'auto',
-        WebkitOverflowScrolling: 'touch',
-        paddingBottom: footerHeight
-      },
-      children: children
-    }), footer ? /*#__PURE__*/_jsx("div", {
-      style: {
-        position: 'absolute',
-        left: 0,
-        right: 0,
-        bottom: 0,
-        backgroundColor: theme.background,
-        borderBottomLeftRadius: 16,
-        borderBottomRightRadius: 16
-      },
-      children: footer
-    }) : null]
-  });
-}
-
-// ============================================================================
-// BOTTOM SHEET MODE
-// ============================================================================
-const SPRING_TRANSITION = 'transform 320ms cubic-bezier(0.16, 1, 0.3, 1)';
-const FADE_TRANSITION = 'opacity 200ms ease';
-function SheetPanel({
-  props,
-  theme,
-  viewport,
-  effectiveMaxHeight,
-  panelHeight,
-  setPanelHeight,
-  onHeaderTap
-}) {
-  const {
-    onClose,
-    children,
-    header,
-    styles: customStyles = {},
-    minHeight = MIN_HEIGHT,
-    footer,
-    footerHeight = 0,
-    disableScrollWrapper,
-    zIndex = 1000,
-    background = true
-  } = props;
-  const sheetRef = useRef(null);
-  const wrapperRef = useRef(null);
-  const [isResizing, setIsResizing] = useState(false);
-  const [entered, setEntered] = useState(false);
-  const closingRef = useRef(false);
-  const heightRef = useRef(panelHeight);
-
-  // Enter animation: translateY 100% → 0 (native spring 180/22) + fade 200ms.
-  useEffect(() => {
-    const raf = requestAnimationFrame(() => setEntered(true));
-    return () => cancelAnimationFrame(raf);
-  }, []);
-  const handleHeaderPointerDown = e => {
-    if (closingRef.current) return;
-    // native: headerTouchOffset = locationY (finger position inside header)
-    const headerTop = e.currentTarget.getBoundingClientRect().top;
-    const touchOffset = e.clientY - headerTop;
-    startPointerDrag(e, {
-      onStart: () => setIsResizing(true),
-      onMove: ev => {
-        // native: targetHeight = SCREEN.height - (pageY - headerTouchOffset)
-        const sheetTop = ev.clientY - touchOffset;
-        const target = Math.max(minHeight, Math.min(viewport.height - sheetTop, effectiveMaxHeight));
-        heightRef.current = target;
-        if (sheetRef.current) sheetRef.current.style.height = `${target}px`;
-      },
-      onEnd: (_ev, {
-        dy,
-        vy,
-        wasTap
-      }) => {
-        setIsResizing(false);
-        if (wasTap) {
-          onHeaderTap();
-          return;
-        }
-        if (shouldCloseOnRelease(vy, dy, heightRef.current, minHeight)) {
-          // Gesture close animates out, then fires onClose (native parity).
-          closingRef.current = true;
-          const wrapper = wrapperRef.current;
-          if (wrapper) {
-            wrapper.style.transition = `${SPRING_TRANSITION}, ${FADE_TRANSITION}`;
-            wrapper.style.transform = 'translateY(100%)';
-            wrapper.style.opacity = '0';
-          }
-          setTimeout(onClose, 220);
-          return;
-        }
-        setPanelHeight(heightRef.current);
-      }
-    });
-  };
-  return /*#__PURE__*/_jsx("div", {
-    style: {
-      // native fullScreenContainer: absoluteFill + zIndex, box-none touches
-      position: 'fixed',
-      inset: 0,
-      zIndex,
-      pointerEvents: 'none'
-    },
-    children: /*#__PURE__*/_jsx("div", {
-      ref: wrapperRef,
-      style: {
-        // native bottomSheetWrapper: absolute bottom/left/right 0
-        position: 'absolute',
-        bottom: 0,
-        left: 0,
-        right: 0,
-        pointerEvents: 'auto',
-        transform: entered ? 'translateY(0)' : 'translateY(100%)',
-        opacity: entered ? 1 : 0,
-        transition: `${SPRING_TRANSITION}, ${FADE_TRANSITION}`
-      },
-      children: /*#__PURE__*/_jsxs("div", {
-        ref: sheetRef,
-        style: {
-          // native bottomSheet: panel bg, top radius 16, 1px border, glow shadow
-          display: 'flex',
-          flexDirection: 'column',
-          height: panelHeight,
-          backgroundColor: theme.panel,
-          borderTopLeftRadius: 16,
-          borderTopRightRadius: 16,
-          border: `1px solid ${theme.border}`,
-          boxShadow: `0 -4px 12px ${theme.info}4D, 0 -2px 24px rgba(0,0,0,0.4)`,
-          ...customStyles.container
-        },
-        children: [/*#__PURE__*/_jsx("div", {
-          onPointerDown: handleHeaderPointerDown,
-          style: {
-            // native header: minHeight 56, top radius, hairline bottom border
-            minHeight: 56,
-            display: 'flex',
-            backgroundColor: theme.panel,
-            borderTopLeftRadius: 16,
-            borderTopRightRadius: 16,
-            borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
-            cursor: isResizing ? 'ns-resize' : 'grab',
-            touchAction: 'none',
-            userSelect: 'none'
-          },
-          children: /*#__PURE__*/_jsx(HeaderBody, {
-            header: header,
-            isResizing: isResizing,
-            mode: "bottomSheet",
-            theme: theme
-          })
-        }), /*#__PURE__*/_jsx(SheetContent, {
-          footer: footer,
-          footerHeight: footerHeight,
-          disableScrollWrapper: disableScrollWrapper,
-          contentStyle: customStyles.content,
-          theme: theme,
-          background: background,
-          children: children
-        })]
-      })
-    })
-  });
-}
-
-// ============================================================================
-// FLOATING MODE
-// ============================================================================
-function CornerHandleView({
-  isActive,
-  theme
-}) {
-  return /*#__PURE__*/_jsx("div", {
-    style: {
-      width: 20,
-      height: 20,
-      borderRadius: 10,
-      margin: 5,
-      // native handlerActive: success tint + 2px border + glow
-      backgroundColor: isActive ? theme.success + '1A' : 'transparent',
-      border: isActive ? `2px solid ${theme.success}` : '2px solid transparent',
-      boxShadow: isActive ? `0 0 8px ${theme.success}99` : 'none'
-    }
-  });
-}
-function FloatingWindow({
-  props,
-  theme,
-  viewport,
-  insets,
-  rect,
-  setRect,
-  onHeaderTap
-}) {
-  const {
-    onClose,
-    children,
-    header,
-    styles: customStyles = {},
-    footer,
-    footerHeight = 0,
-    onBack,
-    disableScrollWrapper,
-    zIndex = 1000,
-    background = true
-  } = props;
-  const windowRef = useRef(null);
-  const [isDragging, setIsDragging] = useState(false);
-  const [isResizing, setIsResizing] = useState(false);
-  const [entered, setEntered] = useState(false);
-  const rectRef = useRef(rect);
-  rectRef.current = rect;
-  const liveRectRef = useRef(rect);
-  useEffect(() => {
-    const raf = requestAnimationFrame(() => setEntered(true));
-    return () => cancelAnimationFrame(raf);
-  }, []);
-  const applyRect = r => {
-    liveRectRef.current = r;
-    const el = windowRef.current;
-    if (!el) return;
-    el.style.transform = `translate(${r.left}px, ${r.top}px)`;
-    el.style.width = `${r.width}px`;
-    el.style.height = `${r.height}px`;
-  };
-
-  // Header drag: absolute finger anchoring (native DraggableHeader:
-  // position = pageX/Y - touch offset inside the element).
-  const handleHeaderPointerDown = e => {
-    const start = rectRef.current;
-    const offsetX = e.clientX - start.left;
-    const offsetY = e.clientY - start.top;
-    startPointerDrag(e, {
-      onMove: (ev, {
-        dx,
-        dy
-      }) => {
-        if (Math.abs(dx) + Math.abs(dy) > 5) setIsDragging(true);
-        applyRect({
-          ...liveRectRef.current,
-          left: ev.clientX - offsetX,
-          top: ev.clientY - offsetY
-        });
-      },
-      onEnd: (_ev, {
-        wasTap
-      }) => {
-        setIsDragging(false);
-        if (wasTap) {
-          onHeaderTap();
-          return;
-        }
-        // Release clamp keeps the whole window inside the safe area (all
-        // four insets — deliberate improvement over native, which only
-        // clamps the top so windows could sit under the home indicator).
-        const live = liveRectRef.current;
-        const clamped = {
-          ...live,
-          left: Math.max(insets.left, Math.min(live.left, viewport.width - insets.right - live.width)),
-          top: Math.max(insets.top, Math.min(live.top, viewport.height - insets.bottom - live.height))
-        };
-        applyRect(clamped);
-        setRect(clamped);
-      }
-    });
-  };
-  const handleCornerPointerDown = corner => e => {
-    e.stopPropagation();
-    const start = {
-      ...rectRef.current
-    };
-    let didResize = false;
-    startPointerDrag(e, {
-      onStart: () => setIsResizing(true),
-      onMove: (_ev, {
-        dx,
-        dy
-      }) => {
-        // native: ignores sub-half-pixel jitter
-        if (Math.abs(dx) < 0.5 && Math.abs(dy) < 0.5) return;
-        didResize = true;
-        applyRect(resizeCorner(corner, start, dx, dy, viewport, insets, floatingMinWidth(viewport.width), FLOATING_MIN_HEIGHT));
-      },
-      onEnd: () => {
-        setIsResizing(false);
-        // native: tap (no resize) on topRight = close, topLeft = back
-        if (!didResize) {
-          if (corner === 'topRight') {
-            onClose();
-            return;
-          }
-          if (corner === 'topLeft' && onBack) {
-            onBack();
-            return;
-          }
-        }
-        setRect(liveRectRef.current);
-      }
-    });
-  };
-  const active = isDragging || isResizing;
-  const corners = [{
-    corner: 'topLeft',
-    style: {
-      top: 4,
-      left: 4
-    }
-  }, {
-    corner: 'topRight',
-    style: {
-      top: 4,
-      right: 4
-    }
-  }, {
-    corner: 'bottomLeft',
-    style: {
-      bottom: 4,
-      left: 4
-    }
-  }, {
-    corner: 'bottomRight',
-    style: {
-      bottom: 4,
-      right: 4
-    }
-  }];
-  return /*#__PURE__*/_jsxs("div", {
-    ref: windowRef,
-    style: {
-      // native floatingModal: absolute, panel bg, radius 16, glow shadow
-      position: 'fixed',
-      top: 0,
-      left: 0,
-      transform: `translate(${rect.left}px, ${rect.top}px)`,
-      width: rect.width,
-      height: rect.height,
-      display: 'flex',
-      flexDirection: 'column',
-      backgroundColor: theme.panel,
-      borderRadius: 16,
-      // native floatingModalDragging: success border while active
-      border: active ? `2px solid ${theme.success}` : `1px solid ${theme.border}`,
-      boxShadow: active ? `0 0 12px ${theme.success}99` : `0 0 20px ${theme.info}80, 0 8px 32px rgba(0,0,0,0.5)`,
-      zIndex,
-      opacity: entered ? 1 : 0,
-      transition: FADE_TRANSITION,
-      ...customStyles.container
-    },
-    children: [/*#__PURE__*/_jsx("div", {
-      onPointerDown: handleHeaderPointerDown,
-      style: {
-        minHeight: 56,
-        display: 'flex',
-        backgroundColor: theme.panel,
-        borderTopLeftRadius: 14,
-        borderTopRightRadius: 14,
-        borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
-        cursor: isDragging ? 'grabbing' : 'grab',
-        touchAction: 'none',
-        userSelect: 'none'
-      },
-      children: /*#__PURE__*/_jsx(HeaderBody, {
-        header: header,
-        isResizing: active,
-        mode: "floating",
-        theme: theme
-      })
-    }), /*#__PURE__*/_jsx(SheetContent, {
-      footer: footer,
-      footerHeight: footerHeight,
-      disableScrollWrapper: disableScrollWrapper,
-      contentStyle: customStyles.content,
-      theme: theme,
-      background: background,
-      children: children
-    }), corners.map(({
-      corner,
-      style
-    }) => /*#__PURE__*/_jsx("div", {
-      onPointerDown: handleCornerPointerDown(corner),
-      style: {
-        // native cornerHandleWrapper: 30×30 hit area (hitSlop folded in)
-        position: 'absolute',
-        width: 30,
-        height: 30,
-        zIndex: 10,
-        touchAction: 'none',
-        cursor: corner === 'topLeft' || corner === 'bottomRight' ? 'nwse-resize' : 'nesw-resize',
-        ...style
-      },
-      children: /*#__PURE__*/_jsx(CornerHandleView, {
-        isActive: active,
-        theme: theme
-      })
-    }, corner))]
-  });
-}
-
-// ============================================================================
-// MAIN COMPONENT — mode router (each mode is its own subtree; rule4 style)
-// ============================================================================
-export const BottomSheet = props => {
-  const {
-    visible,
-    onClose,
-    maxHeight,
-    initialHeight = DEFAULT_HEIGHT,
-    initialMode = 'bottomSheet',
-    onModeChange,
-    theme: customTheme
-  } = props;
-  const theme = {
-    ...defaultTheme,
-    ...customTheme
-  };
-  const {
-    viewport,
-    insets
-  } = useViewportAndInsets();
-  const [mode, setMode] = useState(initialMode);
-  const [panelHeight, setPanelHeight] = useState(initialHeight);
-  const [floatingRect, setFloatingRect] = useState(() => ({
-    width: FLOATING_WIDTH,
-    height: FLOATING_HEIGHT,
-    left: (window.innerWidth - FLOATING_WIDTH) / 2,
-    top: (window.innerHeight - FLOATING_HEIGHT) / 2
-  }));
-
-  // native: effectiveMaxHeight = maxHeight || SCREEN.height - insets.top
-  const effectiveMaxHeight = maxHeight || viewport.height - insets.top;
-  const toggleMode = () => {
-    const newMode = mode === 'bottomSheet' ? 'floating' : 'bottomSheet';
-    setMode(newMode);
-    onModeChange?.(newMode);
-  };
-  const handleHeaderTap = useMultiTap(toggleMode, onClose);
-  if (!visible) {
-    return null;
-  }
-  if (mode === 'floating') {
-    return /*#__PURE__*/_jsx(FloatingWindow, {
-      props: props,
-      theme: theme,
-      viewport: viewport,
-      insets: insets,
-      rect: floatingRect,
-      setRect: setFloatingRect,
-      onHeaderTap: handleHeaderTap
-    });
-  }
-  return /*#__PURE__*/_jsx(SheetPanel, {
-    props: props,
-    theme: theme,
-    viewport: viewport,
-    effectiveMaxHeight: effectiveMaxHeight,
-    panelHeight: Math.min(panelHeight, effectiveMaxHeight),
-    setPanelHeight: setPanelHeight,
-    onHeaderTap: handleHeaderTap
-  });
-};
+"use strict";import{useState as y,useRef as F,useEffect as N}from"react";import{ToolBackground as tt}from"@buoy-gg/shared-ui";import{MIN_HEIGHT as et,DEFAULT_HEIGHT as ot,FLOATING_WIDTH as X,FLOATING_HEIGHT as V,FLOATING_MIN_HEIGHT as nt,floatingMinWidth as it,resizeCorner as rt,shouldCloseOnRelease as st}from"./bottomSheetGeometry";import{useMultiTap as lt}from"./useMultiTap";import{jsx as r,jsxs as D}from"react/jsx-runtime";const at={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"};function ct(t){window.addEventListener("resize",t);window.visualViewport?.addEventListener("resize",t);return()=>{window.removeEventListener("resize",t);window.visualViewport?.removeEventListener("resize",t)}}function q(){return{width:window.innerWidth,height:window.innerHeight}}function U(){const t=document.createElement("div");t.style.cssText="position:fixed;visibility:hidden;pointer-events:none;top:env(safe-area-inset-top);bottom:env(safe-area-inset-bottom);left:env(safe-area-inset-left);right:env(safe-area-inset-right)";document.body.appendChild(t);const e=getComputedStyle(t);const n={top:parseFloat(e.top)||0,bottom:parseFloat(e.bottom)||0,left:parseFloat(e.left)||0,right:parseFloat(e.right)||0};document.body.removeChild(t);return n}function dt(){const[t,e]=y(()=>({viewport:q(),insets:U()}));N(()=>{return ct(()=>{e({viewport:q(),insets:U()})})},[]);return t}function G(t,e){if(!t.isPrimary)return;const n=t.currentTarget;const o=t.clientX;const s=t.clientY;let d=t.clientY;let u=performance.now();let w=0;let p=0;e.onStart?.(t);n.setPointerCapture(t.pointerId);const f=l=>{if(l.pointerId!==t.pointerId)return;const m=l.clientX-o;const v=l.clientY-s;p=Math.max(p,Math.abs(m)+Math.abs(v));const R=performance.now();const T=R-u;if(T>0){w=(l.clientY-d)/T;d=l.clientY;u=R}e.onMove(l,{dx:m,dy:v})};const c=l=>{if(l.pointerId!==t.pointerId)return;g();e.onEnd(l,{dx:l.clientX-o,dy:l.clientY-s,vy:w,wasTap:p<=5})};const g=()=>{n.removeEventListener("pointermove",f);n.removeEventListener("pointerup",c);n.removeEventListener("pointercancel",c)};n.addEventListener("pointermove",f);n.addEventListener("pointerup",c);n.addEventListener("pointercancel",c)}function J({isResizing:t,mode:e,hasCustomContent:n=false,theme:o}){return D("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",padding:n?"6px 0 2px":"8px 0",position:"relative"},children:[r("div",{style:{width:t?40:e==="floating"?50:40,height:e==="floating"?5:3,backgroundColor:t?o.success:e==="floating"?o.muted:o.info+"99",borderRadius:2,boxShadow:`0 0 4px ${o.info}CC`}}),t&&e==="bottomSheet"&&r("div",{style:{position:"absolute",display:"flex",flexDirection:"row",gap:2,marginTop:12},children:[0,1,2].map(s=>r("div",{style:{width:12,height:1,backgroundColor:o.success,opacity:.6}},s))})]})}function K({header:t,isResizing:e,mode:n,theme:o}){if(t?.customContent){return D("div",{style:{flex:1,display:"flex",flexDirection:"column",justifyContent:"center"},children:[r(J,{isResizing:e,mode:n,hasCustomContent:true,theme:o}),t.customContent]})}return D("div",{style:{flex:1,display:"flex",flexDirection:"column",justifyContent:"center",position:"relative"},children:[r(J,{isResizing:e,mode:n,theme:o}),D("div",{style:{padding:"0 16px",display:"flex",flexDirection:"column",alignItems:"center"},children:[t?.title&&r("span",{style:{fontSize:16,fontWeight:600,color:o.primary},children:t.title}),t?.subtitle&&r("span",{style:{fontSize:12,color:o.secondary,paddingTop:4},children:t.subtitle})]}),r("div",{style:{position:"absolute",inset:0,display:"flex",alignItems:"center",justifyContent:"center",pointerEvents:"none"},children:r("span",{style:{fontSize:10,color:o.muted,fontStyle:"italic"},children:"Double tap: Toggle \u2022 Triple tap: Close"})})]})}function Q({children:t,footer:e,footerHeight:n,disableScrollWrapper:o,contentStyle:s,theme:d,background:u}){return D("div",{style:{flex:1,minHeight:0,display:"flex",flexDirection:"column",backgroundColor:d.background,borderBottomLeftRadius:16,borderBottomRightRadius:16,overflow:"hidden",position:"relative",...s},children:[u?r(tt,{}):null,o?t:r("div",{style:{flex:1,minHeight:0,overflowY:"auto",WebkitOverflowScrolling:"touch",paddingBottom:n},children:t}),e?r("div",{style:{position:"absolute",left:0,right:0,bottom:0,backgroundColor:d.background,borderBottomLeftRadius:16,borderBottomRightRadius:16},children:e}):null]})}const Z="transform 320ms cubic-bezier(0.16, 1, 0.3, 1)";const O="opacity 200ms ease";function ut({props:t,theme:e,viewport:n,effectiveMaxHeight:o,panelHeight:s,setPanelHeight:d,onHeaderTap:u}){const{onClose:w,children:p,header:f,styles:c={},minHeight:g=et,footer:l,footerHeight:m=0,disableScrollWrapper:v,zIndex:R=1e3,background:T=true}=t;const b=F(null);const I=F(null);const[S,C]=y(false);const[$,P]=y(false);const k=F(false);const M=F(s);N(()=>{const x=requestAnimationFrame(()=>P(true));return()=>cancelAnimationFrame(x)},[]);const L=x=>{if(k.current)return;const _=x.currentTarget.getBoundingClientRect().top;const W=x.clientY-_;G(x,{onStart:()=>C(true),onMove:E=>{const A=E.clientY-W;const i=Math.max(g,Math.min(n.height-A,o));M.current=i;if(b.current)b.current.style.height=`${i}px`},onEnd:(E,{dy:A,vy:i,wasTap:a})=>{C(false);if(a){u();return}if(st(i,A,M.current,g)){k.current=true;const H=I.current;if(H){H.style.transition=`${Z}, ${O}`;H.style.transform="translateY(100%)";H.style.opacity="0"}setTimeout(w,220);return}d(M.current)}})};return r("div",{style:{position:"fixed",inset:0,zIndex:R,pointerEvents:"none"},children:r("div",{ref:I,style:{position:"absolute",bottom:0,left:0,right:0,pointerEvents:"auto",transform:$?"translateY(0)":"translateY(100%)",opacity:$?1:0,transition:`${Z}, ${O}`},children:D("div",{ref:b,style:{display:"flex",flexDirection:"column",height:s,backgroundColor:e.panel,borderTopLeftRadius:16,borderTopRightRadius:16,border:`1px solid ${e.border}`,boxShadow:`0 -4px 12px ${e.info}4D, 0 -2px 24px rgba(0,0,0,0.4)`,...c.container},children:[r("div",{onPointerDown:L,style:{minHeight:56,display:"flex",backgroundColor:e.panel,borderTopLeftRadius:16,borderTopRightRadius:16,borderBottom:"1px solid rgba(255, 255, 255, 0.1)",cursor:S?"ns-resize":"grab",touchAction:"none",userSelect:"none"},children:r(K,{header:f,isResizing:S,mode:"bottomSheet",theme:e})}),r(Q,{footer:l,footerHeight:m,disableScrollWrapper:v,contentStyle:c.content,theme:e,background:T,children:p})]})})})}function pt({isActive:t,theme:e}){return r("div",{style:{width:20,height:20,borderRadius:10,margin:5,backgroundColor:t?e.success+"1A":"transparent",border:t?`2px solid ${e.success}`:"2px solid transparent",boxShadow:t?`0 0 8px ${e.success}99`:"none"}})}function ft({props:t,theme:e,viewport:n,insets:o,rect:s,setRect:d,onHeaderTap:u}){const{onClose:w,children:p,header:f,styles:c={},footer:g,footerHeight:l=0,onBack:m,disableScrollWrapper:v,zIndex:R=1e3,background:T=true}=t;const b=F(null);const[I,S]=y(false);const[C,$]=y(false);const[P,k]=y(false);const M=F(s);M.current=s;const L=F(s);N(()=>{const i=requestAnimationFrame(()=>k(true));return()=>cancelAnimationFrame(i)},[]);const x=i=>{L.current=i;const a=b.current;if(!a)return;a.style.transform=`translate(${i.left}px, ${i.top}px)`;a.style.width=`${i.width}px`;a.style.height=`${i.height}px`};const _=i=>{const a=M.current;const H=i.clientX-a.left;const Y=i.clientY-a.top;G(i,{onMove:(B,{dx:z,dy:h})=>{if(Math.abs(z)+Math.abs(h)>5)S(true);x({...L.current,left:B.clientX-H,top:B.clientY-Y})},onEnd:(B,{wasTap:z})=>{S(false);if(z){u();return}const h=L.current;const j={...h,left:Math.max(o.left,Math.min(h.left,n.width-o.right-h.width)),top:Math.max(o.top,Math.min(h.top,n.height-o.bottom-h.height))};x(j);d(j)}})};const W=i=>a=>{a.stopPropagation();const H={...M.current};let Y=false;G(a,{onStart:()=>$(true),onMove:(B,{dx:z,dy:h})=>{if(Math.abs(z)<.5&&Math.abs(h)<.5)return;Y=true;x(rt(i,H,z,h,n,o,it(n.width),nt))},onEnd:()=>{$(false);if(!Y){if(i==="topRight"){w();return}if(i==="topLeft"&&m){m();return}}d(L.current)}})};const E=I||C;const A=[{corner:"topLeft",style:{top:4,left:4}},{corner:"topRight",style:{top:4,right:4}},{corner:"bottomLeft",style:{bottom:4,left:4}},{corner:"bottomRight",style:{bottom:4,right:4}}];return D("div",{ref:b,style:{position:"fixed",top:0,left:0,transform:`translate(${s.left}px, ${s.top}px)`,width:s.width,height:s.height,display:"flex",flexDirection:"column",backgroundColor:e.panel,borderRadius:16,border:E?`2px solid ${e.success}`:`1px solid ${e.border}`,boxShadow:E?`0 0 12px ${e.success}99`:`0 0 20px ${e.info}80, 0 8px 32px rgba(0,0,0,0.5)`,zIndex:R,opacity:P?1:0,transition:O,...c.container},children:[r("div",{onPointerDown:_,style:{minHeight:56,display:"flex",backgroundColor:e.panel,borderTopLeftRadius:14,borderTopRightRadius:14,borderBottom:"1px solid rgba(255, 255, 255, 0.1)",cursor:I?"grabbing":"grab",touchAction:"none",userSelect:"none"},children:r(K,{header:f,isResizing:E,mode:"floating",theme:e})}),r(Q,{footer:g,footerHeight:l,disableScrollWrapper:v,contentStyle:c.content,theme:e,background:T,children:p}),A.map(({corner:i,style:a})=>r("div",{onPointerDown:W(i),style:{position:"absolute",width:30,height:30,zIndex:10,touchAction:"none",cursor:i==="topLeft"||i==="bottomRight"?"nwse-resize":"nesw-resize",...a},children:r(pt,{isActive:E,theme:e})},i))]})}export const BottomSheet=t=>{const{visible:e,onClose:n,maxHeight:o,initialHeight:s=ot,initialMode:d="bottomSheet",onModeChange:u,theme:w}=t;const p={...at,...w};const{viewport:f,insets:c}=dt();const[g,l]=y(d);const[m,v]=y(s);const[R,T]=y(()=>({width:X,height:V,left:(window.innerWidth-X)/2,top:(window.innerHeight-V)/2}));const b=o||f.height-c.top;const I=()=>{const C=g==="bottomSheet"?"floating":"bottomSheet";l(C);u?.(C)};const S=lt(I,n);if(!e){return null}if(g==="floating"){return r(ft,{props:t,theme:p,viewport:f,insets:c,rect:R,setRect:T,onHeaderTap:S})}return r(ut,{props:t,theme:p,viewport:f,effectiveMaxHeight:b,panelHeight:Math.min(m,b),setPanelHeight:v,onHeaderTap:S})};