@howells/stacksheet 1.1.1 → 1.1.3

package/dist/index.js

@@ -1,3 +1,9 @@
+// src/create.tsx
+import { Portal } from "@radix-ui/react-portal";
+import { createContext as createContext2, useContext as useContext2, useMemo as useMemo2 } from "react";
+import { useStore as useStore2 } from "zustand";
+import { useShallow } from "zustand/react/shallow";
+
 // src/springs.ts
 var springs = {
   subtle: { stiffness: 300, damping: 30, mass: 1 },
@@ -60,16 +66,17 @@ function resolveConfig(config = {}) {
   };
 }
 
-// src/create.tsx
-import { Portal } from "@radix-ui/react-portal";
-import { createContext as createContext2, useContext as useContext2, useMemo as useMemo2 } from "react";
-import { useStore as useStore2 } from "zustand";
-import { useShallow } from "zustand/react/shallow";
-
 // src/renderer.tsx
 import FocusTrap from "focus-trap-react";
-import { AnimatePresence, motion as m } from "motion/react";
 import {
+  AnimatePresence,
+  motion as m,
+  useMotionValue,
+  useReducedMotion,
+  useTransform
+} from "motion/react";
+import {
+  memo,
   useCallback as useCallback2,
   useEffect as useEffect3,
   useMemo,
@@ -166,8 +173,12 @@ function resolveSnapPointPx(point, viewportHeight) {
       case "px":
         return value;
       case "rem":
-      case "em":
-        return value * Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
+      case "em": {
+        const fontSize = typeof document !== "undefined" ? Number.parseFloat(
+          getComputedStyle(document.documentElement).fontSize
+        ) : 16;
+        return value * fontSize;
+      }
       case "vh":
       case "%":
         return value / 100 * viewportHeight;
@@ -307,7 +318,7 @@ function getTransformOrigin(side) {
   }
   return "center top";
 }
-function getPanelStyles(side, config, _depth, index) {
+function getPanelStyles(side, config, index) {
   const { width, maxWidth, zIndex } = config;
   const base = {
     position: "fixed",
@@ -323,7 +334,9 @@ function getPanelStyles(side, config, _depth, index) {
       left: 0,
       right: 0,
       bottom: 0,
-      maxHeight: "85vh"
+      // dvh tracks the dynamic viewport on iOS Safari (accounts for browser chrome).
+      // The vh fallback covers browsers that don't support dvh yet.
+      maxHeight: "85dvh"
       // borderRadius is animated via Motion's animate prop for scale correction
     };
   }
@@ -416,16 +429,27 @@ function classifyGesture(dx, dy, axis, sign) {
   }
   return "drag";
 }
+function commitGesture(dx, dy, axis, sign, scrollEl) {
+  const gesture = classifyGesture(dx, dy, axis, sign);
+  if (gesture === "none") {
+    return "none";
+  }
+  if (scrollEl && !isAtScrollEdge(scrollEl, axis, sign)) {
+    return "none";
+  }
+  return "drag";
+}
 function getPanelDimension(panel, axis) {
   if (!panel) {
     return 300;
   }
   return axis === "x" ? panel.offsetWidth : panel.offsetHeight;
 }
-function useDrag(panelRef, config, onDragUpdate) {
+function useDrag(panelRef, config, callbacks) {
   const startRef = useRef(null);
   const committedRef = useRef(null);
   const offsetRef = useRef(0);
+  const isDraggingRef = useRef(false);
   const scrollTargetRef = useRef(null);
   const { axis, sign } = getDismissAxis(config.side);
   const handlePointerDown = useCallback(
@@ -464,19 +488,17 @@ function useDrag(panelRef, config, onDragUpdate) {
         return;
       }
       if (committedRef.current === null) {
-        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";
+        committedRef.current = commitGesture(
+          dx,
+          dy,
+          axis,
+          sign,
+          scrollTargetRef.current
+        );
+        if (committedRef.current !== "drag") {
           startRef.current = null;
           return;
         }
-        committedRef.current = "drag";
       }
       if (committedRef.current !== "drag") {
         return;
@@ -485,10 +507,14 @@ function useDrag(panelRef, config, onDragUpdate) {
       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 });
+      callbacks.dragOffset.set(clampedOffset);
+      if (!isDraggingRef.current) {
+        isDraggingRef.current = true;
+        callbacks.onDragStart();
+      }
       e.preventDefault();
     },
-    [axis, sign, onDragUpdate]
+    [axis, sign, callbacks]
   );
   const dismiss = useCallback(() => {
     if (config.isNested) {
@@ -496,8 +522,10 @@ function useDrag(panelRef, config, onDragUpdate) {
     } else {
       config.onClose();
     }
-    onDragUpdate({ offset: 0, isDragging: false });
-  }, [config, onDragUpdate]);
+    callbacks.dragOffset.set(0);
+    isDraggingRef.current = false;
+    callbacks.onDragEnd();
+  }, [config, callbacks]);
   const handlePointerUp = useCallback(
     (_e) => {
       if (!startRef.current || committedRef.current !== "drag") {
@@ -527,7 +555,9 @@ function useDrag(panelRef, config, onDragUpdate) {
           dismiss();
         } else {
           config.onSnap(targetIndex);
-          onDragUpdate({ offset: 0, isDragging: false });
+          callbacks.dragOffset.set(0);
+          isDraggingRef.current = false;
+          callbacks.onDragEnd();
         }
         return;
       }
@@ -536,18 +566,24 @@ function useDrag(panelRef, config, onDragUpdate) {
       if (pastThreshold || fastEnough) {
         dismiss();
       } else {
-        onDragUpdate({ offset: 0, isDragging: false });
+        callbacks.dragOffset.set(0);
+        isDraggingRef.current = false;
+        callbacks.onDragEnd();
       }
     },
-    [panelRef, axis, config, onDragUpdate, dismiss]
+    [panelRef, axis, config, callbacks, dismiss]
   );
   const handlePointerCancel = useCallback(() => {
     startRef.current = null;
     committedRef.current = null;
     offsetRef.current = 0;
     scrollTargetRef.current = null;
-    onDragUpdate({ offset: 0, isDragging: false });
-  }, [onDragUpdate]);
+    callbacks.dragOffset.set(0);
+    if (isDraggingRef.current) {
+      isDraggingRef.current = false;
+      callbacks.onDragEnd();
+    }
+  }, [callbacks]);
   useEffect2(() => {
     const el = panelRef.current;
     if (!(el && config.enabled)) {
@@ -625,10 +661,7 @@ function resolveClassNames(cn) {
     header: cn.header ?? ""
   };
 }
-function selectSpring(isTop, spring, stackSpring) {
-  return isTop ? spring : stackSpring;
-}
-function buildAriaProps(isTop, isModal, isComposable, ariaLabel, panelId) {
+function buildAriaProps(isTop, isModal, isComposable, ariaLabel, panelId, hasDescription) {
   if (!isTop) {
     return {};
   }
@@ -638,27 +671,19 @@ function buildAriaProps(isTop, isModal, isComposable, ariaLabel, panelId) {
   }
   if (isComposable) {
     props["aria-labelledby"] = `${panelId}-title`;
-    props["aria-describedby"] = `${panelId}-desc`;
+    if (hasDescription) {
+      props["aria-describedby"] = `${panelId}-desc`;
+    }
   } else {
     props["aria-label"] = ariaLabel;
   }
   return props;
 }
-function getDragTransform(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 {};
-  }
-}
+var VISUAL_TWEEN = {
+  type: "tween",
+  duration: 0.25,
+  ease: "easeOut"
+};
 function usePanelHeight(panelRef, hasSnapPoints) {
   const [height, setHeight] = useState2(0);
   useEffect3(() => {
@@ -690,16 +715,11 @@ function buildPanelStyle(panelStyles, isTop, hasPanelClass, isDragging) {
   };
 }
 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 };
+  const base = isTop ? spring : stackSpring;
+  return { ...base, borderRadius: VISUAL_TWEEN, boxShadow: VISUAL_TWEEN };
 }
 function computeSnapYOffset(side, snapHeights, activeSnapIndex, measuredHeight) {
   if (side !== "bottom" || snapHeights.length === 0 || measuredHeight <= 0) {
@@ -707,6 +727,38 @@ function computeSnapYOffset(side, snapHeights, activeSnapIndex, measuredHeight)
   }
   return getSnapOffset(activeSnapIndex, snapHeights, measuredHeight);
 }
+function ModalFocusTrap({
+  enabled,
+  active,
+  fallbackRef,
+  children
+}) {
+  if (!enabled) {
+    return children;
+  }
+  return /* @__PURE__ */ jsx2(
+    FocusTrap,
+    {
+      active,
+      focusTrapOptions: {
+        initialFocus: false,
+        returnFocusOnDeactivate: true,
+        escapeDeactivates: false,
+        allowOutsideClick: true,
+        checkCanFocusTrap: () => new Promise(
+          (resolve) => requestAnimationFrame(() => resolve())
+        ),
+        fallbackFocus: () => {
+          if (fallbackRef.current) {
+            return fallbackRef.current;
+          }
+          return document.body;
+        }
+      },
+      children
+    }
+  );
+}
 function PanelInnerContent({
   isComposable,
   shouldRender,
@@ -731,31 +783,54 @@ function PanelInnerContent({
     )
   ] });
 }
-function BottomHandle() {
+function BottomHandle({ onDismiss }) {
   return /* @__PURE__ */ jsx2(
-    "div",
+    "button",
     {
-      className: "flex shrink-0 cursor-grab touch-none items-center justify-center pt-4 pb-1",
+      "aria-label": "Dismiss",
+      className: "flex w-full shrink-0 cursor-grab touch-none items-center justify-center border-none bg-transparent pt-4 pb-1",
       "data-stacksheet-handle": "",
-      children: /* @__PURE__ */ jsx2("div", { className: "h-1 w-9 rounded-sm bg-current/25" })
+      onClick: onDismiss,
+      type: "button",
+      children: /* @__PURE__ */ jsx2("div", { "aria-hidden": "true", className: "h-1 w-9 rounded-sm bg-current/25" })
     }
   );
 }
-function SideHandle({ side, isHovered }) {
+function SideHandle({
+  side,
+  isHovered,
+  onDismiss
+}) {
   const position = side === "right" ? { right: "100%" } : { left: "100%" };
   return /* @__PURE__ */ jsx2(
     m.div,
     {
       animate: { opacity: isHovered ? 1 : 0 },
+      "aria-label": "Dismiss",
       className: "absolute top-0 bottom-0 flex w-6 cursor-grab touch-none items-center justify-center",
       "data-stacksheet-handle": "",
+      onClick: onDismiss,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onDismiss?.();
+        }
+      },
+      role: "button",
       style: position,
+      tabIndex: 0,
       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" })
+      children: /* @__PURE__ */ jsx2(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: "h-10 w-[5px] rounded-sm bg-current/35 shadow-sm"
+        }
+      )
     }
   );
 }
-function SheetPanel({
+var SheetPanel = memo(function SheetPanel2({
   item,
   index,
   depth,
@@ -778,18 +853,25 @@ function SheetPanel({
   slideTarget,
   spring,
   stackSpring,
-  exitSpring
+  exitSpring,
+  prefersReducedMotion
 }) {
   const panelRef = useRef2(null);
   const hasEnteredRef = useRef2(false);
-  const [dragState, setDragState] = useState2({
-    offset: 0,
-    isDragging: false
-  });
+  const dragOffset = useMotionValue(0);
+  const [isDragging, setIsDragging] = useState2(false);
   const [isHovered, setIsHovered] = useState2(false);
+  const dragCallbacks = useMemo(
+    () => ({
+      dragOffset,
+      onDragStart: () => setIsDragging(true),
+      onDragEnd: () => setIsDragging(false)
+    }),
+    [dragOffset]
+  );
   const measuredHeight = usePanelHeight(panelRef, snapHeights.length > 0);
   const transform = getStackTransform(depth, config.stacking);
-  const panelStyles = getPanelStyles(side, config, depth, index);
+  const panelStyles = getPanelStyles(side, config, index);
   useEffect3(() => {
     if (!isTop) {
       hasEnteredRef.current = false;
@@ -804,7 +886,7 @@ function SheetPanel({
   useDrag(
     panelRef,
     {
-      enabled: isTop && config.drag && config.dismissible,
+      enabled: isTop && config.drag && config.dismissible && !prefersReducedMotion,
       closeThreshold: config.closeThreshold,
       velocityThreshold: config.velocityThreshold,
       side,
@@ -816,22 +898,44 @@ function SheetPanel({
       onSnap,
       sequential: config.snapToSequentialPoints
     },
-    setDragState
+    dragCallbacks
   );
   const ariaLabel = (typeof item.data?.__ariaLabel === "string" ? item.data.__ariaLabel : void 0) ?? config.ariaLabel;
   const panelId = `stacksheet-${item.id}`;
+  const [hasDescription, setHasDescription] = useState2(false);
+  const registerDescription = useCallback2(() => {
+    setHasDescription(true);
+    return () => setHasDescription(false);
+  }, []);
   const panelContext = useMemo(
-    () => ({ close, back: pop, isNested, isTop, panelId, side }),
-    [close, pop, isNested, isTop, panelId, side]
+    () => ({
+      close,
+      back: pop,
+      isNested,
+      isTop,
+      panelId,
+      side,
+      hasDescription,
+      registerDescription
+    }),
+    [
+      close,
+      pop,
+      isNested,
+      isTop,
+      panelId,
+      side,
+      hasDescription,
+      registerDescription
+    ]
   );
   const isComposable = renderHeader === false;
   const hasPanelClass = classNames.panel !== "";
-  const dragOffset = getDragTransform(side, dragState.offset);
   const panelStyle = buildPanelStyle(
     panelStyles,
     isTop,
     hasPanelClass,
-    dragState.isDragging
+    isDragging
   );
   const headerProps = {
     isNested,
@@ -844,10 +948,11 @@ function SheetPanel({
     config.modal,
     isComposable,
     ariaLabel,
-    panelId
+    panelId,
+    hasDescription
   );
   const transition = buildPanelTransition(
-    dragState.isDragging,
+    isDragging,
     isTop,
     spring,
     stackSpring
@@ -863,22 +968,19 @@ function SheetPanel({
   const animateTarget = {
     ...slideTarget,
     ...stackOffset,
-    ...dragOffset,
     scale: transform.scale,
     opacity: transform.opacity,
     ...animatedRadius,
-    boxShadow: getShadow(side, !isTop),
+    boxShadow: getShadow(!isTop),
     transition,
-    ...snapYOffset > 0 ? { y: (dragOffset.y ?? 0) + snapYOffset } : {}
+    ...snapYOffset > 0 ? { y: snapYOffset } : {}
   };
+  const dragSign = side === "left" ? -1 : 1;
+  const dragTranslate = useTransform(dragOffset, (v) => v * dragSign);
+  const dragStyle = side === "bottom" ? { y: dragTranslate } : { x: dragTranslate };
   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,
     {
@@ -887,26 +989,36 @@ function SheetPanel({
       exit: {
         ...slideFrom,
         opacity: 0.6,
-        boxShadow: getShadow(side, false),
-        transition: { ...exitSpring, boxShadow: exitTween }
+        boxShadow: getShadow(false),
+        transition: { ...exitSpring, boxShadow: VISUAL_TWEEN }
       },
       initial: {
         ...slideFrom,
         opacity: 0.8,
         ...initialRadius,
-        boxShadow: getShadow(side, false)
+        boxShadow: getShadow(false)
       },
       onAnimationComplete: handleAnimationComplete,
+      onBlur: showSideHandle ? () => setIsHovered(false) : void 0,
+      onFocus: showSideHandle ? () => setIsHovered(true) : void 0,
       onMouseEnter: showSideHandle ? () => setIsHovered(true) : void 0,
       onMouseLeave: showSideHandle ? () => setIsHovered(false) : void 0,
       ref: panelRef,
-      style: panelStyle,
+      style: { ...panelStyle, ...dragStyle },
       tabIndex: isTop ? -1 : void 0,
+      ...isTop ? {} : { "aria-hidden": "true", inert: true },
       ...ariaProps,
       children: [
-        showSideHandle && /* @__PURE__ */ jsx2(SideHandle, { isHovered, side }),
+        showSideHandle && /* @__PURE__ */ jsx2(
+          SideHandle,
+          {
+            isHovered,
+            onDismiss: isNested ? pop : close,
+            side
+          }
+        ),
         /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden rounded-[inherit]", children: [
-          showBottomHandle && /* @__PURE__ */ jsx2(BottomHandle, {}),
+          showBottomHandle && /* @__PURE__ */ jsx2(BottomHandle, { onDismiss: isNested ? pop : close }),
           /* @__PURE__ */ jsx2(
             PanelInnerContent,
             {
@@ -924,35 +1036,19 @@ function SheetPanel({
     },
     item.id
   );
-  if (!config.modal) {
-    return /* @__PURE__ */ jsx2(SheetPanelContext.Provider, { value: panelContext, children: panelContent });
-  }
   return /* @__PURE__ */ jsx2(SheetPanelContext.Provider, { value: panelContext, children: /* @__PURE__ */ jsx2(
-    FocusTrap,
+    ModalFocusTrap,
     {
       active: isTop,
-      focusTrapOptions: {
-        initialFocus: false,
-        returnFocusOnDeactivate: true,
-        escapeDeactivates: false,
-        allowOutsideClick: true,
-        checkCanFocusTrap: () => new Promise(
-          (resolve) => requestAnimationFrame(() => resolve())
-        ),
-        fallbackFocus: () => {
-          if (panelRef.current) {
-            return panelRef.current;
-          }
-          return document.body;
-        }
-      },
+      enabled: config.modal,
+      fallbackRef: panelRef,
       children: panelContent
     }
   ) });
-}
-function useBodyScale(config, isOpen) {
+});
+function useBodyScale(config, isOpen, prefersReducedMotion) {
   useEffect3(() => {
-    if (!config.shouldScaleBackground) {
+    if (!config.shouldScaleBackground || prefersReducedMotion) {
       return;
     }
     const wrapper = document.querySelector("[data-stacksheet-wrapper]");
@@ -977,7 +1073,12 @@ function useBodyScale(config, isOpen) {
     };
     wrapper.addEventListener("transitionend", handleEnd, { once: true });
     return () => wrapper.removeEventListener("transitionend", handleEnd);
-  }, [isOpen, config.shouldScaleBackground, config.scaleBackgroundAmount]);
+  }, [
+    isOpen,
+    config.shouldScaleBackground,
+    config.scaleBackgroundAmount,
+    prefersReducedMotion
+  ]);
 }
 function SheetRenderer({
   store,
@@ -992,7 +1093,11 @@ function SheetRenderer({
   const rawClose = useStore(store, (s) => s.close);
   const rawPop = useStore(store, (s) => s.pop);
   const side = useResolvedSide(config);
-  const classNames = resolveClassNames(classNamesProp);
+  const prefersReducedMotion = useReducedMotion() ?? false;
+  const classNames = useMemo(
+    () => resolveClassNames(classNamesProp),
+    [classNamesProp]
+  );
   const snapHeights = useMemo(
     () => side === "bottom" && config.snapPoints.length > 0 ? resolveSnapPoints(
       config.snapPoints,
@@ -1034,7 +1139,7 @@ function SheetRenderer({
   );
   const close = useCallback2(() => closeWith("programmatic"), [closeWith]);
   const pop = useCallback2(() => popWith("programmatic"), [popWith]);
-  useBodyScale(config, isOpen);
+  useBodyScale(config, isOpen, prefersReducedMotion);
   const triggerRef = useRef2(null);
   const wasOpenRef = useRef2(false);
   useEffect3(() => {
@@ -1042,13 +1147,17 @@ function SheetRenderer({
       triggerRef.current = document.activeElement;
     } else if (!isOpen && wasOpenRef.current) {
       const el = triggerRef.current;
-      if (el && el instanceof HTMLElement) {
+      if (el && el instanceof HTMLElement && el !== document.body && el.tagName !== "BODY") {
         el.focus();
       }
       triggerRef.current = null;
     }
     wasOpenRef.current = isOpen;
   }, [isOpen]);
+  const stackLengthRef = useRef2(stack.length);
+  useEffect3(() => {
+    stackLengthRef.current = stack.length;
+  }, [stack.length]);
   useEffect3(() => {
     if (!(isOpen && config.closeOnEscape && config.dismissible)) {
       return;
@@ -1056,7 +1165,7 @@ function SheetRenderer({
     function handleKeyDown(e) {
       if (e.key === "Escape") {
         e.preventDefault();
-        if (stack.length > 1) {
+        if (stackLengthRef.current > 1) {
           popWith("escape");
         } else {
           closeWith("escape");
@@ -1065,36 +1174,37 @@ function SheetRenderer({
     }
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [
-    isOpen,
-    config.closeOnEscape,
-    config.dismissible,
-    stack.length,
-    popWith,
-    closeWith
-  ]);
+  }, [isOpen, config.closeOnEscape, config.dismissible, popWith, closeWith]);
   useEffect3(() => {
     if (!(isOpen && config.dismissible) || typeof globalThis.CloseWatcher === "undefined") {
       return;
     }
     const watcher = new globalThis.CloseWatcher();
     watcher.onclose = () => {
-      if (stack.length > 1) {
+      if (stackLengthRef.current > 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 = {
-    type: "spring",
-    damping: config.spring.damping,
-    stiffness: config.spring.stiffness,
-    mass: config.spring.mass
-  };
+  }, [isOpen, config.dismissible, popWith, closeWith]);
+  const slideFrom = useMemo(() => getSlideFrom(side), [side]);
+  const slideTarget = useMemo(() => getSlideTarget(), []);
+  const spring = useMemo(
+    () => prefersReducedMotion ? { type: "tween", duration: 0 } : {
+      type: "spring",
+      damping: config.spring.damping,
+      stiffness: config.spring.stiffness,
+      mass: config.spring.mass
+    },
+    [
+      prefersReducedMotion,
+      config.spring.damping,
+      config.spring.stiffness,
+      config.spring.mass
+    ]
+  );
   const stackSpring = spring;
   const exitSpring = spring;
   const isModal = config.modal;
@@ -1102,6 +1212,7 @@ function SheetRenderer({
   const hasBackdropClass = classNames.backdrop !== "";
   const backdropStyle = {
     zIndex: config.zIndex,
+    willChange: "opacity",
     cursor: config.closeOnBackdrop && config.dismissible ? "pointer" : void 0,
     ...hasBackdropClass ? {} : { background: "var(--overlay, rgba(0, 0, 0, 0.2))" }
   };
@@ -1110,11 +1221,16 @@ function SheetRenderer({
       config.onCloseComplete?.(closeReasonRef.current);
     }
   }, [stack.length, config]);
+  const handleBackdropExitComplete = useCallback2(() => {
+    requestAnimationFrame(() => {
+      void document.body.offsetHeight;
+    });
+  }, []);
   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(
+    showOverlay && /* @__PURE__ */ jsx2(AnimatePresence, { onExitComplete: handleBackdropExitComplete, children: isOpen && /* @__PURE__ */ jsx2(
       m.div,
       {
         animate: { opacity: 1 },
@@ -1154,6 +1270,7 @@ function SheetRenderer({
               item,
               onSnap: handleSnap,
               pop,
+              prefersReducedMotion,
               renderHeader,
               shouldRender,
               side,
@@ -1185,7 +1302,7 @@ function getInitialRadius(side) {
 }
 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) {
+function getShadow(isNested) {
   return isNested ? SHADOW_SM : SHADOW_LG;
 }
 
@@ -1261,6 +1378,15 @@ function createSheetStore(config) {
       third
     );
   }
+  function pruneRegistry(remainingStack) {
+    const usedTypes = new Set(remainingStack.map((item) => item.type));
+    for (const [component, typeKey] of componentRegistry) {
+      if (!usedTypes.has(typeKey)) {
+        componentRegistry.delete(component);
+        componentMap.delete(typeKey);
+      }
+    }
+  }
   const store = createStore()((set, get) => {
     function _openResolved({ type, id, data }) {
       set({
@@ -1372,6 +1498,7 @@ function createSheetStore(config) {
           if (next.length === state.stack.length) {
             return state;
           }
+          pruneRegistry(next);
           if (next.length === 0) {
             return { stack: [], isOpen: false };
           }
@@ -1381,12 +1508,16 @@ function createSheetStore(config) {
       pop() {
         set((state) => {
           if (state.stack.length <= 1) {
+            pruneRegistry([]);
             return { stack: [], isOpen: false };
           }
-          return { stack: state.stack.slice(0, -1), isOpen: true };
+          const next = state.stack.slice(0, -1);
+          pruneRegistry(next);
+          return { stack: next, isOpen: true };
         });
       },
       close() {
+        pruneRegistry([]);
         set({ stack: [], isOpen: false });
       }
     };
@@ -1470,6 +1601,9 @@ import {
   Viewport as ScrollAreaViewport
 } from "@radix-ui/react-scroll-area";
 import { Slot } from "@radix-ui/react-slot";
+import {
+  useEffect as useEffect4
+} from "react";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function SheetHandle({
   asChild,
@@ -1477,14 +1611,26 @@ function SheetHandle({
   style,
   children
 }) {
+  const { close, back, isNested } = useSheetPanel();
+  const dismiss = isNested ? back : close;
   const Comp = asChild ? Slot : "div";
   return /* @__PURE__ */ jsx4(
     Comp,
     {
+      "aria-label": "Dismiss",
       className: `flex shrink-0 cursor-grab touch-none items-center justify-center pt-4 pb-1 ${className ?? ""}`,
       "data-stacksheet-handle": "",
+      onClick: dismiss,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          dismiss();
+        }
+      },
+      role: "button",
       style,
-      children: children ?? /* @__PURE__ */ jsx4("div", { className: "h-1 w-9 rounded-sm bg-current/25" })
+      tabIndex: 0,
+      children: children ?? /* @__PURE__ */ jsx4("div", { "aria-hidden": "true", className: "h-1 w-9 rounded-sm bg-current/25" })
     }
   );
 }
@@ -1523,7 +1669,8 @@ function SheetDescription({
   style,
   children
 }) {
-  const { panelId } = useSheetPanel();
+  const { panelId, registerDescription } = useSheetPanel();
+  useEffect4(() => registerDescription(), [registerDescription]);
   const Comp = asChild ? Slot : "p";
   return /* @__PURE__ */ jsx4(Comp, { className, id: `${panelId}-desc`, style, children });
 }
@@ -1621,10 +1768,6 @@ var Sheet = {
 export {
   Sheet,
   createStacksheet,
-  getPanelStyles,
-  getSlideFrom,
-  getStackTransform,
-  resolveConfig,
   springs,
   useIsMobile,
   useResolvedSide,