@patternmode/stacksheet 1.3.5 → 1.3.7

package/dist/index.mjs

@@ -1,8 +1,9 @@
 "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 { springs as springs$1 } from "@howells/motion";
 import { AnimatePresence, LazyMotion, domMax, m, useReducedMotion } from "motion/react";
 import { RemoveScroll } from "react-remove-scroll";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -11,45 +12,65 @@ import { joinClassNames } from "@patternmode/system";
 import { Slot } from "@radix-ui/react-slot";
 import { Root, Scrollbar, Thumb, Viewport } from "@radix-ui/react-scroll-area";
 //#region src/springs.ts
+/** Strips the shared token's `type: "spring"` down to Stacksheet's numeric SpringConfig. */
+const toSpringConfig = (spring) => ({
+	damping: spring.damping,
+	mass: spring.mass,
+	stiffness: spring.stiffness
+});
 /**
 * Spring presets inspired by iOS animation feel.
 *
-* - `subtle` — Barely noticeable bounce, professional.
-* - `snappy` — Quick, responsive for interactions.
-* - `stiff` — Very quick, controlled. Panels, drawers. **(default)**
+* - `subtle` — Barely noticeable bounce, professional. (shared @howells/motion token)
+* - `snappy` — Quick, responsive for interactions. (shared @howells/motion token)
+* - `stiff` — Very quick, controlled. Panels, drawers. **(default)** Intentional
+*   fork: damping 40 (tighter than the shared `stiff`) for drawer control.
 */
 const springs = {
-	subtle: {
-		stiffness: 300,
-		damping: 30,
-		mass: 1
-	},
-	snappy: {
-		stiffness: 400,
-		damping: 28,
-		mass: .8
-	},
+	snappy: toSpringConfig(springs$1.snappy),
 	stiff: {
-		stiffness: 400,
 		damping: 40,
-		mass: 1
-	}
+		mass: 1,
+		stiffness: 400
+	},
+	subtle: toSpringConfig(springs$1.subtle)
 };
 //#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,163 +79,168 @@ 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)`);
 		setIsMobile(mql.matches);
-		const handler = (e) => setIsMobile(e.matches);
+		const handler = (e) => {
+			setIsMobile(e.matches);
+		};
 		mql.addEventListener("change", handler);
-		return () => mql.removeEventListener("change", handler);
+		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;
-		if (!(el && hasSnapPoints)) return;
-		setHeight(el.offsetHeight);
-		const observer = new ResizeObserver(([entry]) => {
-			if (entry) setHeight(entry.contentRect.height);
-		});
-		observer.observe(el);
-		return () => observer.disconnect();
+		let observer;
+		if (el !== null && hasSnapPoints) {
+			setHeight(el.offsetHeight);
+			observer = new ResizeObserver(([entry]) => {
+				if (entry) setHeight(entry.contentRect.height);
+			});
+			observer.observe(el);
+		}
+		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();
-		window.addEventListener("resize", update);
-		window.visualViewport?.addEventListener("resize", update);
+		const update = () => {
+			setHeight(getViewportHeight());
+		};
+		const canListen = typeof window !== "undefined";
+		if (canListen) {
+			window.addEventListener("resize", update);
+			window.visualViewport?.addEventListener("resize", update);
+		}
 		return () => {
-			window.removeEventListener("resize", update);
-			window.visualViewport?.removeEventListener("resize", update);
+			if (canListen) {
+				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]");
-		if (!(wrapper && wrapper instanceof HTMLElement)) return;
-		if (isOpen) {
+		const resetWrapper = () => {
+			if (wrapper instanceof HTMLElement) {
+				wrapper.style.transform = "";
+				wrapper.style.borderRadius = "";
+				wrapper.style.transition = "";
+				wrapper.style.overflow = "";
+				wrapper.style.transformOrigin = "";
+			}
+		};
+		const canScale = config.shouldScaleBackground && !prefersReducedMotion && wrapper instanceof HTMLElement;
+		if (canScale && isOpen) {
 			const scale = config.scaleBackgroundAmount;
 			wrapper.style.transition = "transform 500ms cubic-bezier(0.32, 0.72, 0, 1), border-radius 500ms cubic-bezier(0.32, 0.72, 0, 1)";
 			wrapper.style.transform = `scale(${scale})`;
 			wrapper.style.borderRadius = "8px";
 			wrapper.style.overflow = "hidden";
 			wrapper.style.transformOrigin = "center top";
-			return;
+			return resetWrapper;
 		}
-		wrapper.style.transform = "";
-		wrapper.style.borderRadius = "";
 		const handleEnd = () => {
-			wrapper.style.transition = "";
-			wrapper.style.overflow = "";
-			wrapper.style.transformOrigin = "";
+			resetWrapper();
+		};
+		if (canScale) {
+			wrapper.style.transform = "";
+			wrapper.style.borderRadius = "";
+			wrapper.addEventListener("transitionend", handleEnd, { once: true });
+		}
+		return () => {
+			if (wrapper instanceof HTMLElement) wrapper.removeEventListener("transitionend", handleEnd);
 		};
-		wrapper.addEventListener("transitionend", handleEnd, { once: true });
-		return () => wrapper.removeEventListener("transitionend", handleEnd);
 	}, [
 		isOpen,
 		config.shouldScaleBackground,
 		config.scaleBackgroundAmount,
 		prefersReducedMotion
 	]);
-}
+};
 //#endregion
 //#region src/snap-points.ts
