@patternmode/stacksheet 1.3.4 → 1.3.6

package/dist/index.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { Portal } from "@radix-ui/react-portal";
-import { createContext, memo, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { createContext, use, useEffect, useRef, useState, useSyncExternalStore } from "react";
 import { createStore, useStore } from "zustand";
 import { useShallow } from "zustand/react/shallow";
 import { AnimatePresence, LazyMotion, domMax, m, useReducedMotion } from "motion/react";
@@ -19,37 +19,58 @@ import { Root, Scrollbar, Thumb, Viewport } from "@radix-ui/react-scroll-area";
 * - `stiff` — Very quick, controlled. Panels, drawers. **(default)**
 */
 const springs = {
-	subtle: {
-		stiffness: 300,
-		damping: 30,
-		mass: 1
-	},
 	snappy: {
-		stiffness: 400,
 		damping: 28,
-		mass: .8
+		mass: .8,
+		stiffness: 400
 	},
 	stiff: {
-		stiffness: 400,
 		damping: 40,
-		mass: 1
+		mass: 1,
+		stiffness: 400
+	},
+	subtle: {
+		damping: 30,
+		mass: 1,
+		stiffness: 300
 	}
 };
 //#endregion
 //#region src/config.ts
 const DEFAULT_STACKING = {
-	scaleStep: .04,
 	offsetStep: 16,
 	opacityStep: 0,
 	radius: 12,
-	renderThreshold: 3
+	renderThreshold: 3,
+	scaleStep: .04
 };
 const DEFAULT_SIDE = {
 	desktop: "right",
 	mobile: "bottom"
 };
+const DEFAULT_CONFIG = {
+	ariaLabel: "Sheet dialog",
+	breakpoint: 768,
+	closeOnBackdrop: true,
+	closeOnEscape: true,
+	closeThreshold: .25,
+	dismissible: true,
+	drag: true,
+	lockScroll: true,
+	maxDepth: Number.POSITIVE_INFINITY,
+	maxWidth: "90vw",
+	modal: true,
+	scaleBackgroundAmount: .97,
+	shouldScaleBackground: false,
+	showOverlay: true,
+	snapPoints: [],
+	snapToSequentialPoints: false,
+	velocityThreshold: .5,
+	width: 420,
+	zIndex: 100
+};
 /** Normalize a string side to a responsive object, merging with defaults. */
-function resolveSide(side) {
+const resolveSide = (side) => {
 	if (typeof side === "string") return {
 		desktop: side,
 		mobile: side
@@ -58,56 +79,37 @@ function resolveSide(side) {
 		...DEFAULT_SIDE,
 		...side
 	};
-}
+};
 /** Resolve a preset name to a SpringConfig, or merge partial config with defaults. */
-function resolveSpring(spring) {
+const resolveSpring = (spring) => {
 	if (typeof spring === "string") return springs[spring];
 	return {
 		...springs.stiff,
 		...spring
 	};
-}
+};
 /** Merge user-provided config with defaults. Resolves union types (side, spring) to concrete values. */
-function resolveConfig(config = {}) {
+const resolveConfig = (config = {}) => {
+	const { side, spring, stacking, ...scalarConfig } = config;
+	const definedConfig = Object.fromEntries(Object.entries(scalarConfig).filter(([, value]) => value !== void 0));
 	return {
-		maxDepth: config.maxDepth ?? Number.POSITIVE_INFINITY,
-		closeOnEscape: config.closeOnEscape ?? true,
-		closeOnBackdrop: config.closeOnBackdrop ?? true,
-		showOverlay: config.showOverlay ?? true,
-		lockScroll: config.lockScroll ?? true,
-		width: config.width ?? 420,
-		maxWidth: config.maxWidth ?? "90vw",
-		breakpoint: config.breakpoint ?? 768,
-		side: resolveSide(config.side),
+		...DEFAULT_CONFIG,
+		...definedConfig,
+		side: resolveSide(side),
+		spring: resolveSpring(spring),
 		stacking: {
 			...DEFAULT_STACKING,
-			...config.stacking
-		},
-		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 ?? .25,
-		velocityThreshold: config.velocityThreshold ?? .5,
-		dismissible: config.dismissible ?? true,
-		modal: config.modal ?? true,
-		shouldScaleBackground: config.shouldScaleBackground ?? false,
-		scaleBackgroundAmount: config.scaleBackgroundAmount ?? .97
+			...stacking
+		}
 	};
-}
+};
 //#endregion
 //#region src/media.ts
 /**
 * Returns true when viewport width is at or below the breakpoint.
 * SSR-safe: defaults to false (desktop).
 */
-function useIsMobile(breakpoint) {
+const useIsMobile = (breakpoint) => {
 	const [isMobile, setIsMobile] = useState(false);
 	useEffect(() => {
 		const mql = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
@@ -117,14 +119,14 @@ function useIsMobile(breakpoint) {
 		return () => mql.removeEventListener("change", handler);
 	}, [breakpoint]);
 	return isMobile;
-}
+};
 /** Resolve the current side from config + viewport. */
-function useResolvedSide(config) {
+const useResolvedSide = (config) => {
 	return useIsMobile(config.breakpoint) ? config.side.mobile : config.side.desktop;
-}
+};
 //#endregion
 //#region src/renderer-effects.ts
-function usePanelHeight(panelRef, hasSnapPoints) {
+const usePanelHeight = (panelRef, hasSnapPoints) => {
 	const [height, setHeight] = useState(0);
 	useEffect(() => {
 		const el = panelRef.current;
@@ -137,24 +139,23 @@ function usePanelHeight(panelRef, hasSnapPoints) {
 		return () => observer.disconnect();
 	}, [panelRef, hasSnapPoints]);
 	return height;
-}
-function useViewportHeight(active) {
-	const getHeight = useCallback(() => typeof window === "undefined" ? 0 : window.visualViewport?.height ?? window.innerHeight, []);
-	const [height, setHeight] = useState(() => getHeight());
+};
+const getViewportHeight = () => typeof window === "undefined" ? 0 : window.visualViewport?.height ?? window.innerHeight;
+const useViewportHeight = (active) => {
+	const [height, setHeight] = useState(() => typeof window === "undefined" ? void 0 : getViewportHeight());
 	useEffect(() => {
 		if (typeof window === "undefined") return;
-		const update = () => setHeight(getHeight());
-		update();
+		const update = () => setHeight(getViewportHeight());
 		window.addEventListener("resize", update);
 		window.visualViewport?.addEventListener("resize", update);
 		return () => {
 			window.removeEventListener("resize", update);
 			window.visualViewport?.removeEventListener("resize", update);
 		};
-	}, [getHeight]);
-	return active ? height : 0;
-}
-function useBodyScale(config, isOpen, prefersReducedMotion) {
+	}, []);
+	return active ? height ?? 0 : 0;
+};
+const useBodyScale = (config, isOpen, prefersReducedMotion) => {
 	useEffect(() => {
 		if (!config.shouldScaleBackground || prefersReducedMotion) return;
 		const wrapper = document.querySelector("[data-stacksheet-wrapper]");
@@ -183,23 +184,24 @@ function useBodyScale(config, isOpen, prefersReducedMotion) {
 		config.scaleBackgroundAmount,
 		prefersReducedMotion
 	]);
-}
+};
 //#endregion
 //#region src/snap-points.ts
-const SNAP_POINT_RE = /^(\d+(?:\.\d+)?)(px|rem|em|vh|%)$/;
+const SNAP_POINT_RE = /^(\d+(?:\.\d+)?)(px|rem|em|vh|%)$/u;
 /**
 * Resolve a snap point value to pixels given the viewport height.
 * - number 0-1: fraction of viewport (0.5 → 50% of vh)
 * - number > 1: pixel value (300 → 300px)
 * - string: parsed via regex for CSS unit support
 */
-function resolveSnapPointPx(point, viewportHeight) {
+const 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]);
-		switch (match[2]) {
+		const [, rawValue, unit] = match;
+		const value = Number.parseFloat(rawValue);
+		switch (unit) {
 			case "px": return value;
 			case "rem":
 			case "em": return value * (typeof document === "undefined" ? 16 : Number.parseFloat(getComputedStyle(document.documentElement).fontSize));
@@ -209,12 +211,12 @@ function resolveSnapPointPx(point, viewportHeight) {
 		}
 	}
 	return 0;
-}
+};
 /**
 * Resolve all snap points to sorted pixel heights (ascending).
 * Returns an array of heights in px that the drawer should snap to.
 */
