@lodev09/react-native-true-sheet 3.10.1 → 3.11.0-beta.0

package/lib/module/TrueSheet.web.js

@@ -1,456 +1,684 @@
 "use strict";
 
-import { createElement, Fragment, forwardRef, isValidElement, useCallback, useContext, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { View, StyleSheet, useColorScheme, useWindowDimensions } from 'react-native';
-import BottomSheet, { BottomSheetBackdrop, BottomSheetFooter, BottomSheetModal, BottomSheetView } from '@gorhom/bottom-sheet';
-import { useDerivedValue, useSharedValue } from 'react-native-reanimated';
-import { BottomSheetContext } from "./TrueSheetProvider.web.js";
+/// <reference lib="dom" />
+import { createElement, forwardRef, isValidElement, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { View, useColorScheme, useWindowDimensions } from 'react-native';
+import { Drawer } from "./web/vaul/index.js";
+import { TRANSITIONS } from "./web/vaul/constants.js";
+import { usePortalContainer, useRegisterSheet, useSheetStack } from "./TrueSheetProvider.web.js";
+import { COLOR_SURFACE_CONTAINER_LOW_DARK, COLOR_SURFACE_CONTAINER_LOW_LIGHT, DEFAULT_ANCHOR_OFFSET, DEFAULT_CORNER_RADIUS, DEFAULT_DETACHED_OFFSET, DEFAULT_GRABBER_COLOR_DARK, DEFAULT_GRABBER_COLOR_LIGHT, DEFAULT_GRABBER_HEIGHT, DEFAULT_GRABBER_TOP_MARGIN, DEFAULT_GRABBER_WIDTH, DEFAULT_FORM_SHEET_HEIGHT_RATIO, DEFAULT_FORM_SHEET_WIDTH, DEFAULT_MAX_WIDTH } from "./web/constants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const DEFAULT_CORNER_RADIUS = 16;
-const DEFAULT_ELEVATION = 4;
-const DEFAULT_MAX_WIDTH = 640;
-// M3 baseline surfaceContainerLow
-const COLOR_SURFACE_CONTAINER_LOW_LIGHT = '#F7F2FA';
-const COLOR_SURFACE_CONTAINER_LOW_DARK = '#1D1B20';
-const DEFAULT_ANCHOR_OFFSET = 16;
-const DEFAULT_DETACHED_OFFSET = 16;
-const DEFAULT_GRABBER_COLOR_LIGHT = 'rgba(0, 0, 0, 0.3)';
-const DEFAULT_GRABBER_COLOR_DARK = 'rgba(255, 255, 255, 0.3)';
-const DEFAULT_GRABBER_WIDTH = 32;
-const DEFAULT_GRABBER_HEIGHT = 4;
-
-/**
- * Converts elevation to CSS box-shadow based on Material Design 3 elevation system.
- * Uses a combination of ambient and key shadows for realistic depth.
- */
-const getElevationShadow = elevation => {
-  if (elevation <= 0) return 'none';
-  const ambientY = elevation * 0.5;
-  const ambientBlur = elevation * 1.5;
-  const ambientOpacity = 0.08 + elevation * 0.01;
-  const keyY = elevation;
-  const keyBlur = elevation * 2;
-  const keyOpacity = 0.12 + elevation * 0.02;
-  return `0px ${ambientY}px ${ambientBlur}px rgba(0, 0, 0, ${ambientOpacity}), 0px ${keyY}px ${keyBlur}px rgba(0, 0, 0, ${keyOpacity})`;
-};
-const renderSlot = slot => {
-  if (!slot) return null;
-  if (/*#__PURE__*/isValidElement(slot)) return slot;
-  return /*#__PURE__*/createElement(slot);
-};
 const TrueSheetComponent = /*#__PURE__*/forwardRef((props, ref) => {
   const {
+    children,
     name,
-    detents = [0.5, 1],
     dismissible = true,
     draggable = true,
-    dimmed = true,
-    dimmedDetentIndex = 0,
-    children,
-    scrollable = false,
-    initialDetentIndex = -1,
+    cornerRadius,
+    style,
     backgroundColor: backgroundColorProp,
-    cornerRadius = DEFAULT_CORNER_RADIUS,
-    elevation = DEFAULT_ELEVATION,
-    grabber = true,
-    grabberOptions,
     maxContentHeight,
     maxContentWidth,
     anchor = 'center',
     anchorOffset = DEFAULT_ANCHOR_OFFSET,
+    grabber = true,
+    grabberOptions,
+    detents = [0.5, 1],
+    dimmed = true,
+    dimmedDetentIndex = 0,
+    initialDetentIndex = -1,
     header,
     headerStyle,
     footer,
     footerStyle,
-    onMount,
+    scrollable = false,
+    scrollableOptions,
+    pageSizing = true,
+    detached = false,
+    detachedOffset = DEFAULT_DETACHED_OFFSET,
+    elevation = 4,
+    insetAdjustment = 'automatic',
+    initialDetentAnimated = true,
+    onPositionChange,
     onWillPresent,
     onDidPresent,
     onWillDismiss,
     onDidDismiss,
     onDetentChange,
-    onPositionChange,
     onDragBegin,
     onDragChange,
     onDragEnd,
+    onMount,
     onWillFocus,
     onDidFocus,
     onWillBlur,
-    onDidBlur,
-    detached,
-    detachedOffset = DEFAULT_DETACHED_OFFSET,
-    stackBehavior = 'switch',
-    style
+    onDidBlur
   } = props;
-  const colorScheme = useColorScheme();
-  const backgroundColor = backgroundColorProp ?? (colorScheme === 'dark' ? COLOR_SURFACE_CONTAINER_LOW_DARK : COLOR_SURFACE_CONTAINER_LOW_LIGHT);
+  const validDetents = useMemo(() => detents.filter(d => typeof d === 'number' || d === 'auto'), [detents]);
+  const snapPointsProps = useMemo(() => {
+    if (validDetents.length === 0) return {};
+    return {
+      snapPoints: validDetents,
+      fadeFromIndex: Math.min(dimmedDetentIndex, validDetents.length - 1)
+    };
+  }, [validDetents, dimmedDetentIndex]);
   const {
     width: windowWidth,
     height: windowHeight
   } = useWindowDimensions();
   const isLandscapeOrTablet = windowWidth >= 600 || windowWidth > windowHeight;
-  const defaultName = useId();
-  const sheetName = name ?? defaultName;
-  const bottomSheetContext = useContext(BottomSheetContext);
-  const bottomSheetModalRef = useRef(null);
-  const bottomSheetRef = useRef(null);
-  const initialDetentIndexRef = useRef(initialDetentIndex);
-  const currentIndexRef = useRef(0);
-  const isPresenting = useRef(false);
-  const isDismissing = useRef(false);
-  const isMinimized = useRef(false);
-  const isDragging = useRef(false);
-  const presentResolver = useRef(null);
-  const dismissResolver = useRef(null);
-  const animatedPosition = useSharedValue(windowHeight);
-  const animatedIndex = useSharedValue(0);
-  const [snapIndex, setSnapIndex] = useState(initialDetentIndex);
-  const [isMounted, setIsMounted] = useState(false);
-  const isNonModal = stackBehavior === 'none';
-  useDerivedValue(() => {
-    onPositionChange?.({
-      nativeEvent: {
-        position: animatedPosition.value,
-        index: animatedIndex.value,
-        detent: detents[animatedIndex.value] ?? 0,
-        realtime: true
-      }
-    });
-  });
-  const hasAutoDetent = detents.includes('auto');
-  const containerHeight = maxContentHeight ?? windowHeight;
-  const snapPoints = useMemo(() => detents.filter(detent => detent !== 'auto' && typeof detent === 'number').map(detent => Math.min(1, Math.max(0.1, detent)) * containerHeight), [detents, containerHeight]);
-  const handleChange = useCallback((index, _position, _type) => {
-    const previousIndex = currentIndexRef.current;
-    currentIndexRef.current = index;
+  const colorScheme = useColorScheme();
+  const backgroundColor = backgroundColorProp ?? (colorScheme === 'dark' ? COLOR_SURFACE_CONTAINER_LOW_DARK : COLOR_SURFACE_CONTAINER_LOW_LIGHT);
+  const shouldAutoPresent = initialDetentIndex >= 0 && initialDetentIndex < validDetents.length;
+  const [isOpen, setIsOpen] = useState(shouldAutoPresent);
+  const [activeSnapPoint, setActiveSnapPoint] = useState(() => validDetents[shouldAutoPresent ? initialDetentIndex : 0] ?? null);
 
-    // Handle drag end
-    if (isDragging.current && !isPresenting.current) {
-      isDragging.current = false;
-      onDragEnd?.({
-        nativeEvent: {
-          index,
-          position: animatedPosition.value,
-          detent: detents[index] ?? 0
-        }
-      });
+  // Keep activeSnapPoint valid if detents change (e.g., prop updates).
+  useEffect(() => {
+    if (validDetents.length === 0) return;
+    setActiveSnapPoint(current => current != null && validDetents.includes(current) ? current : validDetents[0]);
+  }, [validDetents]);
+  const validDetentsRef = useRef(validDetents);
+  validDetentsRef.current = validDetents;
+  const handleSetActiveSnapPoint = useCallback(snapPoint => {
+    setActiveSnapPoint(snapPoint == null ? null : typeof snapPoint === 'number' || snapPoint === 'auto' ? snapPoint : null);
+  }, []);
+  const handleOpenChange = useCallback(open => {
+    if (!open && isOpen) {
+      setIsOpen(false);
     }
-    if (!isPresenting.current && !isMinimized.current && previousIndex !== index && index >= 0) {
-      onDetentChange?.({
-        nativeEvent: {
-          index,
-          position: animatedPosition.value,
-          detent: detents[index] ?? 0
-        }
-      });
+  }, [isOpen]);
+  const portalContainer = usePortalContainer();
+  const handlePointerDownOutside = e => {
+    const target = e.target;
+    if (!(target instanceof Node)) return;
+    // Pointer down that landed outside this sheet's portal container (e.g.,
+    // in another screen's tree when navigating) should not close the drawer.
+    if (portalContainer && !portalContainer.contains(target)) {
+      e.preventDefault();
     }
-    if (isPresenting.current) {
-      isPresenting.current = false;
-
-      // Resolve present promise
-      if (presentResolver.current) {
-        presentResolver.current();
-        presentResolver.current = null;
+  };
+  const dismissAboveRef = useRef(async () => {});
+  const methods = useMemo(() => ({
+    present: async (index = 0) => {
+      const detent = validDetentsRef.current[index];
+      if (detent === undefined) {
+        throw new Error(`TrueSheet: present index (${index}) is out of bounds. detents array has ${validDetentsRef.current.length} item(s)`);
       }
-      onDidPresent?.({
-        nativeEvent: {
-          index,
-          position: animatedPosition.value,
-          detent: detents[index] ?? 0
-        }
-      });
-      onDidFocus?.({
-        nativeEvent: null
-      });
+      setActiveSnapPoint(detent);
+      setIsOpen(true);
+    },
+    dismiss: async () => {
+      setIsOpen(false);
+    },
+    resize: async index => {
+      const detent = validDetentsRef.current[index];
+      if (detent === undefined) {
+        throw new Error(`TrueSheet: resize index (${index}) is out of bounds. detents array has ${validDetentsRef.current.length} item(s)`);
+      }
+      setActiveSnapPoint(detent);
+    },
+    dismissStack: async animated => {
+      await dismissAboveRef.current(animated);
     }
+  }), []);
+  useImperativeHandle(ref, () => methods, [methods]);
+  const methodsRef = useRef(methods);
+  useRegisterSheet(name, methodsRef);
+  const drawerContentRef = useRef(null);
 
-    // Fire onDidBlur when sheet reaches minimized state (index -1 but still mounted)
-    if (isMinimized.current && index === -1) {
-      onDidBlur?.({
-        nativeEvent: null
-      });
+  // Present/dismiss events. The sheet settles via a CSS `transform` transition
+  // on either the drawer (snap-points on autopresent) or the wrapper (whole-
+  // card slide on reopen/dismiss). `Animation.finished` from the Web Animations
+  // API tracks whichever is actually running — reflects what the browser is
+  // doing, doesn't miss when no transition runs (same-value change), and
+  // handles interruptions correctly (a drag/resnap mid-present resolves only
+  // once all transform animations drain).
+  const onWillPresentRef = useRef(onWillPresent);
+  const onDidPresentRef = useRef(onDidPresent);
+  const onWillDismissRef = useRef(onWillDismiss);
+  const onDidDismissRef = useRef(onDidDismiss);
+  const onDetentChangeRef = useRef(onDetentChange);
+  const onDragBeginRef = useRef(onDragBegin);
+  const onDragChangeRef = useRef(onDragChange);
+  const onDragEndRef = useRef(onDragEnd);
+  const onPositionChangeRef = useRef(onPositionChange);
+  const activeSnapPointRef = useRef(activeSnapPoint);
+  useEffect(() => {
+    onWillPresentRef.current = onWillPresent;
+    onDidPresentRef.current = onDidPresent;
+    onWillDismissRef.current = onWillDismiss;
+    onDidDismissRef.current = onDidDismiss;
+    onDetentChangeRef.current = onDetentChange;
+    onDragBeginRef.current = onDragBegin;
+    onDragChangeRef.current = onDragChange;
+    onDragEndRef.current = onDragEnd;
+    onPositionChangeRef.current = onPositionChange;
+    activeSnapPointRef.current = activeSnapPoint;
+  });
+  const computeDetentInfo = useCallback(() => {
+    const snap = activeSnapPointRef.current;
+    const index = snap != null ? validDetentsRef.current.indexOf(snap) : -1;
+    const position = drawerContentRef.current?.getBoundingClientRect().top ?? 0;
+    const detent = typeof snap === 'number' ? snap : 0;
+    return {
+      index,
+      position,
+      detent
+    };
+  }, []);
+
+  // Mirror Android: interpolate fractional index and detent from the drawer's
+  // top-Y so continuous position updates (drag, animation) carry smooth values
+  // between detent boundaries. Numeric detent d → top-Y = (1 - d) * effectiveH.
+  // 'auto' resolves to the [data-vaul-auto-size-wrapper] element's measured
+  // offsetHeight — same signal vaul uses to compute its snap offset.
+  const interpolateFromPosition = useCallback(position => {
+    const snaps = validDetentsRef.current;
+    const count = snaps.length;
+    if (count === 0) return {
+      index: -1,
+      detent: 0
+    };
+    const windowH = window.innerHeight;
+    const effectiveH = detached ? windowH - detachedOffset : windowH;
+    // Matches vaul's height ceiling: min(effectiveH, maxContentHeight).
+    const ceiling = maxContentHeight !== undefined ? Math.min(effectiveH, maxContentHeight) : effectiveH;
+    const autoWrapper = drawerContentRef.current?.querySelector('[data-vaul-auto-size-wrapper]');
+    const autoHeight = Math.min(autoWrapper?.offsetHeight ?? ceiling / 2, ceiling);
+    const positions = [];
+    const values = [];
+    for (let i = 0; i < count; i++) {
+      const d = snaps[i];
+      if (typeof d === 'number') {
+        const h = Math.min(d * effectiveH, ceiling);
+        positions.push(effectiveH - h);
+        values.push(effectiveH > 0 ? h / effectiveH : 0);
+      } else {
+        positions.push(effectiveH - autoHeight);
+        values.push(effectiveH > 0 ? autoHeight / effectiveH : 0);
+      }
     }
 
-    // Fire onDidFocus when sheet is restored from minimized state
-    if (isMinimized.current && index >= 0) {
-      isMinimized.current = false;
-      onDidFocus?.({
-        nativeEvent: null
-      });
+    // Absorb subpixel drift from getBoundingClientRect so at-rest positions
+    // don't sneak into the below-first branch and emit near-zero negatives
+    // like `-1e-8` (which render as "-1" via JS scientific-notation toString).
+    const epsilon = 0.5;
+    const firstPos = positions[0];
+    const lastPos = positions[count - 1];
+    if (position > firstPos + epsilon) {
+      // Two ranges: index spans the full animation (windowH of wrapper
+      // travel) so it's smooth for driving dependent animations end-to-end;
+      // detent tracks the sheet's visible-height ratio (windowH - firstPos)
+      // so its 0–values[0] fade has fine resolution while the sheet is still
+      // in view. Both clamp to keep outputs in [-1, 0].
+      const indexRaw = (position - firstPos) / windowH;
+      const detentRaw = (position - firstPos) / Math.max(1, windowH - firstPos);
+      const indexProgress = Math.max(0, Math.min(1, indexRaw));
+      const detentProgress = Math.max(0, Math.min(1, detentRaw));
+      return {
+        index: -indexProgress,
+        detent: Math.max(0, values[0] * (1 - detentProgress))
+      };
     }
-  }, [detents, animatedPosition]);
-  const handleDismiss = useCallback(() => {
-    // Remove from stack when dismissed
-    bottomSheetContext?.removeFromStack(sheetName);
+    if (count === 1) return {
+      index: 0,
+      detent: values[0]
+    };
 
-    // Resolve dismiss promise
-    if (dismissResolver.current) {
-      dismissResolver.current();
-      dismissResolver.current = null;
+    // Clamp into the segment range so subpixel drift at the boundaries
+    // resolves cleanly to the nearest segment edge (index 0 or count-1).
+    const clamped = Math.max(lastPos, Math.min(firstPos, position));
+    for (let i = 0; i < count - 1; i++) {
+      const pos = positions[i];
+      const nextPos = positions[i + 1];
+      if (clamped >= nextPos && clamped <= pos) {
+        const range = pos - nextPos;
+        const progress = range > 0 ? (pos - clamped) / range : 0;
+        const clampedProgress = Math.max(0, Math.min(1, progress));
+        return {
+          index: i + clampedProgress,
+          detent: values[i] + clampedProgress * (values[i + 1] - values[i])
+        };
+      }
     }
-    onDidDismiss?.({
+    return {
+      index: count - 1,
+      detent: values[count - 1]
+    };
+  }, [detached, detachedOffset, maxContentHeight]);
+  const handlePositionChange = useCallback(position => {
+    const {
+      index,
+      detent
+    } = interpolateFromPosition(position);
+    onPositionChangeRef.current?.({
+      nativeEvent: {
+        index,
+        position,
+        detent,
+        realtime: true
+      }
+    });
+  }, [interpolateFromPosition]);
+
+  // Fire onMount once after first render. React-mount is the earliest point
+  // the component is ready for imperative calls, matching the native
+  // "ready for present" contract. Declared before the present/dismiss effect
+  // so it fires first during autopresent (onMount → onWillPresent).
+  const onMountRef = useRef(onMount);
+  useEffect(() => {
+    onMountRef.current = onMount;
+  });
+  useEffect(() => {
+    onMountRef.current?.({
       nativeEvent: null
     });
+  }, []);
 
-    // Reset states since sheet is being dismissed
-    isMinimized.current = false;
-    isDismissing.current = false;
-    isDragging.current = false;
-  }, [sheetName]);
-  const handleAnimate = useCallback((_fromIndex, toIndex) => {
-    // Detect drag begin (when not presenting or dismissing)
-    if (!isPresenting.current && !isDismissing.current && !isDragging.current && toIndex >= 0) {
-      isDragging.current = true;
-      onDragBegin?.({
-        nativeEvent: {
-          index: currentIndexRef.current,
-          position: animatedPosition.value,
-          detent: detents[currentIndexRef.current] ?? 0
-        }
+  // Start at `false` so a mount with `isOpen=true` (autopresent via
+  // `initialDetentIndex`) is detected as a false→true transition and fires
+  // `onWillPresent`.
+  const wasOpenRef = useRef(false);
+  useEffect(() => {
+    const wasOpen = wasOpenRef.current;
+    wasOpenRef.current = isOpen;
+    if (!isOpen && !wasOpen) return undefined;
+    const present = !wasOpen && isOpen;
+    if (present) {
+      onWillPresentRef.current?.({
+        nativeEvent: computeDetentInfo()
       });
-    }
-
-    // Drag change during animation
-    if (isDragging.current && toIndex >= 0) {
-      onDragChange?.({
-        nativeEvent: {
-          index: toIndex,
-          position: animatedPosition.value,
-          detent: detents[toIndex] ?? 0
-        }
+    } else if (wasOpen && !isOpen) {
+      onWillDismissRef.current?.({
+        nativeEvent: null
       });
+    } else {
+      return undefined;
     }
-    if (isPresenting.current) {
-      // Fire onMount on first present (before willPresent, matching native)
-      if (!isMounted) {
-        setIsMounted(true);
-        onMount?.({
+    const fireDone = () => {
+      if (present) {
+        onDidPresentRef.current?.({
+          nativeEvent: computeDetentInfo()
+        });
+      } else {
+        onDidDismissRef.current?.({
           nativeEvent: null
         });
       }
-      onWillPresent?.({
-        nativeEvent: {
-          index: toIndex,
-          position: animatedPosition.value,
-          detent: detents[toIndex] ?? 0
+    };
+    let canceled = false;
+    let rafId = 0;
+    const start = () => {
+      if (canceled) return;
+      const drawer = drawerContentRef.current;
+      if (!drawer) {
+        // Drawer hasn't mounted yet (Radix Presence defers the portal mount
+        // past the first effect pass). Poll until the ref is populated.
+        rafId = window.requestAnimationFrame(start);
+        return;
+      }
+      const wrapper = drawer.closest('[data-vaul-detached-wrapper]') ?? null;
+      const targets = wrapper ? [drawer, wrapper] : [drawer];
+      const waitForSettle = () => {
+        if (canceled) return;
+        // Force style recalc so transitions queued by vaul's effects this
+        // commit are registered in `getAnimations()`. RAF callbacks run BEFORE
+        // the frame's style recalc, and ignoring this returns a stale empty
+        // list — we'd fire `did` immediately with nothing queued.
+
+        drawer.offsetHeight;
+        const pending = targets.flatMap(el => el.getAnimations().filter(a => a.playState !== 'finished'));
+        if (pending.length === 0) {
+          fireDone();
+          return;
         }
-      });
+        // allSettled: resolve even when a transition is canceled (drag /
+        // resnap), then re-check — a replacement transition may have started.
+        Promise.allSettled(pending.map(a => a.finished)).then(() => {
+          if (!canceled) waitForSettle();
+        });
+      };
+      waitForSettle();
+    };
+    rafId = window.requestAnimationFrame(start);
+    return () => {
+      canceled = true;
+      window.cancelAnimationFrame(rafId);
+    };
+  }, [isOpen, computeDetentInfo]);
 
-      // Focus events fire together with present events
-      onWillFocus?.({
-        nativeEvent: null
+  // Fire onDetentChange only while open→open. Present/dismiss have their own
+  // events and carry detent info via onDidPresent, so we skip those edges.
+  const detentChangeStateRef = useRef({
+    isOpen,
+    activeSnapPoint
+  });
+  useEffect(() => {
+    const prev = detentChangeStateRef.current;
+    detentChangeStateRef.current = {
+      isOpen,
+      activeSnapPoint
+    };
+    if (!prev.isOpen || !isOpen) return;
+    if (prev.activeSnapPoint === activeSnapPoint) return;
+    onDetentChangeRef.current?.({
+      nativeEvent: computeDetentInfo()
+    });
+  }, [isOpen, activeSnapPoint, computeDetentInfo]);
+
+  // Vaul's `onDrag` fires once per pointermove while dragging; the first tick
+  // after an idle gap marks the drag boundary, so track it via a ref.
+  const isDraggingRef = useRef(false);
+  const handleDrag = useCallback(() => {
+    if (!isDraggingRef.current) {
+      isDraggingRef.current = true;
+      onDragBeginRef.current?.({
+        nativeEvent: computeDetentInfo()
       });
     }
+    onDragChangeRef.current?.({
+      nativeEvent: computeDetentInfo()
+    });
+  }, [computeDetentInfo]);
+  const handleRelease = useCallback(() => {
+    if (!isDraggingRef.current) return;
+    isDraggingRef.current = false;
+    onDragEndRef.current?.({
+      nativeEvent: computeDetentInfo()
+    });
+  }, [computeDetentInfo]);
+  const {
+    isNested,
+    dismissAbove,
+    descendants
+  } = useSheetStack(methodsRef, drawerContentRef, isOpen);
+  dismissAboveRef.current = dismissAbove;
 
-    // Detect if sheet is being restored (will focus)
-    if (isMinimized.current && toIndex >= 0) {
-      onWillFocus?.({
+  // Mirror Android: translate this sheet down to match the deepest descendant's
+  // top so the whole stack visually aligns. Cascades because every ancestor
+  // re-runs whenever the stack (and thus its descendants) changes.
+  useEffect(() => {
+    const parent = drawerContentRef.current;
+    if (!parent) return;
+    const transition = `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`;
+    if (descendants.length === 0) {
+      parent.style.transition = transition;
+      parent.style.transform = '';
+      return;
+    }
+    const computeTargetY = () => {
+      const parentSnap = parseFloat(parent.style.getPropertyValue('--snap-point-height')) || 0;
+      let targetY = parentSnap;
+      for (const d of descendants) {
+        const node = d.nodeRef.current;
+        if (!node) continue;
+        const snap = parseFloat(node.style.getPropertyValue('--snap-point-height')) || 0;
+        if (snap > targetY) targetY = snap;
+      }
+      return targetY;
+    };
+    const apply = () => {
+      const targetY = computeTargetY();
+      const match = parent.style.transform.match(/translate3d\([^,]*,\s*(-?\d*\.?\d+)px/);
+      const currentY = match ? parseFloat(match[1]) : 0;
+      if (Math.abs(currentY - targetY) < 0.5) return;
+      parent.style.transition = transition;
+      parent.style.transform = `translate3d(0, ${targetY}px, 0)`;
+    };
+    const raf = requestAnimationFrame(apply);
+    // Vaul re-runs snapToPoint on window resize (e.g., mobile keyboard open)
+    // which clobbers the cascade transform. Re-apply whenever the parent's
+    // inline style changes.
+    const observer = new MutationObserver(apply);
+    observer.observe(parent, {
+      attributes: true,
+      attributeFilter: ['style']
+    });
+    return () => {
+      cancelAnimationFrame(raf);
+      observer.disconnect();
+    };
+  }, [descendants, activeSnapPoint]);
+
+  // Focus/blur events fire when a descendant sheet appears on top of this one
+  // (blur) or when all descendants are dismissed (focus). will-events fire
+  // synchronously at the transition boundary; did-events fire once the cascade
+  // transform drains. Intermediate count changes (1↔2) don't re-fire — this
+  // sheet stays blurred throughout.
+  const onWillBlurRef = useRef(onWillBlur);
+  const onDidBlurRef = useRef(onDidBlur);
+  const onWillFocusRef = useRef(onWillFocus);
+  const onDidFocusRef = useRef(onDidFocus);
+  useEffect(() => {
+    onWillBlurRef.current = onWillBlur;
+    onDidBlurRef.current = onDidBlur;
+    onWillFocusRef.current = onWillFocus;
+    onDidFocusRef.current = onDidFocus;
+  });
+  const prevDescendantCountRef = useRef(0);
+  useEffect(() => {
+    const prevCount = prevDescendantCountRef.current;
+    const count = descendants.length;
+    prevDescendantCountRef.current = count;
+    if (!isOpen) return;
+    const gained = count > 0 && prevCount === 0;
+    const lost = count === 0 && prevCount > 0;
+    if (!gained && !lost) return;
+    if (gained) {
+      onWillBlurRef.current?.({
+        nativeEvent: null
+      });
+    } else {
+      onWillFocusRef.current?.({
         nativeEvent: null
       });
     }
-    if (toIndex === -1 && !isPresenting.current) {
-      isMinimized.current = true;
-      onWillBlur?.({
+    const drawer = drawerContentRef.current;
+    if (!drawer) return;
+    let canceled = false;
+    const fireDone = () => {
+      if (canceled) return;
+      if (gained) onDidBlurRef.current?.({
+        nativeEvent: null
+      });else onDidFocusRef.current?.({
         nativeEvent: null
       });
+    };
+    const rafId = window.requestAnimationFrame(() => {
+      if (canceled) return;
+      // Force style recalc so the cascade effect's queued transform registers.
 
-      // Only fire willDismiss if this is an actual dismiss (not being backgrounded by another sheet)
-      const sheetsAbove = bottomSheetContext?.getSheetsAbove(sheetName) ?? [];
-      if (sheetsAbove.length === 0) {
-        onWillDismiss?.({
-          nativeEvent: null
-        });
+      drawer.offsetHeight;
+      const pending = drawer.getAnimations().filter(a => a.playState !== 'finished');
+      if (pending.length === 0) {
+        fireDone();
+        return;
       }
-    }
-  }, [detents, animatedPosition, sheetName, bottomSheetContext, isMounted, onMount]);
-  const backdropComponent = useCallback(backdropProps => {
-    if (!dimmed) {
-      return null;
-    }
-
-    // When not dismissible, collapse to below dimmed index instead of dismissing
-    const pressBehavior = dismissible ? 'close' : dimmedDetentIndex > 0 ? dimmedDetentIndex - 1 : 'none';
-    return /*#__PURE__*/_jsx(BottomSheetBackdrop, {
-      ...backdropProps,
-      opacity: 0.5,
-      appearsOnIndex: dimmedDetentIndex,
-      disappearsOnIndex: dimmedDetentIndex - 1,
-      pressBehavior: pressBehavior
+      Promise.allSettled(pending.map(a => a.finished)).then(() => {
+        if (!canceled) fireDone();
+      });
     });
-  }, [dimmed, dimmedDetentIndex, dismissible]);
-  const indicatorHeight = grabberOptions?.height ?? DEFAULT_GRABBER_HEIGHT;
-  const handleStyle = useMemo(() => grabber ? [styles.handle, {
-    paddingTop: grabberOptions?.topMargin
-  }] : {
-    display: 'none'
-  }, [grabber, grabberOptions?.topMargin]);
+    return () => {
+      canceled = true;
+      window.cancelAnimationFrame(rafId);
+    };
+  }, [isOpen, descendants.length]);
+  const effectiveCornerRadius = cornerRadius ?? DEFAULT_CORNER_RADIUS;
+
+  // Shadow cast upward from the sheet's top edge toward the background. Matches
+  // Android's `elevation` semantics roughly — the sheet "lifts" off whatever is
+  // behind it. Scales linearly so higher elevation reads as more separation.
+  const boxShadow = elevation > 0 ? `0 ${-elevation}px ${elevation * 3}px rgba(0, 0, 0, 0.15)` : undefined;
+  const mergedContentStyle = useMemo(() => ({
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    borderTopLeftRadius: effectiveCornerRadius,
+    borderTopRightRadius: effectiveCornerRadius,
+    backgroundColor: backgroundColor,
+    boxShadow,
+    // Lift content above iOS home indicator / bottom safe area when enabled.
+    paddingBottom: insetAdjustment === 'automatic' ? 'env(safe-area-inset-bottom, 0px)' : 0
+  }), [backgroundColor, effectiveCornerRadius, boxShadow, insetAdjustment]);
   const defaultGrabberColor = colorScheme === 'dark' ? DEFAULT_GRABBER_COLOR_DARK : DEFAULT_GRABBER_COLOR_LIGHT;
-  const handleIndicatorStyle = useMemo(() => ({
-    height: indicatorHeight,
-    borderRadius: grabberOptions?.cornerRadius ?? indicatorHeight / 2,
-    width: grabberOptions?.width ?? DEFAULT_GRABBER_WIDTH,
-    backgroundColor: grabberOptions?.color ?? defaultGrabberColor
-  }), [grabberOptions, indicatorHeight, defaultGrabberColor]);
-  const footerComponent = useMemo(() => footer ? footerProps => /*#__PURE__*/_jsx(BottomSheetFooter, {
-    style: StyleSheet.flatten([styles.footer, footerStyle]),
-    ...footerProps,
-    children: renderSlot(footer)
-  }) : undefined, [footer, footerStyle]);
+  const grabberHeight = grabberOptions?.height ?? DEFAULT_GRABBER_HEIGHT;
 
-  // For scrollable, we render the child directly
-  const ContainerComponent = scrollable ? Fragment : BottomSheetView;
-  const sheetMethodsRef = useRef({
-    present: (index = 0) => {
-      return new Promise(resolve => {
-        presentResolver.current = resolve;
-        setSnapIndex(index);
-        isPresenting.current = true;
-        if (isNonModal) {
-          bottomSheetRef.current?.snapToIndex(index);
-        } else {
-          bottomSheetContext?.pushToStack(sheetName);
-          bottomSheetModalRef.current?.present();
-        }
-      });
-    },
-    dismiss: () => {
-      return new Promise(resolve => {
-        dismissResolver.current = resolve;
-        isDismissing.current = true;
-        if (isNonModal) {
-          bottomSheetRef.current?.close();
-        } else {
-          bottomSheetModalRef.current?.dismiss();
-        }
-      });
-    },
-    dismissStack: () => {
-      return new Promise(resolve => {
-        // Dismiss only sheets above, keeping this sheet presented
-        const sheetsAbove = bottomSheetContext?.getSheetsAbove(sheetName) ?? [];
-        const immediateChild = sheetsAbove[sheetsAbove.length - 1];
-        if (immediateChild) {
-          // Dismiss the immediate child - gorhom will dismiss all sheets above it
-          bottomSheetContext?.dismiss(immediateChild).then(resolve);
-          return;
-        }
-        resolve();
-      });
-    },
-    resize: async index => {
-      if (isNonModal) {
-        bottomSheetRef.current?.snapToIndex(index);
-      } else {
-        bottomSheetModalRef.current?.snapToIndex(index);
-      }
-    }
-  });
-  useImperativeHandle(ref, () => sheetMethodsRef.current);
+  // Footer is rendered inside the wrapper via `detachedSiblings`, so it
+  // follows the wrapper on dismiss and drag-overshoot. Positioning is
+  // relative to the wrapper (contain: paint creates the containing block).
+  const footerFloatStyle = useMemo(() => ({
+    position: 'fixed',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    // Wrapper has `pointer-events: none` to let clicks fall through; the
+    // footer must opt back in.
+    pointerEvents: 'auto'
+  }), []);
 
-  // Register with context provider
-  useEffect(() => {
-    bottomSheetContext?.register(sheetName, sheetMethodsRef);
-    return () => {
-      bottomSheetContext?.unregister(sheetName);
-    };
-  }, [sheetName]);
+  // Form-sheet style (iOS pageSizing=false): centered floating card with a
+  // default width and a height capped to a fraction of the window. We reuse
+  // the existing detached mechanic so drag/snap math stays correct — the
+  // wrapper is bottom-attached with a computed offset that centers it
+  // vertically.
+  const isFormSheet = isLandscapeOrTablet && maxContentWidth == null && !pageSizing;
+  const effectiveMaxContentHeight = maxContentHeight ?? (isFormSheet ? windowHeight * DEFAULT_FORM_SHEET_HEIGHT_RATIO : undefined);
+  const effectiveDetached = isFormSheet || detached;
+  const effectiveDetachedOffset = isFormSheet ? Math.max(0, (windowHeight - (effectiveMaxContentHeight ?? 0)) / 2) : detachedOffset;
 
-  // Auto-present on mount if initialDetentIndex is set
-  useEffect(() => {
-    if (initialDetentIndexRef.current >= 0) {
-      sheetMethodsRef.current.present(initialDetentIndexRef.current);
+  // The wrapper holds all horizontal sizing/anchoring so its rounded-bottom
+  // clip (when detached) aligns with the drawer's horizontal bounds on
+  // desktop — otherwise its corners sit at the far viewport edges.
+  // Mirrors iOS setupSheetSizing: maxContentWidth wins (forces pageSizing
+  // off). pageSizing on → constrain to readable width (page-sheet);
+  // pageSizing off with no maxContentWidth → form-sheet width.
+  // Detached without a width constraint applies anchorOffset on both edges so
+  // the floating card breathes from the viewport sides.
+  const wrapperStyle = useMemo(() => {
+    const maxWidth = isLandscapeOrTablet ? isFormSheet ? DEFAULT_FORM_SHEET_WIDTH : maxContentWidth ?? (pageSizing ? DEFAULT_MAX_WIDTH : undefined) : undefined;
+    if (maxWidth == null && !detached) return undefined;
+    let marginLeft;
+    let marginRight;
+    if (isFormSheet) {
+      marginLeft = 'auto';
+      marginRight = 'auto';
+    } else if (maxWidth == null) {
+      marginLeft = anchorOffset;
+      marginRight = anchorOffset;
+    } else {
+      marginLeft = anchor === 'left' ? anchorOffset : 'auto';
+      marginRight = anchor === 'right' ? anchorOffset : 'auto';
     }
-  }, []);
-  const sheetContent = /*#__PURE__*/_jsxs(ContainerComponent, {
-    children: [header && /*#__PURE__*/_jsx(View, {
-      style: headerStyle,
-      children: renderSlot(header)
-    }), scrollable ? children : /*#__PURE__*/_jsx(View, {
-      style: style,
-      children: children
-    })]
-  });
-  const sharedProps = {
-    style: [styles.root, {
-      backgroundColor,
-      borderTopLeftRadius: cornerRadius,
-      borderTopRightRadius: cornerRadius,
-      borderBottomLeftRadius: detached ? cornerRadius : 0,
-      borderBottomRightRadius: detached ? cornerRadius : 0,
-      boxShadow: getElevationShadow(elevation),
-      maxWidth: isLandscapeOrTablet ? maxContentWidth ?? DEFAULT_MAX_WIDTH : undefined,
-      marginLeft: isLandscapeOrTablet ? anchor === 'left' ? anchorOffset : 'auto' : undefined,
-      marginRight: isLandscapeOrTablet ? anchor === 'right' ? anchorOffset : 'auto' : undefined,
-      marginHorizontal: detached ? anchorOffset : undefined
-    }],
-    backgroundComponent: null,
-    index: snapIndex,
-    enablePanDownToClose: dismissible,
-    enableContentPanningGesture: draggable,
-    enableHandlePanningGesture: draggable,
-    animatedPosition,
-    animatedIndex,
-    handleStyle,
-    handleIndicatorStyle,
-    onChange: handleChange,
-    onAnimate: handleAnimate,
-    enableDynamicSizing: hasAutoDetent,
-    maxDynamicContentSize: maxContentHeight,
-    snapPoints: snapPoints.length > 0 ? snapPoints : undefined,
-    detached,
-    bottomInset: detached ? detachedOffset : undefined,
-    backdropComponent,
-    footerComponent
-  };
-  if (isNonModal) {
-    return /*#__PURE__*/_jsx(BottomSheet, {
-      ref: bottomSheetRef,
-      onClose: handleDismiss,
-      ...sharedProps,
-      children: sheetContent
-    });
-  }
-  return /*#__PURE__*/_jsx(BottomSheetModal, {
-    ref: bottomSheetModalRef,
-    name: sheetName,
-    animateOnMount: true,
-    onDismiss: handleDismiss,
-    stackBehavior: stackBehavior,
-    ...sharedProps,
-    children: sheetContent
+    return {
+      ...(maxWidth != null && {
+        maxWidth
+      }),
+      marginLeft,
+      marginRight
+    };
+  }, [isLandscapeOrTablet, isFormSheet, maxContentWidth, pageSizing, anchor, anchorOffset, detached]);
+  const handleStyle = useMemo(() => ({
+    height: grabberHeight,
+    width: grabberOptions?.width ?? DEFAULT_GRABBER_WIDTH,
+    borderRadius: grabberOptions?.cornerRadius ?? grabberHeight / 2,
+    backgroundColor: grabberOptions?.color ?? defaultGrabberColor,
+    opacity: 1,
+    marginTop: grabberOptions?.topMargin ?? DEFAULT_GRABBER_TOP_MARGIN
+  }), [grabberOptions, grabberHeight, defaultGrabberColor]);
+  return /*#__PURE__*/_jsx(Drawer.Root, {
+    open: isOpen,
+    onOpenChange: handleOpenChange,
+    onPositionChange: handlePositionChange,
+    onDrag: handleDrag,
+    onRelease: handleRelease,
+    dismissible: dismissible,
+    draggable: draggable,
+    handleOnly: scrollable && scrollableOptions?.scrollingExpandsSheet === false,
+    repositionInputs: false,
+    modal: dimmed,
+    nested: isNested,
+    detached: effectiveDetached,
+    detachedOffset: effectiveDetachedOffset,
+    detachedRadius: effectiveCornerRadius,
+    maxContentHeight: effectiveMaxContentHeight,
+    initialAnimated: initialDetentAnimated,
+    detachedWrapperStyle: wrapperStyle,
+    activeSnapPoint: activeSnapPoint,
+    setActiveSnapPoint: handleSetActiveSnapPoint,
+    ...snapPointsProps,
+    children: /*#__PURE__*/_jsxs(Drawer.Portal, {
+      container: portalContainer ?? undefined,
+      children: [/*#__PURE__*/_jsx(Drawer.Overlay, {
+        style: overlayStyle
+      }), /*#__PURE__*/_jsxs(Drawer.Content, {
+        ref: drawerContentRef,
+        style: mergedContentStyle,
+        onPointerDownOutside: handlePointerDownOutside,
+        detachedSiblings: footer ? /*#__PURE__*/_jsx("div", {
+          style: footerFloatStyle,
+          children: /*#__PURE__*/_jsx(View, {
+            style: footerStyle,
+            children: /*#__PURE__*/isValidElement(footer) ? footer : /*#__PURE__*/createElement(footer)
+          })
+        }) : undefined,
+        children: [/*#__PURE__*/_jsx(Drawer.Title, {
+          style: visuallyHiddenStyle,
+          children: "Sheet"
+        }), grabber && /*#__PURE__*/_jsx(Drawer.Handle, {
+          style: handleStyle
+        }), header && /*#__PURE__*/_jsx(View, {
+          style: headerStyle,
+          children: /*#__PURE__*/isValidElement(header) ? header : /*#__PURE__*/createElement(header)
+        }), scrollable ? /*#__PURE__*/_jsx("div", {
+          style: scrollableContainerStyle,
+          children: /*#__PURE__*/_jsx(View, {
+            style: style,
+            children: children
+          })
+        }) : /*#__PURE__*/_jsx(View, {
+          style: style,
+          children: children
+        })]
+      })]
+    })
   });
 });
-const STATIC_METHOD_ERROR = 'Static methods are not supported on web. Use the useTrueSheet() hook instead.';
-export const TrueSheet = TrueSheetComponent;
-TrueSheet.present = async () => {
-  throw new Error(STATIC_METHOD_ERROR);
+const overlayStyle = {
+  position: 'fixed',
+  inset: 0,
+  backgroundColor: 'rgba(0, 0, 0, 0.5)'
 };
-TrueSheet.dismiss = async () => {
-  throw new Error(STATIC_METHOD_ERROR);
+const scrollableContainerStyle = {
+  flex: 1,
+  minHeight: 0,
+  overflowY: 'auto',
+  overscrollBehavior: 'contain',
+  touchAction: 'pan-y'
 };
-TrueSheet.dismissStack = async () => {
-  throw new Error(STATIC_METHOD_ERROR);
+const visuallyHiddenStyle = {
+  position: 'absolute',
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: 'hidden',
+  clip: 'rect(0, 0, 0, 0)',
+  whiteSpace: 'nowrap',
+  border: 0
 };
-TrueSheet.resize = async () => {
-  throw new Error(STATIC_METHOD_ERROR);
-};
-TrueSheet.dismissAll = async () => {
+const STATIC_METHOD_ERROR = 'Static methods are not supported on web. Use the useTrueSheet() hook instead.';
+export const TrueSheet = TrueSheetComponent;
+const rejectStatic = async () => {
   throw new Error(STATIC_METHOD_ERROR);
 };
-const styles = StyleSheet.create({
-  root: {
-    overflow: 'hidden'
-  },
-  handle: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    zIndex: 999,
-    paddingVertical: 10,
-    pointerEvents: 'none'
-  },
-  footer: {
-    pointerEvents: 'box-none'
-  }
-});
+TrueSheet.present = rejectStatic;
+TrueSheet.dismiss = rejectStatic;
+TrueSheet.dismissStack = rejectStatic;
+TrueSheet.resize = rejectStatic;
+TrueSheet.dismissAll = rejectStatic;
 //# sourceMappingURL=TrueSheet.web.js.map