@buoy-gg/bottom-sheet 7.0.15 → 7.0.17

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

@@ -0,0 +1,785 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BottomSheet = void 0;
+var _react = require("react");
+var _bottomSheetGeometry = require("./bottomSheetGeometry");
+var _useMultiTap = require("./useMultiTap");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 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.
+ */
+
+// ============================================================================
+// THEME — same palette as native BottomSheet.tsx defaultTheme
+// ============================================================================
+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] = (0, _react.useState)(() => ({
+    viewport: readViewport(),
+    insets: readSafeAreaInsets()
+  }));
+  (0, _react.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        position: 'absolute',
+        display: 'flex',
+        flexDirection: 'row',
+        gap: 2,
+        marginTop: 12
+      },
+      children: [0, 1, 2].map(i => /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DragIndicator, {
+        isResizing: isResizing,
+        mode: mode,
+        hasCustomContent: true,
+        theme: theme
+      }), header.customContent]
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: {
+      flex: 1,
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      position: 'relative'
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DragIndicator, {
+      isResizing: isResizing,
+      mode: mode,
+      theme: theme
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        padding: '0 16px',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center'
+      },
+      children: [header?.title &&
+      /*#__PURE__*/
+      // native headerTitle: 16px / 600 / primary
+      (0, _jsxRuntime.jsx)("span", {
+        style: {
+          fontSize: 16,
+          fontWeight: 600,
+          color: theme.primary
+        },
+        children: header.title
+      }), header?.subtitle &&
+      /*#__PURE__*/
+      // native headerSubtitle: 12px / secondary / paddingTop 4
+      (0, _jsxRuntime.jsx)("span", {
+        style: {
+          fontSize: 12,
+          color: theme.secondary,
+          paddingTop: 4
+        },
+        children: header.subtitle
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        position: 'absolute',
+        inset: 0,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        pointerEvents: 'none'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.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
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.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: [disableScrollWrapper ? children : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        flex: 1,
+        minHeight: 0,
+        overflowY: 'auto',
+        WebkitOverflowScrolling: 'touch',
+        paddingBottom: footerHeight
+      },
+      children: children
+    }), footer ? /*#__PURE__*/(0, _jsxRuntime.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 = _bottomSheetGeometry.MIN_HEIGHT,
+    footer,
+    footerHeight = 0,
+    disableScrollWrapper,
+    zIndex = 1000
+  } = props;
+  const sheetRef = (0, _react.useRef)(null);
+  const wrapperRef = (0, _react.useRef)(null);
+  const [isResizing, setIsResizing] = (0, _react.useState)(false);
+  const [entered, setEntered] = (0, _react.useState)(false);
+  const closingRef = (0, _react.useRef)(false);
+  const heightRef = (0, _react.useRef)(panelHeight);
+
+  // Enter animation: translateY 100% → 0 (native spring 180/22) + fade 200ms.
+  (0, _react.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 ((0, _bottomSheetGeometry.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__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      // native fullScreenContainer: absoluteFill + zIndex, box-none touches
+      position: 'fixed',
+      inset: 0,
+      zIndex,
+      pointerEvents: 'none'
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(HeaderBody, {
+            header: header,
+            isResizing: isResizing,
+            mode: "bottomSheet",
+            theme: theme
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SheetContent, {
+          footer: footer,
+          footerHeight: footerHeight,
+          disableScrollWrapper: disableScrollWrapper,
+          contentStyle: customStyles.content,
+          theme: theme,
+          children: children
+        })]
+      })
+    })
+  });
+}
+
+// ============================================================================
+// FLOATING MODE
+// ============================================================================
+function CornerHandleView({
+  isActive,
+  theme
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.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
+  } = props;
+  const windowRef = (0, _react.useRef)(null);
+  const [isDragging, setIsDragging] = (0, _react.useState)(false);
+  const [isResizing, setIsResizing] = (0, _react.useState)(false);
+  const [entered, setEntered] = (0, _react.useState)(false);
+  const rectRef = (0, _react.useRef)(rect);
+  rectRef.current = rect;
+  const liveRectRef = (0, _react.useRef)(rect);
+  (0, _react.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((0, _bottomSheetGeometry.resizeCorner)(corner, start, dx, dy, viewport, insets, (0, _bottomSheetGeometry.floatingMinWidth)(viewport.width), _bottomSheetGeometry.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(HeaderBody, {
+        header: header,
+        isResizing: active,
+        mode: "floating",
+        theme: theme
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SheetContent, {
+      footer: footer,
+      footerHeight: footerHeight,
+      disableScrollWrapper: disableScrollWrapper,
+      contentStyle: customStyles.content,
+      theme: theme,
+      children: children
+    }), corners.map(({
+      corner,
+      style
+    }) => /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(CornerHandleView, {
+        isActive: active,
+        theme: theme
+      })
+    }, corner))]
+  });
+}
+
+// ============================================================================
+// MAIN COMPONENT — mode router (each mode is its own subtree; rule4 style)
+// ============================================================================
+const BottomSheet = props => {
+  const {
+    visible,
+    onClose,
+    maxHeight,
+    initialHeight = _bottomSheetGeometry.DEFAULT_HEIGHT,
+    initialMode = 'bottomSheet',
+    onModeChange,
+    theme: customTheme
+  } = props;
+  const theme = {
+    ...defaultTheme,
+    ...customTheme
+  };
+  const {
+    viewport,
+    insets
+  } = useViewportAndInsets();
+  const [mode, setMode] = (0, _react.useState)(initialMode);
+  const [panelHeight, setPanelHeight] = (0, _react.useState)(initialHeight);
+  const [floatingRect, setFloatingRect] = (0, _react.useState)(() => ({
+    width: _bottomSheetGeometry.FLOATING_WIDTH,
+    height: _bottomSheetGeometry.FLOATING_HEIGHT,
+    left: (window.innerWidth - _bottomSheetGeometry.FLOATING_WIDTH) / 2,
+    top: (window.innerHeight - _bottomSheetGeometry.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 = (0, _useMultiTap.useMultiTap)(toggleMode, onClose);
+  if (!visible) {
+    return null;
+  }
+  if (mode === 'floating') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingWindow, {
+      props: props,
+      theme: theme,
+      viewport: viewport,
+      insets: insets,
+      rect: floatingRect,
+      setRect: setFloatingRect,
+      onHeaderTap: handleHeaderTap
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(SheetPanel, {
+    props: props,
+    theme: theme,
+    viewport: viewport,
+    effectiveMaxHeight: effectiveMaxHeight,
+    panelHeight: Math.min(panelHeight, effectiveMaxHeight),
+    setPanelHeight: setPanelHeight,
+    onHeaderTap: handleHeaderTap
+  });
+};
+exports.BottomSheet = BottomSheet;