-const SNAP_POINT_RE = /^(\d+(?:\.\d+)?)(px|rem|em|vh|%)$/;
+const SNAP_POINT_RE = /^(?<value>\d+(?:\.\d+)?)(?<unit>px|rem|em|vh|%)$/u;
+const getRootFontSize = () => typeof document === "undefined" ? 16 : Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
+const resolveUnitPx = (value, unit, viewportHeight) => {
+	if (unit === "px") return value;
+	if (unit === "rem" || unit === "em") return value * getRootFontSize();
+	if (unit === "vh" || unit === "%") return value / 100 * viewportHeight;
+	return 0;
+};
 /**
 * 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]) {
-			case "px": return value;
-			case "rem":
-			case "em": return value * (typeof document === "undefined" ? 16 : Number.parseFloat(getComputedStyle(document.documentElement).fontSize));
-			case "vh":
-			case "%": return value / 100 * viewportHeight;
-			default: return 0;
-		}
+		const match = SNAP_POINT_RE.exec(point);
+		const rawValue = match?.groups?.value;
+		const unit = match?.groups?.unit;
+		if (rawValue === void 0 || unit === void 0) return 0;
+		return resolveUnitPx(Number.parseFloat(rawValue), unit, 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 +254,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 +270,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 +284,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 +294,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 +327,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 +336,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 +395,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 +418,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 instanceof HTMLElement && 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 +443,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 +478,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,103 +493,77 @@ 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";
+	if (scrollEl !== null && !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
-/**
-* Hook that manages drag gestures that can dismiss a sheet panel.
-*
-* Gesture pipeline:
-* 1. Dead zone (10px) — ignores micro-movements
-* 2. Angle check (35°) — must be roughly aligned with dismiss axis
-* 3. Scroll conflict — yields to scrollable containers not at edge
-* 4. Commit — drag is active, applies offset via `onDragUpdate`
-* 5. Release — velocity + threshold determine close/snap/bounce-back
-*
-* Opposite-direction drag uses √(offset) damping for elastic
-* rubber-band resistance (same physics as iOS over-scroll).
-*
-* When `snapHeights` is provided, release targeting uses
-* `findSnapTarget()` instead of the simple threshold check.
-*/
-function useDrag(panelRef, config, onDragUpdate) {
-	const startRef = useRef(null);
-	const committedRef = useRef(null);
-	const offsetRef = useRef(0);
-	const scrollTargetRef = useRef(null);
-	const { axis, sign } = getDismissAxis(config.side);
-	const handlePointerDown = useCallback((e) => {
-		if (!config.enabled) return;
-		if (e.button !== 0) return;
-		const target = e.target;
-		if (!target) return;
-		const isHandle = !!target.closest("[data-stacksheet-handle]");
+//#region src/Drag/use-drag.ts
+const resetDragRefs = ({ committedRef, offsetRef, scrollTargetRef, startRef }) => {
+	startRef.current = null;
+	committedRef.current = null;
+	offsetRef.current = 0;
+	scrollTargetRef.current = null;
+};
+const createDragHandlers = ({ axis, config, onDragUpdate, panelRef, refs, sign }) => {
+	const dismiss = () => {
+		if (config.isNested) config.onPop();
+		else config.onClose();
+	};
+	const handlePointerDown = (e) => {
+		if (!config.enabled || e.button !== 0 || !(e.target instanceof Element)) return;
+		const { target } = e;
+		const isHandle = target.closest("[data-stacksheet-handle]") !== null;
 		if (!isHandle && isInteractiveElement(target)) return;
-		scrollTargetRef.current = isHandle ? null : findScrollableAncestor(target, axis);
-		startRef.current = {
+		refs.scrollTargetRef.current = isHandle ? null : findScrollableAncestor(target, axis);
+		refs.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) => {
-		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);
-		if (committedRef.current === null && dist < 10) return;
-		if (committedRef.current === null) {
-			committedRef.current = commitGesture(dx, dy, axis, sign, scrollTargetRef.current);
-			if (committedRef.current !== "drag") {
-				startRef.current = null;
+		refs.committedRef.current = null;
+		refs.offsetRef.current = 0;
+		if (e.currentTarget instanceof HTMLElement) e.currentTarget.setPointerCapture(e.pointerId);
+	};
+	const handlePointerMove = (e) => {
+		if (refs.startRef.current === null) return;
+		const dx = e.clientX - refs.startRef.current.x;
+		const dy = e.clientY - refs.startRef.current.y;
+		const dist = Math.hypot(dx, dy);
+		if (refs.committedRef.current === null && dist < 10) return;
+		if (refs.committedRef.current === null) {
+			refs.committedRef.current = commitGesture(dx, dy, axis, sign, refs.scrollTargetRef.current);
+			if (refs.committedRef.current !== "drag") {
+				refs.startRef.current = null;
 				return;
 			}
 		}
-		if (committedRef.current !== "drag") return;
+		if (refs.committedRef.current !== "drag") return;
 		const directional = (axis === "x" ? dx : dy) * sign;
 		const clampedOffset = directional >= 0 ? directional : -Math.sqrt(Math.abs(directional)) * RUBBER_BAND_FACTOR;
-		offsetRef.current = clampedOffset;
+		refs.offsetRef.current = clampedOffset;
 		onDragUpdate({
-			offset: clampedOffset,
-			isDragging: true
+			isDragging: true,
+			offset: clampedOffset
 		});
 		e.preventDefault();
-	}, [
-		axis,
-		sign,
-		onDragUpdate
-	]);
-	const dismiss = useCallback(() => {
-		if (config.isNested) config.onPop();
-		else config.onClose();
-	}, [config]);
-	const handlePointerUp = useCallback((_e) => {
-		if (!startRef.current || committedRef.current !== "drag") {
-			startRef.current = null;
-			committedRef.current = null;
-			scrollTargetRef.current = null;
+	};
+	const handlePointerUp = () => {
+		if (refs.startRef.current === null || refs.committedRef.current !== "drag") {
+			resetDragRefs(refs);
 			return;
 		}
-		const offset = Math.max(0, offsetRef.current);
-		const elapsed = Date.now() - startRef.current.time;
+		const offset = Math.max(0, refs.offsetRef.current);
+		const elapsed = Date.now() - refs.startRef.current.time;
 		const velocity = elapsed > 0 ? offset / elapsed : 0;
-		startRef.current = null;
-		committedRef.current = null;
-		offsetRef.current = 0;
-		scrollTargetRef.current = null;
+		resetDragRefs(refs);
 		const panelSize = getPanelDimension(panelRef.current, axis);
 		if (config.snapHeights.length > 0) {
 			const targetIndex = findSnapTarget(offset, panelSize, config.snapHeights, velocity, config.activeSnapIndex, config.sequential);
@@ -575,8 +571,8 @@ function useDrag(panelRef, config, onDragUpdate) {
 			else {
 				config.onSnap(targetIndex);
 				onDragUpdate({
-					offset: 0,
-					isDragging: false
+					isDragging: false,
+					offset: 0
 				});
 			}
 			return;
@@ -585,26 +581,59 @@ 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,
+	};
+	const handlePointerCancel = () => {
+		resetDragRefs(refs);
+		onDragUpdate({
+			isDragging: false,
+			offset: 0
+		});
+	};
+	return {
+		handlePointerCancel,
+		handlePointerDown,
+		handlePointerMove,
+		handlePointerUp
+	};
+};
+/**
+* Hook that manages drag gestures that can dismiss a sheet panel.
+*
+* Gesture pipeline:
+* 1. Dead zone (10px) — ignores micro-movements
+* 2. Angle check (35°) — must be roughly aligned with dismiss axis
+* 3. Scroll conflict — yields to scrollable containers not at edge
+* 4. Commit — drag is active, applies offset via `onDragUpdate`
+* 5. Release — velocity + threshold determine close/snap/bounce-back
+*
+* Opposite-direction drag uses √(offset) damping for elastic
+* rubber-band resistance (same physics as iOS over-scroll).
+*
+* When `snapHeights` is provided, release targeting uses
+* `findSnapTarget()` instead of the simple threshold check.
+*/
+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 { handlePointerCancel, handlePointerDown, handlePointerMove, handlePointerUp } = createDragHandlers({
 		axis,
 		config,
 		onDragUpdate,
-		dismiss
-	]);
-	const handlePointerCancel = useCallback(() => {
-		startRef.current = null;
-		committedRef.current = null;
-		offsetRef.current = 0;
-		scrollTargetRef.current = null;
-		onDragUpdate({
-			offset: 0,
-			isDragging: false
-		});
-	}, [onDragUpdate]);
+		panelRef,
+		refs: {
+			committedRef,
+			offsetRef,
+			scrollTargetRef,
+			startRef
+		},
+		sign
+	});
 	const handlersRef = useRef({
 		handlePointerCancel,
 		handlePointerDown,
@@ -619,23 +648,35 @@ function useDrag(panelRef, config, onDragUpdate) {
 	};
 	useEffect(() => {
 		const el = panelRef.current;
-		if (!(el && config.enabled)) return;
-		const onPointerDown = (event) => handlersRef.current.handlePointerDown(event);
-		const onPointerMove = (event) => handlersRef.current.handlePointerMove(event);
-		const onPointerUp = (event) => handlersRef.current.handlePointerUp(event);
-		const onPointerCancel = () => handlersRef.current.handlePointerCancel();
-		el.addEventListener("pointerdown", onPointerDown);
-		el.addEventListener("pointermove", onPointerMove);
-		el.addEventListener("pointerup", onPointerUp);
-		el.addEventListener("pointercancel", onPointerCancel);
+		const onPointerDown = (event) => {
+			handlersRef.current.handlePointerDown(event);
+		};
+		const onPointerMove = (event) => {
+			handlersRef.current.handlePointerMove(event);
+		};
+		const onPointerUp = () => {
+			handlersRef.current.handlePointerUp();
+		};
+		const onPointerCancel = () => {
+			handlersRef.current.handlePointerCancel();
+		};
+		const canListen = el !== null && config.enabled;
+		if (canListen) {
+			el.addEventListener("pointerdown", onPointerDown);
+			el.addEventListener("pointermove", onPointerMove);
+			el.addEventListener("pointerup", onPointerUp);
+			el.addEventListener("pointercancel", onPointerCancel);
+		}
 		return () => {
-			el.removeEventListener("pointerdown", onPointerDown);
-			el.removeEventListener("pointermove", onPointerMove);
-			el.removeEventListener("pointerup", onPointerUp);
-			el.removeEventListener("pointercancel", onPointerCancel);
+			if (canListen) {
+				el.removeEventListener("pointerdown", onPointerDown);
+				el.removeEventListener("pointermove", onPointerMove);
+				el.removeEventListener("pointerup", onPointerUp);
+				el.removeEventListener("pointercancel", onPointerCancel);
+			}
 		};
 	}, [panelRef, config.enabled]);
-}
+};
 //#endregion
 //#region src/panel-context.tsx
 const SheetPanelContext = createContext(null);
@@ -643,11 +684,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 +696,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,286 +753,319 @@ 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 }) {
-	if (isComposable) return shouldRender && Content ? /* @__PURE__ */ jsx(Content, { ...data }) : null;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [renderHeader ? renderHeader(headerProps) : /* @__PURE__ */ jsx(DefaultHeader, {
+//#region src/SheetPanel/sheet-panel-content.tsx
+const PanelInnerContent = ({ isComposable, shouldRender, Content, data, renderHeader, headerProps, headerClassName }) => {
+	if (isComposable) return shouldRender && Content !== void 0 ? /* @__PURE__ */ jsx(Content, { ...data }) : null;
+	const customHeader = renderHeader !== void 0 && renderHeader !== false ? renderHeader : void 0;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [customHeader === void 0 ? /* @__PURE__ */ jsx(DefaultHeader, {
 		...headerProps,
 		className: headerClassName
-	}), shouldRender && Content && /* @__PURE__ */ jsx("div", {
+	}) : customHeader(headerProps), shouldRender && Content !== void 0 && /* @__PURE__ */ jsx("div", {
 		className: "min-h-0 flex-1 overflow-y-auto overscroll-contain",
 		"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;
+				if (fallbackRef.current !== null) 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 }) {
-	const panelRef = useRef(null);
+//#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 useOpeningCompletion = (isTop, onOpenComplete) => {
 	const hasEnteredRef = useRef(false);
+	const onOpenCompleteRef = useRef(onOpenComplete);
+	if (!isTop && hasEnteredRef.current) hasEnteredRef.current = false;
+	useEffect(() => {
+		onOpenCompleteRef.current = onOpenComplete;
+	}, [onOpenComplete]);
+	return () => {
+		completeOpeningAnimation(hasEnteredRef, isTop, onOpenCompleteRef);
+	};
+};
+const useSheetPanelDrag = ({ activeSnapIndex, config, isNested, isTop, onSnap, prefersReducedMotion, side, snapHeights, swipeClose, swipePop }, panelRef) => {
 	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);
-	useEffect(() => {
-		if (!isTop) hasEnteredRef.current = false;
-	}, [isTop]);
-	const handleAnimationComplete = useCallback(() => {
-		if (isTop && !hasEnteredRef.current) {
-			hasEnteredRef.current = true;
-			config.onOpenComplete?.();
-		}
-	}, [isTop, config]);
 	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 panelId = `stacksheet-${item.id}`;
+	return dragState;
+};
+const useSheetPanelContext = ({ close, isNested, isTop, pop, side }, panelId) => {
 	const [hasDescription, setHasDescription] = useState(false);
-	const registerDescription = useCallback(() => {
+	const registerDescription = () => {
 		setHasDescription(true);
-		return () => setHasDescription(false);
-	}, []);
-	const panelContext = useMemo(() => ({
-		close,
-		back: pop,
-		isNested,
-		isTop,
-		panelId,
-		side,
-		hasDescription,
-		registerDescription
-	}), [
-		close,
-		pop,
-		isNested,
-		isTop,
-		panelId,
-		side,
+		return () => {
+			setHasDescription(false);
+		};
+	};
+	return {
 		hasDescription,
-		registerDescription
-	]);
+		panelContext: getPanelContext({
+			close,
+			hasDescription,
+			isNested,
+			isTop,
+			panelId,
+			pop,
+			registerDescription,
+			side
+		})
+	};
+};
+const useSheetPanelModel = (props) => {
+	const { item, index, depth, isTop, isNested, side, config, classNames, pop, close, snapHeights, activeSnapIndex, layout, renderHeader, slideFrom, slideTarget, spring, stackSpring } = props;
+	const panelRef = useRef(null);
+	const [isHovered, setIsHovered] = useState(false);
+	const measuredHeight = usePanelHeight(panelRef, snapHeights.length > 0);
+	const transform = getStackTransform(depth, config.stacking);
+	const panelStyles = getPanelStyles(side, config, index);
+	const handleAnimationComplete = useOpeningCompletion(isTop, config.onOpenComplete);
+	const dragState = useSheetPanelDrag(props, panelRef);
+	const ariaLabel = getPanelAriaLabel(item, config.ariaLabel);
+	const panelId = `stacksheet-${item.id}`;
+	const { hasDescription, panelContext } = useSheetPanelContext(props, panelId);
 	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 +1075,45 @@ 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
+	});
+	return {
+		animateTarget,
+		ariaProps,
+		bottomHandle: getOptionalBottomHandle(showBottomHandle, dismiss),
+		handleAnimationComplete,
+		headerProps,
+		hoverProps: getPanelHoverProps(showSideHandle, setIsHovered),
+		inactivePanelProps: getInactivePanelProps(isTop),
+		initialRadius,
+		isComposable,
+		panelContext,
+		panelRef,
+		panelStyle,
+		resolvedSlideFrom,
+		sideHandle
+	};
+};
+const SheetPanel = (props) => {
+	const { item, isTop, config, classNames, Content, shouldRender, renderHeader, prefersReducedMotion } = props;
+	const { animateTarget, ariaProps, bottomHandle, handleAnimationComplete, headerProps, hoverProps, inactivePanelProps, initialRadius, isComposable, panelContext, panelRef, panelStyle, resolvedSlideFrom, sideHandle } = useSheetPanelModel(props);
 	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 +1123,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,30 +1151,54 @@ const SheetPanel = memo(function SheetPanel({ item, index, depth, isTop, isNeste
 			children: panelContent
 		})
 	});
-});
+};
 //#endregion
 //#region src/renderer.tsx
-/**
-* Root renderer component — manages the backdrop, scroll lock, snap points,
-* close reasons, focus restoration, keyboard/CloseWatcher dismissal, and
-* delegates per-panel rendering to `SheetPanel`.
-*
-* Mounted inside a Portal by `StacksheetProvider`.
-*/
-function SheetRenderer({ store, config, sheets, componentMap, classNames: classNamesProp, layout, renderHeader }) {
+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))" }
+});
+const isContentComponent = (content) => typeof content === "function";
+const getStaticContent = (sheets, type) => {
+	if (sheets === void 0) return;
+	const content = Object.entries(sheets).find(([sheetType]) => sheetType === type)?.[1];
+	return isContentComponent(content) ? content : void 0;
+};
+const useRendererStore = (store) => {
 	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 { rawClose, rawPop } = useStore(store, useShallow((s) => ({
+		rawClose: s.close,
+		rawPop: s.pop
+	})));
+	return {
+		isOpen,
+		rawClose,
+		rawPop,
+		stack
+	};
+};
+const useSnapState = (config, isOpen, side, stack) => {
 	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,32 +1206,50 @@ 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
-	]);
+	};
+	return {
+		activeSnapIndex,
+		handleSnap,
+		snapHeights
+	};
+};
+const useCloseControls = (rawClose, rawPop) => {
 	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]);
