@howells/stacksheet 1.0.1 → 1.1.0

package/dist/index.js

@@ -1,8 +1,6 @@
 // src/springs.ts
 var springs = {
-  soft: { stiffness: 120, damping: 18, mass: 1 },
   subtle: { stiffness: 300, damping: 30, mass: 1 },
-  natural: { stiffness: 200, damping: 20, mass: 1 },
   snappy: { stiffness: 400, damping: 28, mass: 0.8 },
   stiff: { stiffness: 400, damping: 40, mass: 1 }
 };
@@ -10,7 +8,7 @@ var springs = {
 // src/config.ts
 var DEFAULT_STACKING = {
   scaleStep: 0.04,
-  offsetStep: 36,
+  offsetStep: 16,
   opacityStep: 0,
   radius: 12,
   renderThreshold: 3
@@ -19,9 +17,19 @@ var DEFAULT_SIDE = {
   desktop: "right",
   mobile: "bottom"
 };
+function resolveSide(side) {
+  if (typeof side === "string") {
+    return { desktop: side, mobile: side };
+  }
+  return { ...DEFAULT_SIDE, ...side };
+}
+function resolveSpring(spring) {
+  if (typeof spring === "string") {
+    return springs[spring];
+  }
+  return { ...springs.stiff, ...spring };
+}
 function resolveConfig(config = {}) {
-  const side = typeof config.side === "string" ? { desktop: config.side, mobile: config.side } : { ...DEFAULT_SIDE, ...config.side };
-  const spring = typeof config.spring === "string" ? springs[config.spring] : { ...springs.stiff, ...config.spring };
   return {
     maxDepth: config.maxDepth ?? Number.POSITIVE_INFINITY,
     closeOnEscape: config.closeOnEscape ?? true,
@@ -31,13 +39,17 @@ function resolveConfig(config = {}) {
     width: config.width ?? 420,
     maxWidth: config.maxWidth ?? "90vw",
     breakpoint: config.breakpoint ?? 768,
-    side,
+    side: resolveSide(config.side),
     stacking: { ...DEFAULT_STACKING, ...config.stacking },
-    spring,
+    spring: resolveSpring(config.spring),
     zIndex: config.zIndex ?? 100,
     ariaLabel: config.ariaLabel ?? "Sheet dialog",
     onOpenComplete: config.onOpenComplete,
     onCloseComplete: config.onCloseComplete,
+    snapPoints: config.snapPoints ?? [],
+    snapPointIndex: config.snapPointIndex,
+    onSnapPointChange: config.onSnapPointChange,
+    snapToSequentialPoints: config.snapToSequentialPoints ?? false,
     drag: config.drag ?? true,
     closeThreshold: config.closeThreshold ?? 0.25,
     velocityThreshold: config.velocityThreshold ?? 0.5,
@@ -137,6 +149,96 @@ function useSheetPanel() {
   return ctx;
 }
 
+// src/snap-points.ts
+var SNAP_POINT_RE = /^(\d+(?:\.\d+)?)(px|rem|em|vh|%)$/;
+function resolveSnapPointPx(point, viewportHeight) {
+  if (typeof point === "number") {
+    return point <= 1 ? point * viewportHeight : point;
+  }
+  if (typeof point === "string") {
+    const match = point.match(SNAP_POINT_RE);
+    if (!match?.[1]) {
+      return 0;
+    }
+    const value = Number.parseFloat(match[1]);
+    const unit = match[2];
+    switch (unit) {
+      case "px":
+        return value;
+      case "rem":
+      case "em":
+        return value * Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
+      case "vh":
+      case "%":
+        return value / 100 * viewportHeight;
+      default:
+        return 0;
+    }
+  }
+  return 0;
+}
+function resolveSnapPoints(points, viewportHeight) {
+  if (points.length === 0) {
+    return [];
+  }
+  const resolved = points.map((p) => resolveSnapPointPx(p, viewportHeight)).filter((px) => px > 0);
+  resolved.sort((a, b) => a - b);
+  const deduped = [];
+  for (const px of resolved) {
+    const last = deduped.at(-1);
+    if (last === void 0 || Math.abs(px - last) > 1) {
+      deduped.push(px);
+    }
+  }
+  return deduped;
+}
+var SNAP_VELOCITY_THRESHOLD = 0.4;
+var MAX_SNAP_VELOCITY = 2;
+var SNAP_VELOCITY_MULTIPLIER = 150;
+function findSnapTarget(dragOffset, panelHeight, snapHeights, velocity, currentIndex, sequential) {
+  if (snapHeights.length === 0) {
+    return -1;
+  }
+  const snapOffsets = snapHeights.map((h) => panelHeight - h);
+  const currentPos = dragOffset;
+  if (sequential) {
+    const direction = velocity > 0 ? 1 : -1;
+    const nextIndex = currentIndex - direction;
+    if (nextIndex < 0) {
+      return -1;
+    }
+    if (nextIndex >= snapHeights.length) {
+      return snapHeights.length - 1;
+    }
+    return nextIndex;
+  }
+  const velocityOffset = Math.abs(velocity) >= SNAP_VELOCITY_THRESHOLD ? Math.min(Math.max(velocity, -MAX_SNAP_VELOCITY), MAX_SNAP_VELOCITY) * SNAP_VELOCITY_MULTIPLIER : 0;
+  const projectedPos = currentPos + velocityOffset;
+  const first = snapOffsets[0] ?? 0;
+  let bestIndex = 0;
+  let bestDist = Math.abs(projectedPos - first);
+  for (let i = 1; i < snapOffsets.length; i++) {
+    const offset = snapOffsets[i] ?? 0;
+    const dist = Math.abs(projectedPos - offset);
+    if (dist < bestDist) {
+      bestDist = dist;
+      bestIndex = i;
+    }
+  }
+  const dismissDist = Math.abs(projectedPos - panelHeight);
+  if (dismissDist <= bestDist) {
+    return -1;
+  }
+  return bestIndex;
+}
+function getSnapOffset(snapIndex, snapHeights, panelHeight) {
+  if (snapIndex < 0 || snapIndex >= snapHeights.length) {
+    return 0;
+  }
+  const targetHeight = snapHeights[snapIndex] ?? 0;
+  return panelHeight - targetHeight;
+}
+
 // src/stacking.ts
 function getStackTransform(depth, stacking) {
   if (depth <= 0) {
@@ -181,6 +283,30 @@ function getSlideFrom(side) {
 function getSlideTarget() {
   return { x: 0, y: 0 };
 }
+function getStackOffset(side, offset) {
+  if (offset === 0) {
+    return {};
+  }
+  switch (side) {
+    case "right":
+      return { x: -offset };
+    case "left":
+      return { x: offset };
+    case "bottom":
+      return { y: -offset };
+    default:
+      return {};
+  }
+}
+function getTransformOrigin(side) {
+  if (side === "right") {
+    return "left center";
+  }
+  if (side === "left") {
+    return "right center";
+  }
+  return "center top";
+}
 function getPanelStyles(side, config, _depth, index) {
   const { width, maxWidth, zIndex } = config;
   const base = {
@@ -188,9 +314,8 @@ function getPanelStyles(side, config, _depth, index) {
     zIndex: zIndex + 10 + index,
     display: "flex",
     flexDirection: "column",
-    overflow: "hidden",
     willChange: "transform",
-    transformOrigin: side === "bottom" ? "center bottom" : `${side} center`
+    transformOrigin: getTransformOrigin(side)
   };
   if (side === "bottom") {
     return {
@@ -235,6 +360,29 @@ function isInteractiveElement(el) {
   }
   return false;
 }
+function findScrollableAncestor(el, axis) {
+  let current = el;
+  while (current) {
+    if (current instanceof HTMLElement) {
+      const style = getComputedStyle(current);
+      const overflow = axis === "y" ? style.overflowY : style.overflowX;
+      if (overflow === "auto" || overflow === "scroll") {
+        const scrollable = axis === "y" ? current.scrollHeight > current.clientHeight : current.scrollWidth > current.clientWidth;
+        if (scrollable) {
+          return current;
+        }
+      }
+    }
+    current = current.parentElement;
+  }
+  return null;
+}
+function isAtScrollEdge(el, axis, sign) {
+  if (axis === "y") {
+    return sign === 1 ? el.scrollTop <= 0 : el.scrollTop + el.clientHeight >= el.scrollHeight - 1;
+  }
+  return sign === 1 ? el.scrollLeft <= 0 : el.scrollLeft + el.clientWidth >= el.scrollWidth - 1;
+}
 function getDismissAxis(side) {
   switch (side) {
     case "right":
@@ -249,6 +397,7 @@ function getDismissAxis(side) {
 }
 var DEAD_ZONE = 10;
 var MAX_ANGLE_DEG = 35;
+var RUBBER_BAND_FACTOR = 0.6;
 function classifyGesture(dx, dy, axis, sign) {
   const absDx = Math.abs(dx);
   const absDy = Math.abs(dy);
@@ -277,6 +426,7 @@ function useDrag(panelRef, config, onDragUpdate) {
   const startRef = useRef(null);
   const committedRef = useRef(null);
   const offsetRef = useRef(0);
+  const scrollTargetRef = useRef(null);
   const { axis, sign } = getDismissAxis(config.side);
   const handlePointerDown = useCallback(
     (e) => {
@@ -294,12 +444,7 @@ function useDrag(panelRef, config, onDragUpdate) {
       if (!isHandle && isInteractiveElement(target)) {
         return;
       }
-      if (!isHandle) {
-        const scrollable = target.closest("[data-radix-scroll-area-viewport]");
-        if (scrollable && scrollable.scrollTop > 0 && axis === "y") {
-          return;
-        }
-      }
+      scrollTargetRef.current = isHandle ? null : findScrollableAncestor(target, axis);
       startRef.current = { x: e.clientX, y: e.clientY, time: Date.now() };
       committedRef.current = null;
       offsetRef.current = 0;
@@ -319,66 +464,88 @@ function useDrag(panelRef, config, onDragUpdate) {
         return;
       }
       if (committedRef.current === null) {
-        committedRef.current = classifyGesture(dx, dy, axis, sign);
-        if (committedRef.current === "none") {
+        const gesture = classifyGesture(dx, dy, axis, sign);
+        if (gesture === "none") {
+          committedRef.current = "none";
           startRef.current = null;
           return;
         }
+        const scrollEl = scrollTargetRef.current;
+        if (scrollEl && !isAtScrollEdge(scrollEl, axis, sign)) {
+          committedRef.current = "none";
+          startRef.current = null;
+          return;
+        }
+        committedRef.current = "drag";
       }
       if (committedRef.current !== "drag") {
         return;
       }
       const rawOffset = axis === "x" ? dx : dy;
-      const clampedOffset = Math.max(0, rawOffset * sign);
+      const directional = rawOffset * sign;
+      const clampedOffset = directional >= 0 ? directional : -Math.sqrt(Math.abs(directional)) * RUBBER_BAND_FACTOR;
       offsetRef.current = clampedOffset;
       onDragUpdate({ offset: clampedOffset, isDragging: true });
       e.preventDefault();
     },
     [axis, sign, onDragUpdate]
   );
+  const dismiss = useCallback(() => {
+    if (config.isNested) {
+      config.onPop();
+    } else {
+      config.onClose();
+    }
+    onDragUpdate({ offset: 0, isDragging: false });
+  }, [config, onDragUpdate]);
   const handlePointerUp = useCallback(
     (_e) => {
       if (!startRef.current || committedRef.current !== "drag") {
         startRef.current = null;
         committedRef.current = null;
+        scrollTargetRef.current = null;
         return;
       }
-      const offset = offsetRef.current;
+      const offset = Math.max(0, offsetRef.current);
       const elapsed = Date.now() - startRef.current.time;
       const velocity = elapsed > 0 ? offset / elapsed : 0;
       startRef.current = null;
       committedRef.current = null;
       offsetRef.current = 0;
+      scrollTargetRef.current = null;
       const panelSize = getPanelDimension(panelRef.current, axis);
+      if (config.snapHeights.length > 0) {
+        const targetIndex = findSnapTarget(
+          offset,
+          panelSize,
+          config.snapHeights,
+          velocity,
+          config.activeSnapIndex,
+          config.sequential
+        );
+        if (targetIndex === -1) {
+          dismiss();
+        } else {
+          config.onSnap(targetIndex);
+          onDragUpdate({ offset: 0, isDragging: false });
+        }
+        return;
+      }
       const pastThreshold = offset / panelSize > config.closeThreshold;
       const fastEnough = velocity > config.velocityThreshold;
       if (pastThreshold || fastEnough) {
-        if (config.isNested) {
-          config.onPop();
-        } else {
-          config.onClose();
-        }
-        onDragUpdate({ offset: 0, isDragging: false });
+        dismiss();
       } else {
         onDragUpdate({ offset: 0, isDragging: false });
       }
     },
-    [
-      panelRef,
-      axis,
-      config.closeThreshold,
-      config.velocityThreshold,
-      config.isNested,
-      config.onClose,
-      config.onPop,
-      onDragUpdate,
-      config
-    ]
+    [panelRef, axis, config, onDragUpdate, dismiss]
   );
   const handlePointerCancel = useCallback(() => {
     startRef.current = null;
     committedRef.current = null;
     offsetRef.current = 0;
+    scrollTargetRef.current = null;
     onDragUpdate({ offset: 0, isDragging: false });
   }, [onDragUpdate]);
   useEffect2(() => {
@@ -408,82 +575,40 @@ function useDrag(panelRef, config, onDragUpdate) {
 
 // src/renderer.tsx
 import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
-var BUTTON_STYLE = {
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  width: 32,
-  height: 32,
-  borderRadius: "50%",
-  border: "none",
-  background: "transparent",
-  cursor: "pointer",
-  color: "inherit",
-  opacity: 0.5,
-  transition: "opacity 150ms",
-  padding: 0
-};
-var HANDLE_BAR_STYLE = {
-  width: 36,
-  height: 4,
-  borderRadius: 2,
-  background: "var(--muted-foreground, rgba(0, 0, 0, 0.25))"
-};
-function DefaultHeader({ isNested, onBack, onClose, side }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    side === "bottom" && /* @__PURE__ */ jsx2(
-      "div",
-      {
-        "data-stacksheet-handle": "",
-        style: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          padding: "12px 0 4px",
-          flexShrink: 0,
-          cursor: "grab",
-          touchAction: "none"
-        },
-        children: /* @__PURE__ */ jsx2("div", { style: HANDLE_BAR_STYLE })
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          display: "flex",
-          alignItems: "center",
-          height: 48,
-          flexShrink: 0,
-          padding: "0 12px",
-          borderBottom: "1px solid var(--border, transparent)"
-        },
-        children: [
-          isNested && /* @__PURE__ */ jsx2(
-            "button",
-            {
-              "aria-label": "Back",
-              onClick: onBack,
-              style: BUTTON_STYLE,
-              type: "button",
-              children: /* @__PURE__ */ jsx2(ArrowLeftIcon, {})
-            }
-          ),
-          /* @__PURE__ */ jsx2("div", { style: { flex: 1 } }),
-          /* @__PURE__ */ jsx2(
-            "button",
-            {
-              "aria-label": "Close",
-              onClick: onClose,
-              style: BUTTON_STYLE,
-              type: "button",
-              children: /* @__PURE__ */ jsx2(XIcon, {})
-            }
-          )
-        ]
-      }
-    )
-  ] });
+function DefaultHeader({
+  isNested,
+  onBack,
+  onClose,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `flex h-14 shrink-0 items-center justify-between border-b px-6 ${className ?? ""}`,
+      children: [
+        /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-2", children: isNested && /* @__PURE__ */ jsx2(
+          "button",
+          {
+            "aria-label": "Back",
+            className: "flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-md border-none bg-transparent p-0 text-inherit opacity-60 transition-opacity duration-150 hover:opacity-100",
+            onClick: onBack,
+            type: "button",
+            children: /* @__PURE__ */ jsx2(ArrowLeftIcon, {})
+          }
+        ) }),
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            "aria-label": "Close",
+            className: "flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-md border-none bg-transparent p-0 text-inherit opacity-60 transition-opacity duration-150 hover:opacity-100",
+            onClick: onClose,
+            type: "button",
+            children: /* @__PURE__ */ jsx2(XIcon, {})
+          }
+        )
+      ]
+    }
+  );
 }
 var EMPTY_CLASSNAMES = {
   backdrop: "",
@@ -534,6 +659,102 @@ function getDragTransform(side, offset) {
       return {};
   }
 }
+function usePanelHeight(panelRef, hasSnapPoints) {
+  const [height, setHeight] = useState2(0);
+  useEffect3(() => {
+    const el = panelRef.current;
+    if (!(el && hasSnapPoints)) {
+      return;
+    }
+    setHeight(el.offsetHeight);
+    const observer = new ResizeObserver(([entry]) => {
+      if (entry) {
+        setHeight(entry.contentRect.height);
+      }
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [panelRef, hasSnapPoints]);
+  return height;
+}
+function buildPanelStyle(panelStyles, isTop, hasPanelClass, isDragging) {
+  return {
+    ...panelStyles,
+    pointerEvents: isTop ? "auto" : "none",
+    ...isTop ? {} : { contain: "layout style paint" },
+    ...isDragging ? { transition: "none" } : {},
+    ...hasPanelClass ? {} : {
+      background: "var(--background, #fff)",
+      borderColor: "var(--border, transparent)"
+    }
+  };
+}
+function buildPanelTransition(isDragging, isTop, spring, stackSpring) {
+  const visualTween = {
+    type: "tween",
+    duration: 0.25,
+    ease: "easeOut"
+  };
+  if (isDragging) {
+    return { type: "tween", duration: 0 };
+  }
+  const base = selectSpring(isTop, spring, stackSpring);
+  return { ...base, borderRadius: visualTween, boxShadow: visualTween };
+}
+function computeSnapYOffset(side, snapHeights, activeSnapIndex, measuredHeight) {
+  if (side !== "bottom" || snapHeights.length === 0 || measuredHeight <= 0) {
+    return 0;
+  }
+  return getSnapOffset(activeSnapIndex, snapHeights, measuredHeight);
+}
+function PanelInnerContent({
+  isComposable,
+  shouldRender,
+  Content,
+  data,
+  renderHeader,
+  headerProps,
+  headerClassName
+}) {
+  if (isComposable) {
+    return shouldRender && Content ? /* @__PURE__ */ jsx2(Content, { ...data }) : null;
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    renderHeader ? renderHeader(headerProps) : /* @__PURE__ */ jsx2(DefaultHeader, { ...headerProps, className: headerClassName }),
+    shouldRender && Content && /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: "min-h-0 flex-1 overflow-y-auto overscroll-contain",
+        "data-stacksheet-no-drag": "",
+        children: /* @__PURE__ */ jsx2(Content, { ...data })
+      }
+    )
+  ] });
+}
+function BottomHandle() {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: "flex shrink-0 cursor-grab touch-none items-center justify-center pt-4 pb-1",
+      "data-stacksheet-handle": "",
+      children: /* @__PURE__ */ jsx2("div", { className: "h-1 w-9 rounded-sm bg-current/25" })
+    }
+  );
+}
+function SideHandle({ side, isHovered }) {
+  const position = side === "right" ? { right: "100%" } : { left: "100%" };
+  return /* @__PURE__ */ jsx2(
+    m.div,
+    {
+      animate: { opacity: isHovered ? 1 : 0 },
+      className: "absolute top-0 bottom-0 flex w-6 cursor-grab touch-none items-center justify-center",
+      "data-stacksheet-handle": "",
+      style: position,
+      transition: { duration: isHovered ? 0.15 : 0.4, ease: "easeOut" },
+      children: /* @__PURE__ */ jsx2("div", { className: "h-10 w-[5px] rounded-sm bg-current/35 shadow-sm" })
+    }
+  );
+}
 function SheetPanel({
   item,
   index,
@@ -547,6 +768,11 @@ function SheetPanel({
   shouldRender,
   pop,
   close,
+  swipeClose,
+  swipePop,
+  snapHeights,
+  activeSnapIndex,
+  onSnap,
   renderHeader,
   slideFrom,
   slideTarget,
@@ -560,9 +786,10 @@ function SheetPanel({
     offset: 0,
     isDragging: false
   });
+  const [isHovered, setIsHovered] = useState2(false);
+  const measuredHeight = usePanelHeight(panelRef, snapHeights.length > 0);
   const transform = getStackTransform(depth, config.stacking);
   const panelStyles = getPanelStyles(side, config, depth, index);
-  const stackOffset = getStackingOffset(side, transform.offset);
   useEffect3(() => {
     if (!isTop) {
       hasEnteredRef.current = false;
@@ -581,9 +808,13 @@ function SheetPanel({
       closeThreshold: config.closeThreshold,
       velocityThreshold: config.velocityThreshold,
       side,
-      onClose: close,
-      onPop: pop,
-      isNested
+      onClose: swipeClose,
+      onPop: swipePop,
+      isNested,
+      snapHeights,
+      activeSnapIndex,
+      onSnap,
+      sequential: config.snapToSequentialPoints
     },
     setDragState
   );
@@ -596,33 +827,39 @@ function SheetPanel({
   const isComposable = renderHeader === false;
   const hasPanelClass = classNames.panel !== "";
   const dragOffset = getDragTransform(side, dragState.offset);
-  const panelStyle = {
-    ...panelStyles,
-    boxShadow: isTop ? getShadow(side, false) : getShadow(side, true),
-    pointerEvents: isTop ? "auto" : "none",
-    // During drag, disable spring transition for immediate feedback
-    ...dragState.isDragging ? { transition: "none" } : {},
-    ...hasPanelClass ? {} : {
-      background: "var(--background, #fff)",
-      borderColor: "var(--border, transparent)"
-    }
-  };
+  const panelStyle = buildPanelStyle(
+    panelStyles,
+    isTop,
+    hasPanelClass,
+    dragState.isDragging
+  );
   const headerProps = {
     isNested,
     onBack: pop,
     onClose: close,
     side
   };
-  const isModal = config.modal;
   const ariaProps = buildAriaProps(
     isTop,
-    isModal,
+    config.modal,
     isComposable,
     ariaLabel,
     panelId
   );
-  const transition = dragState.isDragging ? { type: "tween", duration: 0 } : selectSpring(isTop, spring, stackSpring);
+  const transition = buildPanelTransition(
+    dragState.isDragging,
+    isTop,
+    spring,
+    stackSpring
+  );
   const animatedRadius = getAnimatedBorderRadius(side, depth, config.stacking);
+  const snapYOffset = computeSnapYOffset(
+    side,
+    snapHeights,
+    activeSnapIndex,
+    measuredHeight
+  );
+  const stackOffset = getStackOffset(side, transform.offset);
   const animateTarget = {
     ...slideTarget,
     ...stackOffset,
@@ -630,9 +867,19 @@ function SheetPanel({
     scale: transform.scale,
     opacity: transform.opacity,
     ...animatedRadius,
-    transition
+    boxShadow: getShadow(side, !isTop),
+    transition,
+    ...snapYOffset > 0 ? { y: (dragOffset.y ?? 0) + snapYOffset } : {}
   };
-  const panelContent = /* @__PURE__ */ jsx2(
+  const initialRadius = getInitialRadius(side);
+  const showSideHandle = isTop && side !== "bottom";
+  const showBottomHandle = isTop && side === "bottom";
+  const exitTween = {
+    type: "tween",
+    duration: 0.25,
+    ease: "easeOut"
+  };
+  const panelContent = /* @__PURE__ */ jsxs(
     m.div,
     {
       animate: animateTarget,
@@ -640,41 +887,44 @@ function SheetPanel({
       exit: {
         ...slideFrom,
         opacity: 0.6,
-        transition: exitSpring
+        boxShadow: getShadow(side, false),
+        transition: { ...exitSpring, boxShadow: exitTween }
       },
       initial: {
         ...slideFrom,
-        opacity: 0.8
+        opacity: 0.8,
+        ...initialRadius,
+        boxShadow: getShadow(side, false)
       },
       onAnimationComplete: handleAnimationComplete,
+      onMouseEnter: showSideHandle ? () => setIsHovered(true) : void 0,
+      onMouseLeave: showSideHandle ? () => setIsHovered(false) : void 0,
       ref: panelRef,
       style: panelStyle,
       tabIndex: isTop ? -1 : void 0,
-      transition: spring,
       ...ariaProps,
-      children: isComposable ? (
-        /* Composable mode: content fills panel directly, uses Sheet.* parts */
-        shouldRender && Content && /* @__PURE__ */ jsx2(Content, { ...item.data })
-      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        renderHeader ? renderHeader(headerProps) : /* @__PURE__ */ jsx2(DefaultHeader, { ...headerProps }),
-        shouldRender && Content && /* @__PURE__ */ jsx2(
-          "div",
-          {
-            "data-stacksheet-no-drag": "",
-            style: {
-              flex: 1,
-              minHeight: 0,
-              overflowY: "auto",
-              overscrollBehavior: "contain"
-            },
-            children: /* @__PURE__ */ jsx2(Content, { ...item.data })
-          }
-        )
-      ] })
+      children: [
+        showSideHandle && /* @__PURE__ */ jsx2(SideHandle, { isHovered, side }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden rounded-[inherit]", children: [
+          showBottomHandle && /* @__PURE__ */ jsx2(BottomHandle, {}),
+          /* @__PURE__ */ jsx2(
+            PanelInnerContent,
+            {
+              Content,
+              data: item.data,
+              headerClassName: classNames.header || void 0,
+              headerProps,
+              isComposable,
+              renderHeader,
+              shouldRender
+            }
+          )
+        ] })
+      ]
     },
     item.id
   );
-  if (!isModal) {
+  if (!config.modal) {
     return /* @__PURE__ */ jsx2(SheetPanelContext.Provider, { value: panelContext, children: panelContent });
   }
   return /* @__PURE__ */ jsx2(SheetPanelContext.Provider, { value: panelContext, children: /* @__PURE__ */ jsx2(
@@ -739,10 +989,51 @@ function SheetRenderer({
 }) {
   const isOpen = useStore(store, (s) => s.isOpen);
   const stack = useStore(store, (s) => s.stack);
-  const close = useStore(store, (s) => s.close);
-  const pop = useStore(store, (s) => s.pop);
+  const rawClose = useStore(store, (s) => s.close);
+  const rawPop = useStore(store, (s) => s.pop);
   const side = useResolvedSide(config);
   const classNames = resolveClassNames(classNamesProp);
+  const snapHeights = useMemo(
+    () => side === "bottom" && config.snapPoints.length > 0 ? resolveSnapPoints(
+      config.snapPoints,
+      typeof window !== "undefined" ? window.innerHeight : 0
+    ) : [],
+    [side, config.snapPoints]
+  );
+  const [internalSnapIndex, setInternalSnapIndex] = useState2(
+    snapHeights.length > 0 ? snapHeights.length - 1 : 0
+  );
+  const activeSnapIndex = config.snapPointIndex ?? internalSnapIndex;
+  const handleSnap = useCallback2(
+    (index) => {
+      setInternalSnapIndex(index);
+      config.onSnapPointChange?.(index);
+    },
+    [config.onSnapPointChange, config]
+  );
+  useEffect3(() => {
+    if (isOpen && snapHeights.length > 0) {
+      const initial = config.snapPointIndex ?? snapHeights.length - 1;
+      setInternalSnapIndex(initial);
+    }
+  }, [isOpen, snapHeights.length, config.snapPointIndex]);
+  const closeReasonRef = useRef2("programmatic");
+  const closeWith = useCallback2(
+    (reason) => {
+      closeReasonRef.current = reason;
+      rawClose();
+    },
+    [rawClose]
+  );
+  const popWith = useCallback2(
+    (reason) => {
+      closeReasonRef.current = reason;
+      rawPop();
+    },
+    [rawPop]
+  );
+  const close = useCallback2(() => closeWith("programmatic"), [closeWith]);
+  const pop = useCallback2(() => popWith("programmatic"), [popWith]);
   useBodyScale(config, isOpen);
   const triggerRef = useRef2(null);
   const wasOpenRef = useRef2(false);
@@ -766,9 +1057,9 @@ function SheetRenderer({
       if (e.key === "Escape") {
         e.preventDefault();
         if (stack.length > 1) {
-          pop();
+          popWith("escape");
         } else {
-          close();
+          closeWith("escape");
         }
       }
     }
@@ -779,9 +1070,23 @@ function SheetRenderer({
     config.closeOnEscape,
     config.dismissible,
     stack.length,
-    pop,
-    close
+    popWith,
+    closeWith
   ]);
+  useEffect3(() => {
+    if (!(isOpen && config.dismissible) || typeof globalThis.CloseWatcher === "undefined") {
+      return;
+    }
+    const watcher = new globalThis.CloseWatcher();
+    watcher.onclose = () => {
+      if (stack.length > 1) {
+        popWith("escape");
+      } else {
+        closeWith("escape");
+      }
+    };
+    return () => watcher.destroy();
+  }, [isOpen, config.dismissible, stack.length, popWith, closeWith]);
   const slideFrom = getSlideFrom(side);
   const slideTarget = getSlideTarget();
   const spring = {
@@ -796,27 +1101,27 @@ function SheetRenderer({
   const showOverlay = isModal && config.showOverlay;
   const hasBackdropClass = classNames.backdrop !== "";
   const backdropStyle = {
-    position: "fixed",
-    inset: 0,
     zIndex: config.zIndex,
     cursor: config.closeOnBackdrop && config.dismissible ? "pointer" : void 0,
     ...hasBackdropClass ? {} : { background: "var(--overlay, rgba(0, 0, 0, 0.2))" }
   };
   const handleExitComplete = useCallback2(() => {
     if (stack.length === 0) {
-      config.onCloseComplete?.();
+      config.onCloseComplete?.(closeReasonRef.current);
     }
   }, [stack.length, config]);
+  const swipeClose = useCallback2(() => closeWith("swipe"), [closeWith]);
+  const swipePop = useCallback2(() => popWith("swipe"), [popWith]);
   const shouldLockScroll = isOpen && isModal && config.lockScroll;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     showOverlay && /* @__PURE__ */ jsx2(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx2(
       m.div,
       {
         animate: { opacity: 1 },
-        className: classNames.backdrop || void 0,
+        className: `fixed inset-0 ${classNames.backdrop || ""}`,
         exit: { opacity: 0 },
         initial: { opacity: 0 },
-        onClick: config.closeOnBackdrop && config.dismissible ? close : void 0,
+        onClick: config.closeOnBackdrop && config.dismissible ? () => closeWith("backdrop") : void 0,
         style: backdropStyle,
         transition: spring
       },
@@ -825,22 +1130,18 @@ function SheetRenderer({
     /* @__PURE__ */ jsx2(RemoveScroll, { enabled: shouldLockScroll, forwardProps: true, children: /* @__PURE__ */ jsx2(
       "div",
       {
-        style: {
-          position: "fixed",
-          inset: 0,
-          zIndex: config.zIndex + 1,
-          overflow: "hidden",
-          pointerEvents: "none"
-        },
+        className: "pointer-events-none fixed inset-0 overflow-hidden",
+        style: { zIndex: config.zIndex + 1 },
         children: /* @__PURE__ */ jsx2(AnimatePresence, { onExitComplete: handleExitComplete, children: stack.map((item, index) => {
           const depth = stack.length - 1 - index;
           const isTop = depth === 0;
-          const isNested = stack.length > 1;
-          const shouldRender = depth < config.stacking.renderThreshold;
+          const isNested = index > 0;
+          const shouldRender = depth <= config.stacking.renderThreshold;
           const Content = componentMap.get(item.type) ?? sheets[item.type];
           return /* @__PURE__ */ jsx2(
             SheetPanel,
             {
+              activeSnapIndex,
               Content,
               classNames,
               close,
@@ -851,14 +1152,18 @@ function SheetRenderer({
               isNested,
               isTop,
               item,
+              onSnap: handleSnap,
               pop,
               renderHeader,
               shouldRender,
               side,
               slideFrom,
               slideTarget,
+              snapHeights,
               spring,
-              stackSpring
+              stackSpring,
+              swipeClose,
+              swipePop
             },
             item.id
           );
@@ -867,27 +1172,21 @@ function SheetRenderer({
     ) })
   ] });
 }
-function getStackingOffset(side, offset) {
-  if (offset === 0) {
-    return {};
-  }
-  switch (side) {
-    case "right":
-      return { x: -offset };
-    case "left":
-      return { x: offset };
-    case "bottom":
-      return { y: -offset };
-    default:
-      return {};
-  }
-}
-function getShadow(side, isNested) {
+function getInitialRadius(side) {
   if (side === "bottom") {
-    return isNested ? "0 -2px 16px rgba(0,0,0,0.06)" : "0 -8px 32px rgba(0,0,0,0.15)";
+    return {
+      borderTopLeftRadius: 0,
+      borderTopRightRadius: 0,
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0
+    };
   }
-  const dir = side === "right" ? -1 : 1;
-  return isNested ? `${dir * 2}px 0 16px rgba(0,0,0,0.06)` : `${dir * 8}px 0 32px rgba(0,0,0,0.15)`;
+  return { borderRadius: 0 };
+}
+var SHADOW_SM = "0px 2px 5px 0px rgba(0,0,0,0.11), 0px 9px 9px 0px rgba(0,0,0,0.1), 0px 21px 13px 0px rgba(0,0,0,0.06)";
+var SHADOW_LG = "0px 23px 52px 0px rgba(0,0,0,0.08), 0px 94px 94px 0px rgba(0,0,0,0.07), 0px 211px 127px 0px rgba(0,0,0,0.04)";
+function getShadow(_side, isNested) {
+  return isNested ? SHADOW_SM : SHADOW_LG;
 }
 
 // src/store.ts
@@ -1172,21 +1471,6 @@ import {
 } from "@radix-ui/react-scroll-area";
 import { Slot } from "@radix-ui/react-slot";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var HANDLE_STYLE = {
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  padding: "12px 0 4px",
-  flexShrink: 0,
-  cursor: "grab",
-  touchAction: "none"
-};
-var HANDLE_BAR_STYLE2 = {
-  width: 36,
-  height: 4,
-  borderRadius: 2,
-  background: "var(--muted-foreground, rgba(0, 0, 0, 0.25))"
-};
 function SheetHandle({
   asChild,
   className,
@@ -1197,16 +1481,13 @@ function SheetHandle({
   return /* @__PURE__ */ jsx4(
     Comp,
     {
-      className,
+      className: `flex shrink-0 cursor-grab touch-none items-center justify-center pt-4 pb-1 ${className ?? ""}`,
       "data-stacksheet-handle": "",
-      style: { ...HANDLE_STYLE, ...style },
-      children: children ?? /* @__PURE__ */ jsx4("div", { style: HANDLE_BAR_STYLE2 })
+      style,
+      children: children ?? /* @__PURE__ */ jsx4("div", { className: "h-1 w-9 rounded-sm bg-current/25" })
     }
   );
 }
-var HEADER_STYLE = {
-  flexShrink: 0
-};
 function SheetHeader({
   asChild,
   className,
@@ -1214,12 +1495,27 @@ function SheetHeader({
   children
 }) {
   const Comp = asChild ? Slot : "header";
-  return /* @__PURE__ */ jsx4(Comp, { className, style: { ...HEADER_STYLE, ...style }, children });
+  return /* @__PURE__ */ jsx4(
+    Comp,
+    {
+      className: `flex h-14 shrink-0 items-center justify-between border-b px-6 ${className ?? ""}`,
+      style,
+      children
+    }
+  );
 }
 function SheetTitle({ asChild, className, style, children }) {
   const { panelId } = useSheetPanel();
   const Comp = asChild ? Slot : "h2";
-  return /* @__PURE__ */ jsx4(Comp, { className, id: `${panelId}-title`, style, children });
+  return /* @__PURE__ */ jsx4(
+    Comp,
+    {
+      className: `font-semibold text-sm ${className ?? ""}`,
+      id: `${panelId}-title`,
+      style,
+      children
+    }
+  );
 }
 function SheetDescription({
   asChild,
@@ -1231,32 +1527,14 @@ function SheetDescription({
   const Comp = asChild ? Slot : "p";
   return /* @__PURE__ */ jsx4(Comp, { className, id: `${panelId}-desc`, style, children });
 }
-var BODY_STYLE = {
-  flex: 1,
-  minHeight: 0,
-  position: "relative"
-};
-var SCROLLBAR_STYLE = {
-  display: "flex",
-  userSelect: "none",
-  touchAction: "none",
-  padding: 2,
-  width: 8
-};
-var THUMB_STYLE = {
-  flex: 1,
-  borderRadius: 4,
-  background: "var(--border, rgba(0, 0, 0, 0.15))",
-  position: "relative"
-};
 function SheetBody({ asChild, className, style, children }) {
   if (asChild) {
     return /* @__PURE__ */ jsx4(
       Slot,
       {
-        className,
+        className: `relative min-h-0 flex-1 ${className ?? ""}`,
         "data-stacksheet-no-drag": "",
-        style: { ...BODY_STYLE, ...style },
+        style,
         children
       }
     );
@@ -1264,25 +1542,23 @@ function SheetBody({ asChild, className, style, children }) {
   return /* @__PURE__ */ jsxs3(
     ScrollAreaRoot,
     {
-      className,
+      className: `relative min-h-0 flex-1 overflow-hidden ${className ?? ""}`,
       "data-stacksheet-no-drag": "",
-      style: { ...BODY_STYLE, overflow: "hidden", ...style },
+      style,
       children: [
+        /* @__PURE__ */ jsx4(ScrollAreaViewport, { className: "h-full w-full overscroll-contain", children }),
         /* @__PURE__ */ jsx4(
-          ScrollAreaViewport,
+          ScrollAreaScrollbar,
           {
-            style: { height: "100%", width: "100%", overscrollBehavior: "contain" },
-            children
+            className: "flex w-2 touch-none select-none p-0.5",
+            orientation: "vertical",
+            children: /* @__PURE__ */ jsx4(ScrollAreaThumb, { className: "relative flex-1 rounded bg-current/15" })
           }
-        ),
-        /* @__PURE__ */ jsx4(ScrollAreaScrollbar, { orientation: "vertical", style: SCROLLBAR_STYLE, children: /* @__PURE__ */ jsx4(ScrollAreaThumb, { style: THUMB_STYLE }) })
+        )
       ]
     }
   );
 }
-var FOOTER_STYLE = {
-  flexShrink: 0
-};
 function SheetFooter({
   asChild,
   className,
@@ -1290,7 +1566,14 @@ function SheetFooter({
   children
 }) {
   const Comp = asChild ? Slot : "footer";
-  return /* @__PURE__ */ jsx4(Comp, { className, style: { ...FOOTER_STYLE, ...style }, children });
+  return /* @__PURE__ */ jsx4(
+    Comp,
+    {
+      className: `flex shrink-0 items-center gap-2 border-t px-6 py-3 ${className ?? ""}`,
+      style,
+      children
+    }
+  );
 }
 function SheetClose({ asChild, className, style, children }) {
   const { close } = useSheetPanel();
@@ -1299,7 +1582,7 @@ function SheetClose({ asChild, className, style, children }) {
     Comp,
     {
       "aria-label": children ? void 0 : "Close",
-      className,
+      className: `flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-md border-none bg-transparent p-0 text-inherit opacity-60 transition-opacity duration-150 hover:opacity-100 ${className ?? ""}`,
       onClick: close,
       style,
       type: asChild ? void 0 : "button",
@@ -1317,7 +1600,7 @@ function SheetBack({ asChild, className, style, children }) {
     Comp,
     {
       "aria-label": children ? void 0 : "Back",
-      className,
+      className: `flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-md border-none bg-transparent p-0 text-inherit opacity-60 transition-opacity duration-150 hover:opacity-100 ${className ?? ""}`,
       onClick: back,
       style,
       type: asChild ? void 0 : "button",