-function resolveSnapPoints(points, viewportHeight) {
+const resolveSnapPoints = (points, viewportHeight) => {
 	if (points.length === 0) return [];
 	const resolved = [];
 	for (const point of points) {
@@ -228,7 +230,7 @@ function resolveSnapPoints(points, viewportHeight) {
 		if (last === void 0 || Math.abs(px - last) > 1) deduped.push(px);
 	}
 	return deduped;
-}
+};
 /** Velocity threshold (px/ms) for skipping intermediate snap points */
 const SNAP_VELOCITY_THRESHOLD = .4;
 /** Max velocity to consider for snap offset calculation */
@@ -244,7 +246,7 @@ const SNAP_VELOCITY_MULTIPLIER = 150;
 *
 * Returns -1 if the gesture indicates full dismissal.
 */
-function findSnapTarget(dragOffset, panelHeight, snapHeights, velocity, currentIndex, sequential) {
+const findSnapTarget = (dragOffset, panelHeight, snapHeights, velocity, currentIndex, sequential) => {
 	if (snapHeights.length === 0) return -1;
 	const snapOffsets = snapHeights.map((h) => panelHeight - h);
 	const currentPos = dragOffset;
@@ -258,7 +260,7 @@ function findSnapTarget(dragOffset, panelHeight, snapHeights, velocity, currentI
 	const first = snapOffsets[0] ?? 0;
 	let bestIndex = 0;
 	let bestDist = Math.abs(projectedPos - first);
-	for (let i = 1; i < snapOffsets.length; i++) {
+	for (let i = 1; i < snapOffsets.length; i += 1) {
 		const offset = snapOffsets[i] ?? 0;
 		const dist = Math.abs(projectedPos - offset);
 		if (dist < bestDist) {
@@ -268,31 +270,31 @@ function findSnapTarget(dragOffset, panelHeight, snapHeights, velocity, currentI
 	}
 	if (Math.abs(projectedPos - panelHeight) <= bestDist) return -1;
 	return bestIndex;
-}
+};
 /**
 * Get the Y offset for a snap point relative to fully open (0 offset).
 * Returns the number of pixels the drawer should be translated down from fully open.
 */
-function getSnapOffset(snapIndex, snapHeights, panelHeight) {
+const getSnapOffset = (snapIndex, snapHeights, panelHeight) => {
 	if (snapIndex < 0 || snapIndex >= snapHeights.length) return 0;
 	return panelHeight - (snapHeights[snapIndex] ?? 0);
-}
+};
 //#endregion
 //#region src/renderer-helpers.ts
 const EMPTY_CLASSNAMES = {
 	backdrop: "",
-	panel: "",
-	header: ""
+	header: "",
+	panel: ""
 };
-function resolveClassNames(cn) {
+const resolveClassNames = (cn) => {
 	if (!cn) return EMPTY_CLASSNAMES;
 	return {
 		backdrop: cn.backdrop ?? "",
-		panel: cn.panel ?? "",
-		header: cn.header ?? ""
+		header: cn.header ?? "",
+		panel: cn.panel ?? ""
 	};
-}
-function buildAriaProps(isTop, isModal, isComposable, ariaLabel, panelId, hasDescription) {
+};
+const buildAriaProps = (isTop, isModal, isComposable, ariaLabel, panelId, hasDescription) => {
 	if (!isTop) return {};
 	const props = { role: "dialog" };
 	if (isModal) props["aria-modal"] = "true";
@@ -301,8 +303,8 @@ function buildAriaProps(isTop, isModal, isComposable, ariaLabel, panelId, hasDes
 		if (hasDescription) props["aria-describedby"] = `${panelId}-desc`;
 	} else props["aria-label"] = ariaLabel;
 	return props;
-}
-function getDragTransform(side, offset) {
+};
+const getDragTransform = (side, offset) => {
 	if (offset === 0) return {};
 	switch (side) {
 		case "right": return { x: offset };
@@ -310,57 +312,58 @@ function getDragTransform(side, offset) {
 		case "bottom": return { y: offset };
 		default: return {};
 	}
-}
+};
 const VISUAL_TWEEN = {
-	type: "tween",
 	duration: .25,
-	ease: "easeOut"
+	ease: "easeOut",
+	type: "tween"
 };
-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 SHADOW_SM = "0px 1px 3px 0px rgba(0,0,0,0.06), 0px 6px 12px 0px rgba(0,0,0,0.06)";
+const SHADOW_LG = "0px 8px 24px 0px rgba(0,0,0,0.06), 0px 24px 48px 0px rgba(0,0,0,0.04), 0px 48px 96px 0px rgba(0,0,0,0.03)";
+const getShadow = (isNested) => isNested ? SHADOW_SM : SHADOW_LG;
+const buildPanelStyle = (panelStyles, isTop, hasPanelClass, isDragging) => ({
+	...panelStyles,
+	pointerEvents: isTop ? "auto" : "none",
+	...isTop ? {} : { contain: "layout style paint" },
+	...isDragging ? { transition: "none" } : {},
+	...hasPanelClass ? {} : {
+		background: "var(--background, #fff)",
+		borderColor: "var(--border, transparent)"
+	}
+});
+const buildPanelTransition = (isDragging, isTop, spring, stackSpring) => {
 	if (isDragging) return {
-		type: "tween",
-		duration: 0
+		duration: 0,
+		type: "tween"
 	};
 	return {
 		...isTop ? spring : stackSpring,
 		borderRadius: VISUAL_TWEEN,
 		boxShadow: VISUAL_TWEEN
 	};
-}
-function computeSnapYOffset(side, snapHeights, activeSnapIndex, measuredHeight) {
+};
+const computeSnapYOffset = (side, snapHeights, activeSnapIndex, measuredHeight) => {
 	if (side !== "bottom" || snapHeights.length === 0 || measuredHeight <= 0) return 0;
 	return getSnapOffset(activeSnapIndex, snapHeights, measuredHeight);
-}
-function getBottomSlideDistance(measuredHeight) {
+};
+const getBottomSlideDistance = (measuredHeight) => {
 	if (measuredHeight > 0) return measuredHeight;
 	if (typeof window !== "undefined") return window.innerHeight;
 	return 1e3;
-}
-function resolveSlideFrom(side, slideFrom, measuredHeight) {
+};
+const resolveSlideFrom = (side, slideFrom, measuredHeight) => {
 	if (side !== "bottom") return slideFrom;
 	return { y: getBottomSlideDistance(measuredHeight) };
-}
-function buildAnimateTarget(slideTarget, stackOffset, dragOffset, transform, animatedRadius, transition, snapYOffset, isTop) {
+};
+const buildAnimateTarget = (slideTarget, stackOffset, dragOffset, transform, animatedRadius, transition, snapYOffset, isTop) => {
 	const base = {
 		...slideTarget,
 		...stackOffset,
 		...dragOffset,
-		scale: transform.scale,
-		opacity: transform.opacity,
 		...animatedRadius,
 		boxShadow: getShadow(!isTop),
+		opacity: transform.opacity,
+		scale: transform.scale,
 		transition
 	};
 	if (snapYOffset > 0) return {
@@ -368,23 +371,18 @@ function buildAnimateTarget(slideTarget, stackOffset, dragOffset, transform, ani
 		y: (dragOffset.y ?? 0) + snapYOffset
 	};
 	return base;
-}
-function getInitialRadius(side) {
+};
+const getInitialRadius = (side) => {
 	if (side === "bottom") return {
-		borderTopLeftRadius: 0,
-		borderTopRightRadius: 0,
 		borderBottomLeftRadius: 0,
-		borderBottomRightRadius: 0
+		borderBottomRightRadius: 0,
+		borderTopLeftRadius: 0,
+		borderTopRightRadius: 0
 	};
 	return { borderRadius: 0 };
-}
-const SHADOW_SM = "0px 1px 3px 0px rgba(0,0,0,0.06), 0px 6px 12px 0px rgba(0,0,0,0.06)";
-const SHADOW_LG = "0px 8px 24px 0px rgba(0,0,0,0.06), 0px 24px 48px 0px rgba(0,0,0,0.04), 0px 48px 96px 0px rgba(0,0,0,0.03)";
-function getShadow(isNested) {
-	return isNested ? SHADOW_SM : SHADOW_LG;
-}
+};
 //#endregion
-//#region src/Drag/DragConstants.ts
+//#region src/Drag/drag-constants.ts
 /** Elements that should never initiate a drag */
 const INTERACTIVE_TAGS = new Set([
 	"INPUT",
@@ -396,19 +394,19 @@ const INTERACTIVE_TAGS = new Set([
 /** Rubber-band resistance factor for dragging past resting position */
 const RUBBER_BAND_FACTOR = .6;
 //#endregion
-//#region src/Drag/DragGeometry.ts
-function isInteractiveElement(el) {
+//#region src/Drag/drag-geometry.ts
+const isInteractiveElement = (el) => {
 	if (INTERACTIVE_TAGS.has(el.tagName)) return true;
 	if (el.isContentEditable) return true;
 	if (el.closest("button, a, input, textarea, select, [contenteditable]")) return true;
 	if (el.closest("[data-stacksheet-no-drag]")) return true;
 	return false;
-}
+};
 /**
 * Walk up from `el` to find the nearest scrollable ancestor.
 * Returns null if nothing is scrollable in the dismiss axis.
 */
-function findScrollableAncestor(el, axis) {
+const findScrollableAncestor = (el, axis) => {
 	let current = el;
 	while (current) {
 		if (current instanceof HTMLElement) {
@@ -421,23 +419,23 @@ function findScrollableAncestor(el, axis) {
 		current = current.parentElement;
 	}
 	return null;
-}
+};
 /**
 * Check if a scrollable element is at its edge in the dismiss direction.
 * For bottom sheets (sign=1, axis=y), "at edge" means scrolled to top.
 * For left panels (sign=-1, axis=x), "at edge" means scrolled to right end.
 */
-function isAtScrollEdge(el, axis, sign) {
+const 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;
-}
+};
 /**
 * Get the dismiss direction axis and sign for a given side.
 * - right panel → dismiss by dragging right (+x)
 * - left panel → dismiss by dragging left (-x)
 * - bottom panel → dismiss by dragging down (+y)
 */
-function getDismissAxis(side) {
+const getDismissAxis = (side) => {
 	switch (side) {
 		case "right": return {
 			axis: "x",
@@ -456,13 +454,13 @@ function getDismissAxis(side) {
 			sign: 1
 		};
 	}
-}
+};
 /**
 * Decide whether a gesture past the dead zone qualifies as a dismiss drag.
 * Returns "drag" if it's a valid dismiss gesture, "none" if it's off-axis
 * or moving in the wrong direction.
 */
-function classifyGesture(dx, dy, axis, sign) {
+const classifyGesture = (dx, dy, axis, sign) => {
 	const absDx = Math.abs(dx);
 	const absDy = Math.abs(dy);
 	let angleDeg;
@@ -471,19 +469,19 @@ function classifyGesture(dx, dy, axis, sign) {
 	if (angleDeg > 35) return "none";
 	if ((axis === "x" ? dx : dy) * sign < 0) return "none";
 	return "drag";
-}
+};
 /** Decide whether a pointer gesture commits as a drag or should be ignored. */
-function commitGesture(dx, dy, axis, sign, scrollEl) {
+const commitGesture = (dx, dy, axis, sign, scrollEl) => {
 	if (classifyGesture(dx, dy, axis, sign) === "none") return "none";
 	if (scrollEl && !isAtScrollEdge(scrollEl, axis, sign)) return "none";
 	return "drag";
-}
-function getPanelDimension(panel, axis) {
+};
+const getPanelDimension = (panel, axis) => {
 	if (!panel) return 300;
 	return axis === "x" ? panel.offsetWidth : panel.offsetHeight;
-}
+};
 //#endregion
-//#region src/Drag/useDrag.ts
+//#region src/Drag/use-drag.ts
 /**
 * Hook that manages drag gestures that can dismiss a sheet panel.
 *
@@ -500,13 +498,13 @@ function getPanelDimension(panel, axis) {
 * When `snapHeights` is provided, release targeting uses
 * `findSnapTarget()` instead of the simple threshold check.
 */
-function useDrag(panelRef, config, onDragUpdate) {
+const 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) => {
+	const handlePointerDown = (e) => {
 		if (!config.enabled) return;
 		if (e.button !== 0) return;
 		const target = e.target;
@@ -515,19 +513,19 @@ function useDrag(panelRef, config, onDragUpdate) {
 		if (!isHandle && isInteractiveElement(target)) return;
 		scrollTargetRef.current = isHandle ? null : findScrollableAncestor(target, axis);
 		startRef.current = {
+			time: Date.now(),
 			x: e.clientX,
-			y: e.clientY,
-			time: Date.now()
+			y: e.clientY
 		};
 		committedRef.current = null;
 		offsetRef.current = 0;
 		e.currentTarget?.setPointerCapture?.(e.pointerId);
-	}, [config.enabled, axis]);
-	const handlePointerMove = useCallback((e) => {
+	};
+	const handlePointerMove = (e) => {
 		if (!startRef.current) return;
 		const dx = e.clientX - startRef.current.x;
 		const dy = e.clientY - startRef.current.y;
-		const dist = Math.sqrt(dx * dx + dy * dy);
+		const dist = Math.hypot(dx, dy);
 		if (committedRef.current === null && dist < 10) return;
 		if (committedRef.current === null) {
 			committedRef.current = commitGesture(dx, dy, axis, sign, scrollTargetRef.current);
@@ -541,20 +539,16 @@ function useDrag(panelRef, config, onDragUpdate) {
 		const clampedOffset = directional >= 0 ? directional : -Math.sqrt(Math.abs(directional)) * RUBBER_BAND_FACTOR;
 		offsetRef.current = clampedOffset;
 		onDragUpdate({
-			offset: clampedOffset,
-			isDragging: true
+			isDragging: true,
+			offset: clampedOffset
 		});
 		e.preventDefault();
-	}, [
-		axis,
-		sign,
-		onDragUpdate
-	]);
-	const dismiss = useCallback(() => {
+	};
+	const dismiss = () => {
 		if (config.isNested) config.onPop();
 		else config.onClose();
-	}, [config]);
-	const handlePointerUp = useCallback((_e) => {
+	};
+	const handlePointerUp = (_e) => {
 		if (!startRef.current || committedRef.current !== "drag") {
 			startRef.current = null;
 			committedRef.current = null;
@@ -575,8 +569,8 @@ function useDrag(panelRef, config, onDragUpdate) {
 			else {
 				config.onSnap(targetIndex);
 				onDragUpdate({
-					offset: 0,
-					isDragging: false
+					isDragging: false,
+					offset: 0
 				});
 			}
 			return;
@@ -585,26 +579,20 @@ function useDrag(panelRef, config, onDragUpdate) {
 		const fastEnough = velocity > config.velocityThreshold;
 		if (pastThreshold || fastEnough) dismiss();
 		else onDragUpdate({
-			offset: 0,
-			isDragging: false
+			isDragging: false,
+			offset: 0
 		});
-	}, [
-		panelRef,
-		axis,
-		config,
-		onDragUpdate,
-		dismiss
-	]);
-	const handlePointerCancel = useCallback(() => {
+	};
+	const handlePointerCancel = () => {
 		startRef.current = null;
 		committedRef.current = null;
 		offsetRef.current = 0;
 		scrollTargetRef.current = null;
 		onDragUpdate({
-			offset: 0,
-			isDragging: false
+			isDragging: false,
+			offset: 0
 		});
-	}, [onDragUpdate]);
+	};
 	const handlersRef = useRef({
 		handlePointerCancel,
 		handlePointerDown,
@@ -635,7 +623,7 @@ function useDrag(panelRef, config, onDragUpdate) {
 			el.removeEventListener("pointercancel", onPointerCancel);
 		};
 	}, [panelRef, config.enabled]);
-}
+};
 //#endregion
 //#region src/panel-context.tsx
 const SheetPanelContext = createContext(null);
@@ -643,11 +631,11 @@ const SheetPanelContext = createContext(null);
 * Access the current sheet panel's context.
 * Must be called inside a component rendered by the sheet stack.
 */
-function useSheetPanel() {
-	const ctx = useContext(SheetPanelContext);
+const useSheetPanel = () => {
+	const ctx = use(SheetPanelContext);
 	if (!ctx) throw new Error("Sheet.* components must be used inside a sheet panel. They should be rendered by a component opened via actions.open(), push(), etc.");
 	return ctx;
-}
+};
 //#endregion
 //#region src/stacking.ts
 /**
@@ -655,58 +643,56 @@ function useSheetPanel() {
 * depth=0 is the top (foreground) panel.
 * Panels beyond renderThreshold are clamped to the edge position and faded out.
 */
-function getStackTransform(depth, stacking) {
+const getStackTransform = (depth, stacking) => {
 	if (depth <= 0) return {
-		scale: 1,
+		borderRadius: 0,
 		offset: 0,
 		opacity: 1,
-		borderRadius: 0
+		scale: 1
 	};
 	const beyondThreshold = depth >= stacking.renderThreshold;
 	const visualDepth = beyondThreshold ? stacking.renderThreshold - 1 : depth;
 	return {
-		scale: Math.max(.5, 1 - visualDepth * stacking.scaleStep),
+		borderRadius: stacking.radius,
 		offset: visualDepth * stacking.offsetStep,
 		opacity: beyondThreshold ? 0 : Math.max(0, 1 - visualDepth * stacking.opacityStep),
-		borderRadius: stacking.radius
+		scale: Math.max(.5, 1 - visualDepth * stacking.scaleStep)
 	};
-}
+};
 /**
 * Border radius values for the animate target.
 * Must be animated (not static CSS) so Motion applies scale correction
 * when panels are scaled. See: https://motion.dev/docs/react-layout-animations#scale-correction
 */
-function getAnimatedBorderRadius(side, depth, stacking) {
+const getAnimatedBorderRadius = (side, depth, stacking) => {
 	if (side === "bottom") {
 		const radius = depth > 0 ? stacking.radius : 16;
 		return {
-			borderTopLeftRadius: radius,
-			borderTopRightRadius: radius,
 			borderBottomLeftRadius: 0,
-			borderBottomRightRadius: 0
+			borderBottomRightRadius: 0,
+			borderTopLeftRadius: radius,
+			borderTopRightRadius: radius
 		};
 	}
 	if (depth > 0) return { borderRadius: stacking.radius };
 	return { borderRadius: 0 };
-}
+};
 /** Motion initial/exit values for sliding from the given side. */
-function getSlideFrom(side) {
+const getSlideFrom = (side) => {
 	switch (side) {
 		case "right": return { x: "100%" };
 		case "left": return { x: "-100%" };
 		case "bottom": return { y: "100%" };
 		default: return { x: "100%" };
 	}
-}
+};
 /** Motion animate target — the resting position. */
-function getSlideTarget() {
-	return {
-		x: 0,
-		y: 0
-	};
-}
+const getSlideTarget = () => ({
+	x: 0,
+	y: 0
+});
 /** Translate offset that pushes stacked panels away from the stack edge. */
-function getStackOffset(side, offset) {
+const getStackOffset = (side, offset) => {
 	if (offset === 0) return {};
 	switch (side) {
 		case "right": return { x: -offset };
@@ -714,107 +700,101 @@ function getStackOffset(side, offset) {
 		case "bottom": return { y: -offset };
 		default: return {};
 	}
-}
+};
 /** Opposite-side origin so stacked panels recede away from the stack edge. */
-function getTransformOrigin(side) {
+const getTransformOrigin = (side) => {
 	if (side === "right") return "left center";
 	if (side === "left") return "right center";
 	return "center top";
-}
+};
 /**
 * Fixed-position styles for a panel, accounting for side, width, and depth.
 */
-function getPanelStyles(side, config, index) {
+const getPanelStyles = (side, config, index) => {
 	const { width, maxWidth, zIndex } = config;
 	const base = {
-		position: "fixed",
-		zIndex: zIndex + 10 + index,
 		display: "flex",
 		flexDirection: "column",
+		position: "fixed",
+		transformOrigin: getTransformOrigin(side),
 		willChange: "transform",
-		transformOrigin: getTransformOrigin(side)
+		zIndex: zIndex + 10 + index
 	};
 	if (side === "bottom") return {
 		...base,
-		left: 0,
-		right: 0,
 		bottom: 0,
 		height: "85dvh",
-		maxHeight: "85dvh"
+		left: 0,
+		maxHeight: "85dvh",
+		right: 0
 	};
 	const sideStyles = side === "right" ? {
-		top: 0,
+		bottom: 0,
 		right: 0,
-		bottom: 0
+		top: 0
 	} : {
-		top: 0,
+		bottom: 0,
 		left: 0,
-		bottom: 0
+		top: 0
 	};
 	return {
 		...base,
 		...sideStyles,
-		width,
-		maxWidth
+		maxWidth,
+		width
 	};
-}
+};
 //#endregion
 //#region src/icons.tsx
 /** Inline SVG icons — no external dependency */
-function ArrowLeftIcon() {
-	return /* @__PURE__ */ jsx("svg", {
-		"aria-hidden": "true",
-		fill: "none",
-		height: 16,
-		stroke: "currentColor",
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		strokeWidth: 2,
-		viewBox: "0 0 24 24",
-		width: 16,
-		children: /* @__PURE__ */ jsx("path", { d: "M19 12H5M12 19l-7-7 7-7" })
-	});
-}
-function XIcon() {
-	return /* @__PURE__ */ jsx("svg", {
-		"aria-hidden": "true",
-		fill: "none",
-		height: 16,
-		stroke: "currentColor",
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		strokeWidth: 2,
-		viewBox: "0 0 24 24",
-		width: 16,
-		children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" })
-	});
-}
+const ArrowLeftIcon = () => /* @__PURE__ */ jsx("svg", {
+	"aria-hidden": "true",
+	fill: "none",
+	height: 16,
+	stroke: "currentColor",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	strokeWidth: 2,
+	viewBox: "0 0 24 24",
+	width: 16,
+	children: /* @__PURE__ */ jsx("path", { d: "M19 12H5M12 19l-7-7 7-7" })
+});
+const XIcon = () => /* @__PURE__ */ jsx("svg", {
+	"aria-hidden": "true",
+	fill: "none",
+	height: 16,
+	stroke: "currentColor",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	strokeWidth: 2,
+	viewBox: "0 0 24 24",
+	width: 16,
+	children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" })
+});
 //#endregion
-//#region src/SheetPanel/DefaultHeader.tsx
-function DefaultHeader({ isNested, onBack, onClose, className }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: `flex shrink-0 items-center justify-between px-4 pt-4 pb-2 ${className ?? ""}`,
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "flex items-center gap-2",
-			children: isNested && /* @__PURE__ */ jsx("button", {
-				"aria-label": "Back",
-				className: "flex min-h-11 min-w-11 shrink-0 cursor-pointer items-center justify-center rounded-full border-none bg-black/5 p-0 text-inherit opacity-70 transition-opacity duration-150 hover:opacity-100",
-				onClick: onBack,
-				type: "button",
-				children: /* @__PURE__ */ jsx(ArrowLeftIcon, {})
-			})
-		}), /* @__PURE__ */ jsx("button", {
-			"aria-label": "Close",
+//#region src/SheetPanel/default-header.tsx
+const DefaultHeader = ({ isNested, onBack, onClose, className }) => /* @__PURE__ */ jsxs("div", {
+	className: `flex shrink-0 items-center justify-between px-4 pt-4 pb-2 ${className ?? ""}`,
+	children: [/* @__PURE__ */ jsx("div", {
+		className: "flex items-center gap-2",
+		children: isNested && /* @__PURE__ */ jsx("button", {
+			"aria-label": "Back",
 			className: "flex min-h-11 min-w-11 shrink-0 cursor-pointer items-center justify-center rounded-full border-none bg-black/5 p-0 text-inherit opacity-70 transition-opacity duration-150 hover:opacity-100",
-			onClick: onClose,
+			onClick: onBack,
 			type: "button",
-			children: /* @__PURE__ */ jsx(XIcon, {})
-		})]
-	});
-}
+			children: /* @__PURE__ */ jsx(ArrowLeftIcon, {})
+		})
+	}), /* @__PURE__ */ jsx("button", {
+		"aria-label": "Close",
+		className: "flex min-h-11 min-w-11 shrink-0 cursor-pointer items-center justify-center rounded-full border-none bg-black/5 p-0 text-inherit opacity-70 transition-opacity duration-150 hover:opacity-100",
+		onClick: onClose,
+		type: "button",
+		children: /* @__PURE__ */ jsx(XIcon, {})
+	})]
+});
 //#endregion
-//#region src/SheetPanel/SheetPanelContent.tsx
-const PanelInnerContent = memo(function PanelInnerContent({ isComposable, shouldRender, Content, data, renderHeader, headerProps, headerClassName }) {
+//#region src/SheetPanel/sheet-panel-content.tsx
+const PanelInnerContent = ({ isComposable, shouldRender, Content, data, renderHeader, headerProps, headerClassName }) => {
 	if (isComposable) return shouldRender && Content ? /* @__PURE__ */ jsx(Content, { ...data }) : null;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [renderHeader ? renderHeader(headerProps) : /* @__PURE__ */ jsx(DefaultHeader, {
 		...headerProps,
@@ -824,176 +804,188 @@ const PanelInnerContent = memo(function PanelInnerContent({ isComposable, should
 		"data-stacksheet-no-drag": "",
 		children: /* @__PURE__ */ jsx(Content, { ...data })
 	})] });
-});
+};
 PanelInnerContent.displayName = "PanelInnerContent";
 //#endregion
-//#region src/SheetPanel/SheetPanelFocus.tsx
+//#region src/SheetPanel/sheet-panel-focus.tsx
 const LAYERED_MODAL_SELECTORS = [
 	"[role=\"dialog\"][data-state=\"open\"]",
 	"[role=\"alertdialog\"][data-state=\"open\"]",
 	"[data-radix-popper-content-wrapper]",
 	"[data-radix-focus-guard]"
 ].join(", ");
-function ModalFocusTrap({ enabled, active, fallbackRef, children }) {
+const subscribeToFocusTarget = (onStoreChange) => {
+	document.addEventListener("focusin", onStoreChange, true);
+	return () => document.removeEventListener("focusin", onStoreChange, true);
+};
+const getServerLayeredModalFocused = () => false;
+const getLayeredModalFocused = () => {
+	if (typeof document === "undefined") return false;
+	const target = document.activeElement;
+	return !!target && target !== document.body && target instanceof Element && target.closest(LAYERED_MODAL_SELECTORS) !== null;
+};
+const useLayeredModalFocused = (active) => {
+	const layered = useSyncExternalStore(subscribeToFocusTarget, getLayeredModalFocused, getServerLayeredModalFocused);
+	return active && layered;
+};
+const ModalFocusTrap = ({ enabled, active, fallbackRef, children }) => {
 	const paused = useLayeredModalFocused(enabled && active);
 	if (!enabled) return children;
 	return /* @__PURE__ */ jsx(FocusTrap, {
 		active,
 		focusTrapOptions: {
-			initialFocus: false,
-			returnFocusOnDeactivate: true,
-			escapeDeactivates: false,
 			allowOutsideClick: true,
-			checkCanFocusTrap: () => new Promise((resolve) => requestAnimationFrame(() => resolve())),
+			escapeDeactivates: false,
 			fallbackFocus: () => {
 				if (fallbackRef.current) return fallbackRef.current;
 				return document.body;
-			}
+			},
+			initialFocus: false,
+			returnFocusOnDeactivate: true
 		},
 		paused,
 		children
 	});
-}
-function useLayeredModalFocused(active) {
-	const layered = useSyncExternalStore(subscribeToFocusTarget, getLayeredModalFocused, getServerLayeredModalFocused);
-	return active && layered;
-}
-function subscribeToFocusTarget(onStoreChange) {
-	document.addEventListener("focusin", onStoreChange, true);
-	return () => document.removeEventListener("focusin", onStoreChange, true);
-}
-function getServerLayeredModalFocused() {
-	return false;
-}
-function getLayeredModalFocused() {
-	if (typeof document === "undefined") return false;
-	const target = document.activeElement;
-	return !!target && target !== document.body && target instanceof Element && target.closest(LAYERED_MODAL_SELECTORS) !== null;
-}
+};
 //#endregion
-//#region src/SheetPanel/SheetPanelHandles.tsx
-function BottomHandle({ onDismiss }) {
-	return /* @__PURE__ */ jsx("button", {
-		"aria-label": "Dismiss",
-		className: "absolute inset-x-0 top-0 z-10 flex w-full cursor-grab touch-none items-center justify-center border-none bg-transparent pt-2.5 pb-2",
-		"data-stacksheet-handle": "",
-		onClick: onDismiss,
-		type: "button",
-		children: /* @__PURE__ */ jsx("div", {
-			"aria-hidden": "true",
-			className: "h-[5px] w-9 rounded-full bg-current/15"
-		})
-	});
-}
-function SideHandle({ side, isHovered, onDismiss }) {
+//#region src/SheetPanel/sheet-panel-handles.tsx
+const BottomHandle = ({ onDismiss }) => /* @__PURE__ */ jsx("button", {
+	"aria-label": "Dismiss",
+	className: "absolute inset-x-0 top-0 z-10 flex w-full cursor-grab touch-none items-center justify-center border-none bg-transparent pt-2.5 pb-2",
+	"data-stacksheet-handle": "",
+	onClick: onDismiss,
+	type: "button",
+	children: /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		className: "h-[5px] w-9 rounded-full bg-current/15"
+	})
+});
+const SideHandle = ({ side, isHovered, onDismiss }) => {
 	const position = side === "right" ? { right: "100%" } : { left: "100%" };
-	return /* @__PURE__ */ jsx(m.div, {
+	return /* @__PURE__ */ jsx(m.button, {
 		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",
+		className: "absolute top-0 bottom-0 flex w-6 cursor-grab touch-none items-center justify-center border-none bg-transparent p-0 text-inherit",
 		"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 ? .15 : .4,
 			ease: "easeOut"
 		},
+		type: "button",
 		children: /* @__PURE__ */ jsx("div", {
 			"aria-hidden": "true",
 			className: "h-8 w-1 rounded-full bg-current/20"
 		})
 	});
-}
+};
 //#endregion
-//#region src/SheetPanel/SheetPanelLayout.ts
-function resolvePanelLayout(layout, renderHeader) {
+//#region src/SheetPanel/sheet-panel-layout.ts
+const resolvePanelLayout = (layout, renderHeader) => {
 	if (layout) return layout;
 	return renderHeader === false ? "composable" : "classic";
-}
+};
 //#endregion
-//#region src/SheetPanel/SheetPanel.tsx
-const SheetPanel = memo(function SheetPanel({ item, index, depth, isTop, isNested, side, config, classNames, Content, shouldRender, pop, close, swipeClose, swipePop, snapHeights, activeSnapIndex, onSnap, layout, renderHeader, slideFrom, slideTarget, spring, stackSpring, prefersReducedMotion }) {
+//#region src/SheetPanel/sheet-panel.tsx
+const getPanelAriaLabel = (item, fallbackLabel) => item.ariaLabel ?? (typeof item.data?.__ariaLabel === "string" ? item.data.__ariaLabel : void 0) ?? fallbackLabel;
+const getPanelHoverProps = (enabled, setIsHovered) => enabled ? {
+	onBlur: () => setIsHovered(false),
+	onFocus: () => setIsHovered(true),
+	onMouseEnter: () => setIsHovered(true),
+	onMouseLeave: () => setIsHovered(false)
+} : {};
+const getInactivePanelProps = (isTop) => isTop ? {} : {
+	"aria-hidden": "true",
+	inert: true
+};
+const getHeaderProps = ({ close, isNested, pop, side }) => ({
+	isNested,
+	onBack: pop,
+	onClose: close,
+	side
+});
+const getPanelContext = ({ close, hasDescription, isNested, isTop, panelId, pop, registerDescription, side }) => ({
+	back: pop,
+	close,
+	hasDescription,
+	isNested,
+	isTop,
+	panelId,
+	registerDescription,
+	side
+});
+const getOptionalSideHandle = ({ isHovered, onDismiss, show, side }) => show ? /* @__PURE__ */ jsx(SideHandle, {
+	isHovered,
+	onDismiss,
+	side
+}) : null;
+const getOptionalBottomHandle = (show, onDismiss) => show ? /* @__PURE__ */ jsx(BottomHandle, { onDismiss }) : null;
+const completeOpeningAnimation = (hasEnteredRef, isTop, onOpenCompleteRef) => {
+	if (isTop && !hasEnteredRef.current) {
+		hasEnteredRef.current = true;
+		onOpenCompleteRef.current?.();
+	}
+};
+const SheetPanel = ({ item, index, depth, isTop, isNested, side, config, classNames, Content, shouldRender, pop, close, swipeClose, swipePop, snapHeights, activeSnapIndex, onSnap, layout, renderHeader, slideFrom, slideTarget, spring, stackSpring, prefersReducedMotion }) => {
 	const panelRef = useRef(null);
 	const hasEnteredRef = useRef(false);
+	const onOpenCompleteRef = useRef(config.onOpenComplete);
 	const [dragState, setDragState] = useState({
-		offset: 0,
-		isDragging: false
+		isDragging: false,
+		offset: 0
 	});
 	const [isHovered, setIsHovered] = useState(false);
 	const measuredHeight = usePanelHeight(panelRef, snapHeights.length > 0);
 	const transform = getStackTransform(depth, config.stacking);
 	const panelStyles = getPanelStyles(side, config, index);
+	if (!isTop && hasEnteredRef.current) hasEnteredRef.current = false;
 	useEffect(() => {
-		if (!isTop) hasEnteredRef.current = false;
-	}, [isTop]);
-	const handleAnimationComplete = useCallback(() => {
-		if (isTop && !hasEnteredRef.current) {
-			hasEnteredRef.current = true;
-			config.onOpenComplete?.();
-		}
-	}, [isTop, config]);
+		onOpenCompleteRef.current = config.onOpenComplete;
+	}, [config.onOpenComplete]);
+	const handleAnimationComplete = () => {
+		completeOpeningAnimation(hasEnteredRef, isTop, onOpenCompleteRef);
+	};
 	useDrag(panelRef, {
-		enabled: isTop && config.drag && config.dismissible && !prefersReducedMotion,
+		activeSnapIndex,
 		closeThreshold: config.closeThreshold,
-		velocityThreshold: config.velocityThreshold,
-		side,
+		enabled: isTop && config.drag && config.dismissible && !prefersReducedMotion,
+		isNested,
 		onClose: swipeClose,
 		onPop: swipePop,
-		isNested,
-		snapHeights,
-		activeSnapIndex,
 		onSnap,
-		sequential: config.snapToSequentialPoints
+		sequential: config.snapToSequentialPoints,
+		side,
+		snapHeights,
+		velocityThreshold: config.velocityThreshold
 	}, setDragState);
-	const ariaLabel = item.ariaLabel ?? (typeof item.data?.__ariaLabel === "string" ? item.data.__ariaLabel : void 0) ?? config.ariaLabel;
+	const ariaLabel = getPanelAriaLabel(item, config.ariaLabel);
 	const panelId = `stacksheet-${item.id}`;
 	const [hasDescription, setHasDescription] = useState(false);
-	const registerDescription = useCallback(() => {
+	const registerDescription = () => {
 		setHasDescription(true);
 		return () => setHasDescription(false);
-	}, []);
-	const panelContext = useMemo(() => ({
+	};
+	const panelContext = getPanelContext({
 		close,
-		back: pop,
-		isNested,
-		isTop,
-		panelId,
-		side,
 		hasDescription,
-		registerDescription
-	}), [
-		close,
-		pop,
 		isNested,
 		isTop,
 		panelId,
-		side,
-		hasDescription,
-		registerDescription
-	]);
+		pop,
+		registerDescription,
+		side
+	});
 	const isComposable = resolvePanelLayout(layout, renderHeader) === "composable";
 	const hasPanelClass = classNames.panel !== "";
 	const dragOffset = getDragTransform(side, dragState.offset);
 	const panelStyle = buildPanelStyle(panelStyles, isTop, hasPanelClass, dragState.isDragging);
-	const headerProps = useMemo(() => ({
-		isNested,
-		onBack: pop,
-		onClose: close,
-		side
-	}), [
+	const headerProps = getHeaderProps({
 		close,
 		isNested,
 		pop,
 		side
-	]);
+	});
 	const ariaProps = buildAriaProps(isTop, config.modal, isComposable, ariaLabel, panelId, hasDescription);
 	const transition = buildPanelTransition(dragState.isDragging, isTop, spring, stackSpring);
 	const animatedRadius = getAnimatedBorderRadius(side, depth, config.stacking);
@@ -1003,18 +995,28 @@ const SheetPanel = memo(function SheetPanel({ item, index, depth, isTop, isNeste
 	const initialRadius = getInitialRadius(side);
 	const showSideHandle = isTop && side !== "bottom";
 	const showBottomHandle = isTop && side === "bottom";
+	const dismiss = isNested ? pop : close;
+	const sideHandle = getOptionalSideHandle({
+		isHovered,
+		onDismiss: dismiss,
+		show: showSideHandle,
+		side
+	});
+	const bottomHandle = getOptionalBottomHandle(showBottomHandle, dismiss);
+	const hoverProps = getPanelHoverProps(showSideHandle, setIsHovered);
+	const inactivePanelProps = getInactivePanelProps(isTop);
 	const panelContent = /* @__PURE__ */ jsxs(m.div, {
 		animate: animateTarget,
 		className: classNames.panel || void 0,
 		exit: {
 			...resolvedSlideFrom,
-			opacity: .6,
 			boxShadow: getShadow(false),
+			opacity: .6,
 			transition: {
-				type: "tween",
+				boxShadow: VISUAL_TWEEN,
 				duration: prefersReducedMotion ? 0 : .24,
 				ease: "easeOut",
-				boxShadow: VISUAL_TWEEN
+				type: "tween"
 			}
 		},
 		initial: {
@@ -1024,25 +1026,15 @@ const SheetPanel = memo(function SheetPanel({ item, index, depth, isTop, isNeste
 			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,
 		tabIndex: isTop ? -1 : void 0,
-		...isTop ? {} : {
-			"aria-hidden": "true",
-			inert: true
-		},
+		...hoverProps,
+		...inactivePanelProps,
 		...ariaProps,
-		children: [showSideHandle && /* @__PURE__ */ jsx(SideHandle, {
-			isHovered,
-			onDismiss: isNested ? pop : close,
-			side
-		}), /* @__PURE__ */ jsxs("div", {
+		children: [sideHandle, /* @__PURE__ */ jsxs("div", {
 			className: "relative flex min-h-0 flex-1 flex-col overflow-hidden rounded-[inherit]",
-			children: [showBottomHandle && /* @__PURE__ */ jsx(BottomHandle, { onDismiss: isNested ? pop : close }), /* @__PURE__ */ jsx(PanelInnerContent, {
+			children: [bottomHandle, /* @__PURE__ */ jsx(PanelInnerContent, {
 				Content,
 				data: item.data,
 				headerClassName: classNames.header || void 0,
@@ -1062,9 +1054,31 @@ const SheetPanel = memo(function SheetPanel({ item, index, depth, isTop, isNeste
 			children: panelContent
 		})
 	});
-});
+};
 //#endregion
 //#region src/renderer.tsx
+const handleBackdropExitComplete = () => {
+	requestAnimationFrame(() => {
+		document.body.offsetHeight;
+	});
+};
+const getResolvedSnapHeights = (side, snapPoints, viewportHeight) => side === "bottom" && snapPoints.length > 0 ? resolveSnapPoints(snapPoints, viewportHeight) : [];
+const getActiveInternalSnapIndex = ({ defaultSnapIndex, internalSnap, snapContext, snapHeights }) => internalSnap.context === snapContext && internalSnap.snapCount === snapHeights.length ? internalSnap.index : defaultSnapIndex;
+const getMotionSpring = (prefersReducedMotion, config) => prefersReducedMotion ? {
+	duration: 0,
+	type: "tween"
+} : {
+	damping: config.spring.damping,
+	mass: config.spring.mass,
+	stiffness: config.spring.stiffness,
+	type: "spring"
+};
+const getBackdropStyle = (config, hasBackdropClass) => ({
+	cursor: config.closeOnBackdrop && config.dismissible ? "pointer" : void 0,
+	willChange: "opacity",
+	zIndex: config.zIndex,
+	...hasBackdropClass ? {} : { background: "var(--overlay, rgba(0, 0, 0, 0.15))" }
+});
 /**
 * Root renderer component — manages the backdrop, scroll lock, snap points,
 * close reasons, focus restoration, keyboard/CloseWatcher dismissal, and
@@ -1072,20 +1086,16 @@ const SheetPanel = memo(function SheetPanel({ item, index, depth, isTop, isNeste
 *
 * Mounted inside a Portal by `StacksheetProvider`.
 */
-function SheetRenderer({ store, config, sheets, componentMap, classNames: classNamesProp, layout, renderHeader }) {
+const SheetRenderer = ({ store, config, sheets, componentMap, classNames: classNamesProp, layout, renderHeader }) => {
 	const isOpen = useStore(store, (s) => s.isOpen);
 	const stack = useStore(store, (s) => s.stack);
 	const rawClose = useStore(store, (s) => s.close);
 	const rawPop = useStore(store, (s) => s.pop);
 	const side = useResolvedSide(config);
 	const prefersReducedMotion = useReducedMotion() ?? false;
-	const classNames = useMemo(() => resolveClassNames(classNamesProp), [classNamesProp]);
+	const classNames = resolveClassNames(classNamesProp);
 	const viewportHeight = useViewportHeight(isOpen && side === "bottom" && config.snapPoints.length > 0);
-	const snapHeights = useMemo(() => side === "bottom" && config.snapPoints.length > 0 ? resolveSnapPoints(config.snapPoints, viewportHeight) : [], [
-		side,
-		config.snapPoints,
-		viewportHeight
-	]);
+	const snapHeights = getResolvedSnapHeights(side, config.snapPoints, viewportHeight);
 	const snapContext = isOpen ? stack.map((item) => item.id).join("\0") : "";
 	const defaultSnapIndex = snapHeights.length > 0 ? snapHeights.length - 1 : 0;
 	const [internalSnap, setInternalSnap] = useState({
@@ -1093,31 +1103,32 @@ function SheetRenderer({ store, config, sheets, componentMap, classNames: classN
 		index: defaultSnapIndex,
 		snapCount: snapHeights.length
 	});
-	const internalSnapIndex = internalSnap.context === snapContext && internalSnap.snapCount === snapHeights.length ? internalSnap.index : defaultSnapIndex;
+	const internalSnapIndex = getActiveInternalSnapIndex({
+		defaultSnapIndex,
+		internalSnap,
+		snapContext,
+		snapHeights
+	});
 	const activeSnapIndex = config.snapPointIndex ?? internalSnapIndex;
-	const handleSnap = useCallback((index) => {
+	const handleSnap = (index) => {
 		setInternalSnap({
 			context: snapContext,
 			index,
 			snapCount: snapHeights.length
 		});
 		config.onSnapPointChange?.(index);
-	}, [
-		config,
-		snapContext,
-		snapHeights.length
-	]);
+	};
 	const closeReasonRef = useRef("programmatic");
-	const closeWith = useCallback((reason) => {
+	const closeWith = (reason) => {
 		closeReasonRef.current = reason;
 		rawClose();
-	}, [rawClose]);
-	const popWith = useCallback((reason) => {
+	};
+	const popWith = (reason) => {
 		closeReasonRef.current = reason;
 		rawPop();
-	}, [rawPop]);
-	const close = useCallback(() => closeWith("programmatic"), [closeWith]);
-	const pop = useCallback(() => popWith("programmatic"), [popWith]);
+	};
+	const close = () => closeWith("programmatic");
+	const pop = () => popWith("programmatic");
 	useBodyScale(config, isOpen, prefersReducedMotion);
 	const triggerRef = useRef(null);
 	const wasOpenRef = useRef(false);
@@ -1136,72 +1147,62 @@ function SheetRenderer({ store, config, sheets, componentMap, classNames: classN
 	}, [stack.length]);
 	useEffect(() => {
 		if (!(isOpen && config.closeOnEscape && config.dismissible)) return;
-		function handleKeyDown(e) {
+		const handleKeyDown = (e) => {
 			if (e.key === "Escape") {
 				e.preventDefault();
-				if (stackLengthRef.current > 1) popWith("escape");
-				else closeWith("escape");
+				if (stackLengthRef.current > 1) {
+					closeReasonRef.current = "escape";
+					rawPop();
+				} else {
+					closeReasonRef.current = "escape";
+					rawClose();
+				}
 			}
-		}
+		};
 		document.addEventListener("keydown", handleKeyDown);
 		return () => document.removeEventListener("keydown", handleKeyDown);
 	}, [
 		isOpen,
 		config.closeOnEscape,
 		config.dismissible,
-		popWith,
-		closeWith
+		rawPop,
+		rawClose
 	]);
 	useEffect(() => {
-		if (!(isOpen && config.dismissible) || typeof globalThis.CloseWatcher === "undefined") return;
+		if (!(isOpen && config.dismissible) || globalThis.CloseWatcher === void 0) return;
 		const watcher = new globalThis.CloseWatcher();
-		watcher.onclose = () => {
-			if (stackLengthRef.current > 1) popWith("escape");
-			else closeWith("escape");
+		const handleClose = () => {
+			if (stackLengthRef.current > 1) {
+				closeReasonRef.current = "escape";
+				rawPop();
+			} else {
+				closeReasonRef.current = "escape";
+				rawClose();
+			}
+		};
+		watcher.addEventListener("close", handleClose);
+		return () => {
+			watcher.removeEventListener("close", handleClose);
+			watcher.destroy();
 		};
-		return () => watcher.destroy();
 	}, [
 		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
+		rawPop,
+		rawClose
 	]);
+	const slideFrom = getSlideFrom(side);
+	const slideTarget = getSlideTarget();
+	const spring = getMotionSpring(prefersReducedMotion, config);
 	const stackSpring = spring;
 	const isModal = config.modal;
 	const showOverlay = isModal && config.showOverlay;
-	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.15))" }
-	};
-	const handleExitComplete = useCallback(() => {
+	const backdropStyle = getBackdropStyle(config, classNames.backdrop !== "");
+	const handleExitComplete = () => {
 		if (stack.length === 0) config.onCloseComplete?.(closeReasonRef.current);
-	}, [stack.length, config]);
-	const handleBackdropExitComplete = useCallback(() => {
-		requestAnimationFrame(() => {
-			document.body.offsetHeight;
-		});
-	}, []);
-	const swipeClose = useCallback(() => closeWith("swipe"), [closeWith]);
-	const swipePop = useCallback(() => popWith("swipe"), [popWith]);
+	};
+	const swipeClose = () => closeWith("swipe");
+	const swipePop = () => popWith("swipe");
 	const shouldLockScroll = isOpen && isModal && config.lockScroll;
 	return /* @__PURE__ */ jsxs(LazyMotion, {
 		features: domMax,
@@ -1260,22 +1261,22 @@ function SheetRenderer({ store, config, sheets, componentMap, classNames: classN
 			})
 		})]
 	});
-}
+};
 //#endregion
-//#region src/Store/StoreArgs.ts
-function resolvePresentationOptions(value) {
+//#region src/Store/store-args.ts
+const resolvePresentationOptions = (value) => {
 	if (!(value && typeof value === "object")) return;
 	const candidate = value;
 	if (candidate.ariaLabel !== void 0 && typeof candidate.ariaLabel !== "string") return;
 	return candidate;
-}
+};
 /**
 * Dev-mode warning: detect likely inline arrow functions passed as ad-hoc components.
 * When a new component reference has the same displayName/name as an existing one,
 * it's almost always an inline arrow being re-created every render.
 */
-function warnInlineComponent(component, componentRegistry, warnedNames) {
-	if (typeof process === "undefined" || process?.env?.NODE_ENV === "production") return;
+const warnInlineComponent = (component, componentRegistry, warnedNames) => {
+	if (process === void 0 || process?.env?.NODE_ENV === "production") return;
 	const name = component.displayName || component.name;
 	if (!name) return;
 	if (warnedNames.has(name)) return;
@@ -1284,12 +1285,12 @@ function warnInlineComponent(component, componentRegistry, warnedNames) {
 		console.warn(`[stacksheet] A new component reference with name "${name}" was registered (key: ${key}), but a different reference with the same name already exists. This usually means you're passing an inline arrow function (e.g. open(() => <MySheet />)). Define the component outside of render to avoid memory leaks and broken navigate() same-type detection.`);
 		return;
 	}
-}
+};
 /**
 * If `first` is a function (component), register it and return { type, id, data }.
 * Otherwise, pass through the string-based (type, id, data) args unchanged.
 */
-function resolveArgs(componentRegistry, componentMap, getNextKey, warnedNames, first, second, third, fourth) {
+const resolveArgs = (componentRegistry, componentMap, getNextKey, warnedNames, first, second, third, fourth) => {
 	if (typeof first === "function") {
 		const component = first;
 		let typeKey = componentRegistry.get(component);
@@ -1301,26 +1302,26 @@ function resolveArgs(componentRegistry, componentMap, getNextKey, warnedNames, f
 		}
 		if (typeof second === "string") return {
 			ariaLabel: resolvePresentationOptions(fourth)?.ariaLabel,
-			type: typeKey,
+			data: third ?? {},
 			id: second,
-			data: third ?? {}
+			type: typeKey
 		};
 		return {
 			ariaLabel: resolvePresentationOptions(third)?.ariaLabel,
-			type: typeKey,
+			data: second ?? {},
 			id: crypto.randomUUID(),
-			data: second ?? {}
+			type: typeKey
 		};
 	}
 	return {
 		ariaLabel: resolvePresentationOptions(fourth)?.ariaLabel,
-		type: first,
+		data: third ?? {},
 		id: second,
-		data: third ?? {}
+		type: first
 	};
-}
+};
 //#endregion
-//#region src/Store/createSheetStore.ts
+//#region src/Store/create-sheet-store.ts
 /**
 * Create an isolated Zustand store for a sheet stack instance.
 *
@@ -1332,119 +1333,86 @@ function resolveArgs(componentRegistry, componentMap, getNextKey, warnedNames, f
 * The ad-hoc counter is scoped per instance to prevent identity leaks across
 * multiple `createStacksheet()` calls or test runs.
 */
-function createSheetStore(config) {
+const createSheetStore = (config) => {
 	const componentRegistry = /* @__PURE__ */ new Map();
 	const componentMap = /* @__PURE__ */ new Map();
 	let adhocCounter = 0;
-	function getNextKey() {
-		return `__adhoc_${adhocCounter++}`;
-	}
+	const getNextKey = () => {
+		const key = `__adhoc_${adhocCounter}`;
+		adhocCounter += 1;
+		return key;
+	};
 	const warnedNames = /* @__PURE__ */ new Set();
-	function resolve(first, second, third, fourth) {
-		return resolveArgs(componentRegistry, componentMap, getNextKey, warnedNames, first, second, third, fourth);
-	}
+	const resolve = (first, second, third, fourth) => resolveArgs(componentRegistry, componentMap, getNextKey, warnedNames, first, second, third, fourth);
 	/** Remove registry entries for type keys no longer in the stack */
-	function pruneRegistry(remainingStack) {
+	const 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);
 		}
-	}
+	};
 	return {
+		componentMap,
+		componentRegistry,
 		store: createStore()((set, get) => {
-			function _openResolved({ type, id, data, ariaLabel }) {
+			const _openResolved = ({ type, id, data, ariaLabel }) => {
 				set({
+					isOpen: true,
 					stack: [{
-						id,
-						type,
+						ariaLabel,
 						data,
-						ariaLabel
-					}],
-					isOpen: true
+						id,
+						type
+					}]
 				});
-			}
-			function _pushResolved({ type, id, data, ariaLabel }) {
+			};
+			const _pushResolved = ({ type, id, data, ariaLabel }) => {
 				set((state) => {
 					const item = {
-						id,
-						type,
+						ariaLabel,
 						data,
-						ariaLabel
+						id,
+						type
 					};
 					if (Number.isFinite(config.maxDepth) && state.stack.length >= config.maxDepth) return {
-						stack: [...state.stack.slice(0, -1), item],
-						isOpen: true
+						isOpen: true,
+						stack: [...state.stack.slice(0, -1), item]
 					};
 					return {
-						stack: [...state.stack, item],
-						isOpen: true
+						isOpen: true,
+						stack: [...state.stack, item]
 					};
 				});
-			}
-			function _replaceResolved({ type, id, data, ariaLabel }) {
+			};
+			const _replaceResolved = ({ type, id, data, ariaLabel }) => {
 				set((state) => {
 					const item = {
-						id,
-						type,
+						ariaLabel,
 						data,
-						ariaLabel
+						id,
+						type
 					};
 					if (state.stack.length === 0) return {
-						stack: [item],
-						isOpen: true
+						isOpen: true,
+						stack: [item]
 					};
 					return {
-						stack: [...state.stack.slice(0, -1), item],
-						isOpen: true
+						isOpen: true,
+						stack: [...state.stack.slice(0, -1), item]
 					};
 				});
-			}
+			};
 			return {
-				stack: [],
-				isOpen: false,
-				open(first, second, third, fourth) {
-					_openResolved(resolve(first, second, third, fourth));
-				},
-				push(first, second, third, fourth) {
-					_pushResolved(resolve(first, second, third, fourth));
-				},
-				replace(first, second, third, fourth) {
-					_replaceResolved(resolve(first, second, third, fourth));
-				},
-				swap(first, second, third) {
-					let type;
-					let data;
-					const ariaLabel = resolvePresentationOptions(third)?.ariaLabel;
-					if (typeof first === "function") {
-						const component = first;
-						let typeKey = componentRegistry.get(component);
-						if (!typeKey) {
-							warnInlineComponent(component, componentRegistry, warnedNames);
-							typeKey = getNextKey();
-							componentRegistry.set(component, typeKey);
-							componentMap.set(typeKey, component);
-						}
-						type = typeKey;
-						data = second ?? {};
-					} else {
-						type = first;
-						data = second ?? {};
-					}
-					set((state) => {
-						const top = state.stack.at(-1);
-						if (!top) return state;
-						const newStack = [...state.stack];
-						newStack[newStack.length - 1] = {
-							id: top.id,
-							type,
-							data,
-							ariaLabel: ariaLabel ?? top.ariaLabel
-						};
-						return { stack: newStack };
+				close: () => {
+					pruneRegistry([]);
+					set({
+						isOpen: false,
+						stack: []
 					});
 				},
-				navigate(first, second, third, fourth) {
+				isOpen: false,
+				navigate: (first, second, third, fourth) => {
 					const resolved = resolve(first, second, third, fourth);
 					const { stack } = get();
 					const top = stack.at(-1);
@@ -1460,61 +1428,94 @@ function createSheetStore(config) {
 					}
 					_pushResolved(resolved);
 				},
-				setData(first, second, third) {
-					const { id, data } = resolve(first, second, third);
+				open: (first, second, third, fourth) => {
+					_openResolved(resolve(first, second, third, fourth));
+				},
+				pop: () => {
 					set((state) => {
-						const idx = state.stack.findIndex((item) => item.id === id);
-						if (idx === -1) return state;
-						const updated = [...state.stack];
-						updated[idx] = {
-							...updated[idx],
-							data
+						if (state.stack.length <= 1) {
+							pruneRegistry([]);
+							return {
+								isOpen: false,
+								stack: []
+							};
+						}
+						const next = state.stack.slice(0, -1);
+						pruneRegistry(next);
+						return {
+							isOpen: true,
+							stack: next
 						};
-						return { stack: updated };
 					});
 				},
-				remove(id) {
+				push: (first, second, third, fourth) => {
+					_pushResolved(resolve(first, second, third, fourth));
+				},
+				remove: (id) => {
 					set((state) => {
 						const next = state.stack.filter((item) => item.id !== id);
 						if (next.length === state.stack.length) return state;
 						pruneRegistry(next);
 						if (next.length === 0) return {
-							stack: [],
-							isOpen: false
+							isOpen: false,
+							stack: []
 						};
 						return { stack: next };
 					});
 				},
-				pop() {
+				replace: (first, second, third, fourth) => {
+					_replaceResolved(resolve(first, second, third, fourth));
+				},
+				setData: (first, second, third) => {
+					const { id, data } = resolve(first, second, third);
 					set((state) => {
-						if (state.stack.length <= 1) {
-							pruneRegistry([]);
-							return {
-								stack: [],
-								isOpen: false
-							};
-						}
-						const next = state.stack.slice(0, -1);
-						pruneRegistry(next);
-						return {
-							stack: next,
-							isOpen: true
+						const idx = state.stack.findIndex((item) => item.id === id);
+						if (idx === -1) return state;
+						const updated = [...state.stack];
+						updated[idx] = {
+							...updated[idx],
+							data
 						};
+						return { stack: updated };
 					});
 				},
-				close() {
-					pruneRegistry([]);
-					set({
-						stack: [],
-						isOpen: false
+				stack: [],
+				swap: (first, second, third) => {
+					let type;
+					let data;
+					const ariaLabel = resolvePresentationOptions(third)?.ariaLabel;
+					if (typeof first === "function") {
+						const component = first;
+						let typeKey = componentRegistry.get(component);
+						if (!typeKey) {
+							warnInlineComponent(component, componentRegistry, warnedNames);
+							typeKey = getNextKey();
+							componentRegistry.set(component, typeKey);
+							componentMap.set(typeKey, component);
+						}
+						type = typeKey;
+						data = second ?? {};
+					} else {
+						type = first;
+						data = second ?? {};
+					}
+					set((state) => {
+						const top = state.stack.at(-1);
+						if (!top) return state;
+						const newStack = [...state.stack];
+						newStack[newStack.length - 1] = {
+							ariaLabel: ariaLabel ?? top.ariaLabel,
+							data,
+							id: top.id,
+							type
+						};
+						return { stack: newStack };
 					});
 				}
 			};
-		}),
-		componentRegistry,
-		componentMap
+		})
 	};
-}
+};
 //#endregion
 //#region src/create.tsx
 /**
@@ -1547,71 +1548,67 @@ function createSheetStore(config) {
 *
 * Use `useSheetPanel()` inside content components to access `close()` and `back()`.
 */
-function createStacksheet(config) {
+const createStacksheet = (config) => {
 	const resolved = resolveConfig(config);
 	const { store, componentMap } = createSheetStore(resolved);
 	const StoreContext = createContext(null);
-	function useStoreContext() {
-		const ctx = useContext(StoreContext);
+	const useStoreContext = () => {
+		const ctx = use(StoreContext);
 		if (!ctx) throw new Error("useSheet/useStacksheetState must be used within <StacksheetProvider>");
 		return ctx;
-	}
+	};
 	const EMPTY_SHEETS = {};
-	function StacksheetProvider({ sheets = EMPTY_SHEETS, children, classNames, layout, renderHeader }) {
-		const value = useMemo(() => ({
-			store,
-			config: resolved
-		}), []);
-		return /* @__PURE__ */ jsxs(StoreContext.Provider, {
-			value,
-			children: [children, /* @__PURE__ */ jsx(Portal, {
-				asChild: false,
-				children: /* @__PURE__ */ jsx(SheetRenderer, {
-					classNames,
-					componentMap,
-					config: resolved,
-					layout,
-					renderHeader,
-					sheets,
-					store
-				})
-			})]
-		});
-	}
-	function useSheet() {
+	const providerValue = {
+		config: resolved,
+		store
+	};
+	const StacksheetProvider = ({ sheets = EMPTY_SHEETS, children, classNames, layout, renderHeader }) => /* @__PURE__ */ jsxs(StoreContext.Provider, {
+		value: providerValue,
+		children: [children, /* @__PURE__ */ jsx(Portal, {
+			asChild: false,
+			children: /* @__PURE__ */ jsx(SheetRenderer, {
+				classNames,
+				componentMap,
+				config: resolved,
+				layout,
+				renderHeader,
+				sheets,
+				store
+			})
+		})]
+	});
+	const useSheet = () => {
 		const { store: s } = useStoreContext();
-		return useMemo(() => {
-			const state = s.getState();
-			return {
-				open: state.open,
-				push: state.push,
-				replace: state.replace,
-				swap: state.swap,
-				navigate: state.navigate,
-				setData: state.setData,
-				remove: state.remove,
-				pop: state.pop,
-				close: state.close
-			};
-		}, [s]);
-	}
-	function useStacksheetState() {
+		const state = s.getState();
+		return {
+			close: state.close,
+			navigate: state.navigate,
+			open: state.open,
+			pop: state.pop,
+			push: state.push,
+			remove: state.remove,
+			replace: state.replace,
+			setData: state.setData,
+			swap: state.swap
+		};
+	};
+	const useStacksheetState = () => {
 		const { store: s } = useStoreContext();
 		return useStore(s, useShallow((state) => ({
-			stack: state.stack,
-			isOpen: state.isOpen
+			isOpen: state.isOpen,
+			stack: state.stack
 		})));
-	}
+	};
 	return {
 		StacksheetProvider,
+		store,
 		useSheet,
-		useStacksheetState,
-		store
+		useStacksheetState
 	};
-}
+};
 //#endregion
-//#region src/SheetParts/SheetBack.tsx
-function SheetBack({ asChild, className, style, children }) {
+//#region src/SheetParts/sheet-back.tsx
+const SheetBack = ({ asChild, className, style, children }) => {
 	const { back, isNested } = useSheetPanel();
 	if (!isNested) return null;
 	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
@@ -1622,10 +1619,10 @@ function SheetBack({ asChild, className, style, children }) {
 		type: asChild ? void 0 : "button",
 		children: children ?? /* @__PURE__ */ jsx(ArrowLeftIcon, {})
 	});
-}
+};
 //#endregion
-//#region src/SheetParts/SheetBody.tsx
-function SheetBody({ asChild, className, style, children }) {
+//#region src/SheetParts/sheet-body.tsx
+const SheetBody = ({ asChild, className, style, children }) => {
 	if (asChild) return /* @__PURE__ */ jsx(Slot, {
 		className: joinClassNames("relative min-h-0 flex-1", className),
 		"data-stacksheet-no-drag": "",
@@ -1645,10 +1642,10 @@ function SheetBody({ asChild, className, style, children }) {
 			children: /* @__PURE__ */ jsx(Thumb, { className: "relative flex-1 rounded bg-current/15" })
 		})]
 	});
-}
+};
 //#endregion
-//#region src/SheetParts/SheetClose.tsx
-function SheetClose({ asChild, className, style, children }) {
+//#region src/SheetParts/sheet-close.tsx
+const SheetClose = ({ asChild, className, style, children }) => {
 	const { close } = useSheetPanel();
 	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
 		"aria-label": children ? void 0 : "Close",
@@ -1658,10 +1655,10 @@ function SheetClose({ asChild, className, style, children }) {
 		type: asChild ? void 0 : "button",
 		children: children ?? /* @__PURE__ */ jsx(XIcon, {})
 	});
-}
+};
 //#endregion
-//#region src/SheetParts/SheetDescription.tsx
-function SheetDescription({ asChild, className, style, children }) {
+//#region src/SheetParts/sheet-description.tsx
+const SheetDescription = ({ asChild, className, style, children }) => {
 	const { panelId, registerDescription } = useSheetPanel();
 	useEffect(() => registerDescription(), [registerDescription]);
 	return /* @__PURE__ */ jsx(asChild ? Slot : "p", {
@@ -1670,53 +1667,46 @@ function SheetDescription({ asChild, className, style, children }) {
 		style,
 		children
 	});
-}
+};
 //#endregion
-//#region src/SheetParts/SheetFooter.tsx
-function SheetFooter({ asChild, className, style, children }) {
+//#region src/SheetParts/sheet-footer.tsx
+const SheetFooter = ({ asChild, className, style, children }) => {
 	return /* @__PURE__ */ jsx(asChild ? Slot : "footer", {
 		className: joinClassNames(asChild ? "shrink-0" : "flex shrink-0 items-center gap-2 border-t px-6 py-3", className),
 		style,
 		children
 	});
-}
+};
 //#endregion
-//#region src/SheetParts/SheetHandle.tsx
-function SheetHandle({ asChild, className, style, children }) {
+//#region src/SheetParts/sheet-handle.tsx
+const SheetHandle = ({ asChild, className, style, children }) => {
 	const { close, back, isNested } = useSheetPanel();
 	const dismiss = isNested ? back : close;
-	return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
 		"aria-label": "Dismiss",
-		className: joinClassNames(asChild ? void 0 : "flex shrink-0 cursor-grab touch-none items-center justify-center pt-4 pb-1", className),
+		className: joinClassNames(asChild ? void 0 : "flex shrink-0 cursor-grab touch-none items-center justify-center border-none bg-transparent pt-4 pb-1 text-inherit", className),
 		"data-stacksheet-handle": "",
 		onClick: dismiss,
-		onKeyDown: (e) => {
-			if (e.key === "Enter" || e.key === " ") {
-				e.preventDefault();
-				dismiss();
-			}
-		},
-		role: "button",
 		style,
-		tabIndex: 0,
+		type: asChild ? void 0 : "button",
 		children: children ?? /* @__PURE__ */ jsx("div", {
 			"aria-hidden": "true",
 			className: "h-1 w-9 rounded-sm bg-current/25"
 		})
 	});
-}
+};
 //#endregion
-//#region src/SheetParts/SheetHeader.tsx
-function SheetHeader({ asChild, className, style, children }) {
+//#region src/SheetParts/sheet-header.tsx
+const SheetHeader = ({ asChild, className, style, children }) => {
 	return /* @__PURE__ */ jsx(asChild ? Slot : "header", {
 		className: joinClassNames(asChild ? "shrink-0" : "flex h-14 shrink-0 items-center justify-between border-b px-6", className),
 		style,
 		children
 	});
-}
+};
 //#endregion
-//#region src/SheetParts/SheetTitle.tsx
-function SheetTitle({ asChild, className, style, children }) {
+//#region src/SheetParts/sheet-title.tsx
+const SheetTitle = ({ asChild, className, style, children }) => {
 	const { panelId } = useSheetPanel();
 	return /* @__PURE__ */ jsx(asChild ? Slot : "h2", {
 		className: joinClassNames(asChild ? void 0 : "font-semibold text-sm", className),
@@ -1724,9 +1714,9 @@ function SheetTitle({ asChild, className, style, children }) {
 		style,
 		children
 	});
-}
+};
 //#endregion
-//#region src/SheetParts/SheetParts.ts
+//#region src/SheetParts/sheet-parts.ts
 /**
 * Composable Sheet Parts for building custom Sheet layouts.
 *