-	useBodyScale(config, isOpen, prefersReducedMotion);
+	};
+	return {
+		close: () => {
+			closeWith("programmatic");
+		},
+		closeReasonRef,
+		closeWith,
+		pop: () => {
+			popWith("programmatic");
+		},
+		popWith
+	};
+};
+const useFocusRestore = (isOpen) => {
 	const triggerRef = useRef(null);
 	const wasOpenRef = useRef(false);
 	useEffect(() => {
@@ -1130,78 +1261,112 @@ function SheetRenderer({ store, config, sheets, componentMap, classNames: classN
 		}
 		wasOpenRef.current = isOpen;
 	}, [isOpen]);
-	const stackLengthRef = useRef(stack.length);
+};
+const dismissFromEscape = ({ closeReasonRef, rawClose, rawPop, stackLengthRef }) => {
+	closeReasonRef.current = "escape";
+	if (stackLengthRef.current > 1) rawPop();
+	else rawClose();
+};
+const useDismissalEffects = ({ closeReasonRef, config, isOpen, rawClose, rawPop, stackLength }) => {
+	const stackLengthRef = useRef(stackLength);
 	useEffect(() => {
-		stackLengthRef.current = stack.length;
-	}, [stack.length]);
+		stackLengthRef.current = stackLength;
+	}, [stackLength]);
 	useEffect(() => {
-		if (!(isOpen && config.closeOnEscape && config.dismissible)) return;
-		function handleKeyDown(e) {
+		const shouldListen = isOpen && config.closeOnEscape && config.dismissible;
+		const handleKeyDown = (e) => {
 			if (e.key === "Escape") {
 				e.preventDefault();
-				if (stackLengthRef.current > 1) popWith("escape");
-				else closeWith("escape");
+				dismissFromEscape({
+					closeReasonRef,
+					rawClose,
+					rawPop,
+					stackLengthRef
+				});
 			}
-		}
-		document.addEventListener("keydown", handleKeyDown);
-		return () => document.removeEventListener("keydown", handleKeyDown);
+		};
+		if (shouldListen) document.addEventListener("keydown", handleKeyDown);
+		return () => {
+			if (shouldListen) document.removeEventListener("keydown", handleKeyDown);
+		};
 	}, [
 		isOpen,
 		config.closeOnEscape,
 		config.dismissible,
-		popWith,
-		closeWith
+		rawPop,
+		rawClose,
+		closeReasonRef
 	]);
 	useEffect(() => {
-		if (!(isOpen && config.dismissible) || typeof globalThis.CloseWatcher === "undefined") return;
-		const watcher = new globalThis.CloseWatcher();
-		watcher.onclose = () => {
-			if (stackLengthRef.current > 1) popWith("escape");
-			else closeWith("escape");
+		const CloseWatcherConstructor = globalThis.CloseWatcher;
+		const shouldListen = isOpen && config.dismissible && CloseWatcherConstructor !== void 0;
+		let watcher;
+		const handleClose = () => {
+			dismissFromEscape({
+				closeReasonRef,
+				rawClose,
+				rawPop,
+				stackLengthRef
+			});
+		};
+		if (shouldListen) {
+			watcher = new CloseWatcherConstructor();
+			watcher.addEventListener("close", handleClose);
+		}
+		return () => {
+			if (watcher !== void 0) {
+				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,
+		closeReasonRef
 	]);
+};
+/**
+* Root renderer component — manages the backdrop, scroll lock, snap points,
+* close reasons, focus restoration, keyboard/CloseWatcher dismissal, and
+* delegates per-panel rendering to `SheetPanel`.
+*
+* Mounted inside a Portal by `StacksheetProvider`.
+*/
+const SheetRenderer = ({ store, config, sheets, componentMap, classNames: classNamesProp, layout, renderHeader }) => {
+	const { isOpen, rawClose, rawPop, stack } = useRendererStore(store);
+	const side = useResolvedSide(config);
+	const prefersReducedMotion = useReducedMotion() ?? false;
+	const classNames = resolveClassNames(classNamesProp);
+	const { activeSnapIndex, handleSnap, snapHeights } = useSnapState(config, isOpen, side, stack);
+	const { close, closeReasonRef, closeWith, pop, popWith } = useCloseControls(rawClose, rawPop);
+	useBodyScale(config, isOpen, prefersReducedMotion);
+	useFocusRestore(isOpen);
+	useDismissalEffects({
+		closeReasonRef,
+		config,
+		isOpen,
+		rawClose,
+		rawPop,
+		stackLength: stack.length
+	});
+	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,
@@ -1212,7 +1377,9 @@ function SheetRenderer({ store, config, sheets, componentMap, classNames: classN
 				className: `fixed inset-0 ${classNames.backdrop || ""}`,
 				exit: { opacity: 0 },
 				initial: { opacity: 0 },
-				onClick: config.closeOnBackdrop && config.dismissible ? () => closeWith("backdrop") : void 0,
+				onClick: config.closeOnBackdrop && config.dismissible ? () => {
+					closeWith("backdrop");
+				} : void 0,
 				style: backdropStyle,
 				transition: spring
 			}, "stacksheet-backdrop")
@@ -1231,7 +1398,7 @@ function SheetRenderer({ store, config, sheets, componentMap, classNames: classN
 						const shouldRender = depth <= config.stacking.renderThreshold;
 						return /* @__PURE__ */ jsx(SheetPanel, {
 							activeSnapIndex,
-							Content: componentMap.get(item.type) ?? sheets[item.type],
+							Content: componentMap.get(item.type) ?? getStaticContent(sheets, item.type),
 							classNames,
 							close,
 							config,
@@ -1260,67 +1427,229 @@ function SheetRenderer({ store, config, sheets, componentMap, classNames: classN
 			})
 		})]
 	});
-}
+};
 //#endregion
-//#region src/Store/StoreArgs.ts
-function resolvePresentationOptions(value) {
-	if (!(value && typeof value === "object")) return;
-	const candidate = value;
-	if (candidate.ariaLabel !== void 0 && typeof candidate.ariaLabel !== "string") return;
-	return candidate;
-}
+//#region src/Store/store-args.ts
+const isRecord = (value) => typeof value === "object" && value !== null;
+const toRecord = (value) => isRecord(value) ? value : {};
+const isComponent = (value) => typeof value === "function";
+const getComponentName = (component) => {
+	const name = component.displayName ?? component.name;
+	return name === "" ? void 0 : name;
+};
+const getNodeEnv = () => globalThis.process?.env?.NODE_ENV;
+const getStringArg = (value, name) => {
+	if (typeof value !== "string") throw new TypeError(`Expected ${name} to be a string.`);
+	return value;
+};
+const resolvePresentationOptions = (value) => {
+	if (!isRecord(value)) return;
+	const { ariaLabel } = value;
+	if (ariaLabel !== void 0 && typeof ariaLabel !== "string") return;
+	return ariaLabel === void 0 ? {} : { ariaLabel };
+};
 /**
 * 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 name = component.displayName || component.name;
-	if (!name) return;
+const warnInlineComponent = (component, componentRegistry, warnedNames) => {
+	if (getNodeEnv() === "production") return;
+	const name = getComponentName(component);
+	if (name === void 0) return;
 	if (warnedNames.has(name)) return;
-	for (const [existing, key] of componentRegistry) if ((existing.displayName || existing.name) === name) {
+	for (const [existing, key] of componentRegistry) if (getComponentName(existing) === name) {
 		warnedNames.add(name);
 		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;
 	}
-}
+};
+const registerComponent = (component, componentRegistry, componentMap, getNextKey, warnedNames) => {
+	const existingKey = componentRegistry.get(component);
+	if (existingKey !== void 0) return existingKey;
+	warnInlineComponent(component, componentRegistry, warnedNames);
+	const nextKey = getNextKey();
+	componentRegistry.set(component, nextKey);
+	componentMap.set(nextKey, component);
+	return nextKey;
+};
 /**
 * 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) {
-	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);
-		}
+const resolveArgs = (componentRegistry, componentMap, getNextKey, warnedNames, first, second, third, fourth) => {
+	if (isComponent(first)) {
+		const typeKey = registerComponent(first, componentRegistry, componentMap, getNextKey, warnedNames);
 		if (typeof second === "string") return {
 			ariaLabel: resolvePresentationOptions(fourth)?.ariaLabel,
-			type: typeKey,
+			data: toRecord(third),
 			id: second,
-			data: third ?? {}
+			type: typeKey
 		};
 		return {
 			ariaLabel: resolvePresentationOptions(third)?.ariaLabel,
-			type: typeKey,
+			data: toRecord(second),
 			id: crypto.randomUUID(),
-			data: second ?? {}
+			type: typeKey
 		};
 	}
 	return {
 		ariaLabel: resolvePresentationOptions(fourth)?.ariaLabel,
-		type: first,
-		id: second,
-		data: third ?? {}
+		data: toRecord(third),
+		id: getStringArg(second, "sheet id"),
+		type: getStringArg(first, "sheet type")
 	};
-}
+};
 //#endregion
-//#region src/Store/createSheetStore.ts
+//#region src/Store/create-sheet-store.ts
+const createItem = ({ type, id, data, ariaLabel }) => ({
+	ariaLabel,
+	data,
+	id,
+	type
+});
+const createResolvedWriters = (set, config) => ({
+	openResolved: (resolved) => {
+		set({
+			isOpen: true,
+			stack: [createItem(resolved)]
+		});
+	},
+	pushResolved: (resolved) => {
+		set((state) => {
+			const item = createItem(resolved);
+			if (Number.isFinite(config.maxDepth) && state.stack.length >= config.maxDepth) return {
+				isOpen: true,
+				stack: [...state.stack.slice(0, -1), item]
+			};
+			return {
+				isOpen: true,
+				stack: [...state.stack, item]
+			};
+		});
+	},
+	replaceResolved: (resolved) => {
+		set((state) => {
+			const item = createItem(resolved);
+			if (state.stack.length === 0) return {
+				isOpen: true,
+				stack: [item]
+			};
+			return {
+				isOpen: true,
+				stack: [...state.stack.slice(0, -1), item]
+			};
+		});
+	}
+});
+const createNavigate = (componentMap, get, resolve, writers) => (first, second, third, fourth) => {
+	const resolved = resolve(first, second, third, fourth);
+	const { stack } = get();
+	const top = stack.at(-1);
+	if (stack.length === 0) {
+		writers.openResolved(resolved);
+		return;
+	}
+	let isSameType = top?.type === resolved.type;
+	if (!isSameType && isComponent(first)) isSameType = componentMap.get(top?.type ?? "") === first;
+	if (isSameType) {
+		writers.replaceResolved(resolved);
+		return;
+	}
+	writers.pushResolved(resolved);
+};
+const createPop = (set, pruneRegistry) => () => {
+	set((state) => {
+		if (state.stack.length <= 1) {
+			pruneRegistry([]);
+			return {
+				isOpen: false,
+				stack: []
+			};
+		}
+		const next = state.stack.slice(0, -1);
+		pruneRegistry(next);
+		return {
+			isOpen: true,
+			stack: next
+		};
+	});
+};
+const createRemove = (set, pruneRegistry) => (id) => {
+	set((state) => {
+		const next = state.stack.filter((item) => item.id !== id);
+		if (next.length === state.stack.length) return state;
+		pruneRegistry(next);
+		return next.length === 0 ? {
+			isOpen: false,
+			stack: []
+		} : { stack: next };
+	});
+};
+const createSetData = (set, resolve) => (first, second, third) => {
+	const { id, data } = resolve(first, second, third);
+	set((state) => {
+		const index = state.stack.findIndex((item) => item.id === id);
+		const existing = state.stack[index];
+		if (existing === void 0) return state;
+		const updated = [...state.stack];
+		updated[index] = {
+			...existing,
+			data
+		};
+		return { stack: updated };
+	});
+};
+const createSwap = (set, internals) => (first, second, third) => {
+	const type = isComponent(first) ? registerComponent(first, internals.componentRegistry, internals.componentMap, internals.getNextKey, internals.warnedNames) : getStringArg(first, "sheet type");
+	const data = toRecord(second);
+	const ariaLabel = resolvePresentationOptions(third)?.ariaLabel;
+	set((state) => {
+		const top = state.stack.at(-1);
+		if (top === void 0) return state;
+		const newStack = [...state.stack];
+		newStack[newStack.length - 1] = {
+			ariaLabel: ariaLabel ?? top.ariaLabel,
+			data,
+			id: top.id,
+			type
+		};
+		return { stack: newStack };
+	});
+};
+const createStoreState = ({ componentMap, componentRegistry, config, getNextKey, pruneRegistry, resolve, warnedNames }) => (set, get) => {
+	const writers = createResolvedWriters(set, config);
+	return {
+		close: () => {
+			pruneRegistry([]);
+			set({
+				isOpen: false,
+				stack: []
+			});
+		},
+		isOpen: false,
+		navigate: createNavigate(componentMap, get, resolve, writers),
+		open: (first, second, third, fourth) => {
+			writers.openResolved(resolve(first, second, third, fourth));
+		},
+		pop: createPop(set, pruneRegistry),
+		push: (first, second, third, fourth) => {
+			writers.pushResolved(resolve(first, second, third, fourth));
+		},
+		remove: createRemove(set, pruneRegistry),
+		replace: (first, second, third, fourth) => {
+			writers.replaceResolved(resolve(first, second, third, fourth));
+		},
+		setData: createSetData(set, resolve),
+		stack: [],
+		swap: createSwap(set, {
+			componentMap,
+			componentRegistry,
+			getNextKey,
+			warnedNames
+		})
+	};
+};
 /**
 * Create an isolated Zustand store for a sheet stack instance.
 *
@@ -1332,189 +1661,39 @@ 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 {
-		store: createStore()((set, get) => {
-			function _openResolved({ type, id, data, ariaLabel }) {
-				set({
-					stack: [{
-						id,
-						type,
-						data,
-						ariaLabel
-					}],
-					isOpen: true
-				});
-			}
-			function _pushResolved({ type, id, data, ariaLabel }) {
-				set((state) => {
-					const item = {
-						id,
-						type,
-						data,
-						ariaLabel
-					};
-					if (Number.isFinite(config.maxDepth) && state.stack.length >= config.maxDepth) return {
-						stack: [...state.stack.slice(0, -1), item],
-						isOpen: true
-					};
-					return {
-						stack: [...state.stack, item],
-						isOpen: true
-					};
-				});
-			}
-			function _replaceResolved({ type, id, data, ariaLabel }) {
-				set((state) => {
-					const item = {
-						id,
-						type,
-						data,
-						ariaLabel
-					};
-					if (state.stack.length === 0) return {
-						stack: [item],
-						isOpen: true
-					};
-					return {
-						stack: [...state.stack.slice(0, -1), item],
-						isOpen: true
-					};
-				});
-			}
-			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 };
-					});
-				},
-				navigate(first, second, third, fourth) {
-					const resolved = resolve(first, second, third, fourth);
-					const { stack } = get();
-					const top = stack.at(-1);
-					if (stack.length === 0) {
-						_openResolved(resolved);
-						return;
-					}
-					let isSameType = top?.type === resolved.type;
-					if (!isSameType && typeof first === "function") isSameType = componentMap.get(top?.type ?? "") === first;
-					if (isSameType) {
-						_replaceResolved(resolved);
-						return;
-					}
-					_pushResolved(resolved);
-				},
-				setData(first, second, third) {
-					const { id, data } = resolve(first, second, third);
-					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
-						};
-						return { stack: updated };
-					});
-				},
-				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
-						};
-						return { stack: next };
-					});
-				},
-				pop() {
-					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
-						};
-					});
-				},
-				close() {
-					pruneRegistry([]);
-					set({
-						stack: [],
-						isOpen: false
-					});
-				}
-			};
-		}),
+		componentMap,
 		componentRegistry,
-		componentMap
+		store: createStore()(createStoreState({
+			componentMap,
+			componentRegistry,
+			config,
+			getNextKey,
+			pruneRegistry,
+			resolve,
+			warnedNames
+		}))
 	};
-}
+};
 //#endregion
 //#region src/create.tsx
 /**
@@ -1547,86 +1726,82 @@ 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, 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", {
-		"aria-label": children ? void 0 : "Back",
-		className: joinClassNames(asChild ? void 0 : "flex min-h-11 min-w-11 shrink-0 cursor-pointer items-center justify-center rounded-md border-none bg-transparent p-0 text-inherit opacity-60 transition-opacity duration-150 hover:opacity-100", className),
+	const isAsChild = asChild === true;
+	return /* @__PURE__ */ jsx(isAsChild ? Slot : "button", {
+		"aria-label": children === void 0 || children === null ? "Back" : void 0,
+		className: joinClassNames(isAsChild ? void 0 : "flex min-h-11 min-w-11 shrink-0 cursor-pointer items-center justify-center rounded-md border-none bg-transparent p-0 text-inherit opacity-60 transition-opacity duration-150 hover:opacity-100", className),
 		onClick: back,
 		style,
-		type: asChild ? void 0 : "button",
+		type: isAsChild ? void 0 : "button",
 		children: children ?? /* @__PURE__ */ jsx(ArrowLeftIcon, {})
 	});
-}
+};
 //#endregion
-//#region src/SheetParts/SheetBody.tsx
-function SheetBody({ asChild, className, style, children }) {
-	if (asChild) return /* @__PURE__ */ jsx(Slot, {
+//#region src/SheetParts/sheet-body.tsx
+const SheetBody = ({ asChild, className, style, children }) => {
+	if (asChild === true) return /* @__PURE__ */ jsx(Slot, {
 		className: joinClassNames("relative min-h-0 flex-1", className),
 		"data-stacksheet-no-drag": "",
 		style,
@@ -1645,88 +1820,86 @@ 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",
-		className: joinClassNames(asChild ? void 0 : "flex min-h-11 min-w-11 shrink-0 cursor-pointer items-center justify-center rounded-md border-none bg-transparent p-0 text-inherit opacity-60 transition-opacity duration-150 hover:opacity-100", className),
+	const isAsChild = asChild === true;
+	return /* @__PURE__ */ jsx(isAsChild ? Slot : "button", {
+		"aria-label": children === void 0 || children === null ? "Close" : void 0,
+		className: joinClassNames(isAsChild ? void 0 : "flex min-h-11 min-w-11 shrink-0 cursor-pointer items-center justify-center rounded-md border-none bg-transparent p-0 text-inherit opacity-60 transition-opacity duration-150 hover:opacity-100", className),
 		onClick: close,
 		style,
-		type: asChild ? void 0 : "button",
+		type: isAsChild ? 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", {
+	return /* @__PURE__ */ jsx(asChild === true ? Slot : "p", {
 		className,
 		id: `${panelId}-desc`,
 		style,
 		children
 	});
-}
+};
 //#endregion
-//#region src/SheetParts/SheetFooter.tsx
-function 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),
+//#region src/SheetParts/sheet-footer.tsx
+const SheetFooter = ({ asChild, className, style, children }) => {
+	const isAsChild = asChild === true;
+	return /* @__PURE__ */ jsx(isAsChild ? Slot : "footer", {
+		className: joinClassNames(isAsChild ? "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", {
+	const isAsChild = asChild === true;
+	return /* @__PURE__ */ jsx(isAsChild ? 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(isAsChild ? 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: isAsChild ? 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 }) {
-	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),
+//#region src/SheetParts/sheet-header.tsx
+const SheetHeader = ({ asChild, className, style, children }) => {
+	const isAsChild = asChild === true;
+	return /* @__PURE__ */ jsx(isAsChild ? Slot : "header", {
+		className: joinClassNames(isAsChild ? "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),
+	const isAsChild = asChild === true;
+	return /* @__PURE__ */ jsx(isAsChild ? Slot : "h2", {
+		className: joinClassNames(isAsChild ? void 0 : "font-semibold text-sm", className),
 		id: `${panelId}-title`,
 		style,
 		children
 	});
-}
+};
 //#endregion
-//#region src/SheetParts/SheetParts.ts
+//#region src/SheetParts/sheet-parts.ts
 /**
 * Composable Sheet Parts for building custom Sheet layouts.
 *