@patternmode/stacksheet 1.3.3

package/dist/index.mjs

@@ -0,0 +1,1732 @@
+"use client";
+import { Portal } from "@radix-ui/react-portal";
+import { createContext, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { createStore, useStore } from "zustand";
+import { useShallow } from "zustand/react/shallow";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { RemoveScroll } from "react-remove-scroll";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { FocusTrap } from "focus-trap-react";
+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
+/**
+* Spring presets inspired by iOS animation feel.
+*
+* - `subtle` — Barely noticeable bounce, professional.
+* - `snappy` — Quick, responsive for interactions.
+* - `stiff` — Very quick, controlled. Panels, drawers. **(default)**
+*/
+const springs = {
+	subtle: {
+		stiffness: 300,
+		damping: 30,
+		mass: 1
+	},
+	snappy: {
+		stiffness: 400,
+		damping: 28,
+		mass: .8
+	},
+	stiff: {
+		stiffness: 400,
+		damping: 40,
+		mass: 1
+	}
+};
+//#endregion
+//#region src/config.ts
+const DEFAULT_STACKING = {
+	scaleStep: .04,
+	offsetStep: 16,
+	opacityStep: 0,
+	radius: 12,
+	renderThreshold: 3
+};
+const DEFAULT_SIDE = {
+	desktop: "right",
+	mobile: "bottom"
+};
+/** Normalize a string side to a responsive object, merging with defaults. */
+function resolveSide(side) {
+	if (typeof side === "string") return {
+		desktop: side,
+		mobile: side
+	};
+	return {
+		...DEFAULT_SIDE,
+		...side
+	};
+}
+/** Resolve a preset name to a SpringConfig, or merge partial config with defaults. */
+function 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 = {}) {
+	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),
+		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
+	};
+}
+//#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 [isMobile, setIsMobile] = useState(false);
+	useEffect(() => {
+		const mql = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
+		setIsMobile(mql.matches);
+		const handler = (e) => setIsMobile(e.matches);
+		mql.addEventListener("change", handler);
+		return () => mql.removeEventListener("change", handler);
+	}, [breakpoint]);
+	return isMobile;
+}
+/** Resolve the current side from config + viewport. */
+function useResolvedSide(config) {
+	return useIsMobile(config.breakpoint) ? config.side.mobile : config.side.desktop;
+}
+//#endregion
+//#region src/renderer-effects.ts
+function 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();
+	}, [panelRef, hasSnapPoints]);
+	return height;
+}
+function useViewportHeight(active) {
+	const getHeight = useCallback(() => typeof window === "undefined" ? 0 : window.visualViewport?.height ?? window.innerHeight, []);
+	const [height, setHeight] = useState(() => getHeight());
+	useEffect(() => {
+		if (!active || typeof window === "undefined") return;
+		const update = () => setHeight(getHeight());
+		update();
+		window.addEventListener("resize", update);
+		window.visualViewport?.addEventListener("resize", update);
+		return () => {
+			window.removeEventListener("resize", update);
+			window.visualViewport?.removeEventListener("resize", update);
+		};
+	}, [active, getHeight]);
+	return height;
+}
+function 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 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;
+		}
+		wrapper.style.transform = "";
+		wrapper.style.borderRadius = "";
+		const handleEnd = () => {
+			wrapper.style.transition = "";
+			wrapper.style.overflow = "";
+			wrapper.style.transformOrigin = "";
+		};
+		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|%)$/;
+/**
+* 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) {
+	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;
+		}
+	}
+	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) {
+	if (points.length === 0) return [];
+	const resolved = points.map((p) => resolveSnapPointPx(p, viewportHeight)).filter((px) => px > 0);
+	resolved.sort((a, b) => a - b);
+	const deduped = [];
+	for (const px of resolved) {
+		const last = deduped.at(-1);
+		if (last === void 0 || Math.abs(px - last) > 1) deduped.push(px);
+	}
+	return deduped;
+}
+/** Velocity threshold (px/ms) for skipping intermediate snap points */
+const SNAP_VELOCITY_THRESHOLD = .4;
+/** Max velocity to consider for snap offset calculation */
+const MAX_SNAP_VELOCITY = 2;
+/** Multiplier to convert velocity to pixel offset for snap target */
+const SNAP_VELOCITY_MULTIPLIER = 150;
+/**
+* Given the current drag offset (from fully open), resolved snap heights,
+* the panel height, and release velocity, find the best snap point index.
+*
+* `dragOffset` is positive in the dismiss direction (downward for bottom sheets).
+* Snap heights are "how tall the drawer should be" (ascending order).
+*
+* Returns -1 if the gesture indicates full dismissal.
+*/
+function findSnapTarget(dragOffset, panelHeight, snapHeights, velocity, currentIndex, sequential) {
+	if (snapHeights.length === 0) return -1;
+	const snapOffsets = snapHeights.map((h) => panelHeight - h);
+	const currentPos = dragOffset;
+	if (sequential) {
+		const nextIndex = currentIndex - (velocity > 0 ? 1 : -1);
+		if (nextIndex < 0) return -1;
+		if (nextIndex >= snapHeights.length) return snapHeights.length - 1;
+		return nextIndex;
+	}
+	const projectedPos = currentPos + (Math.abs(velocity) >= SNAP_VELOCITY_THRESHOLD ? Math.min(Math.max(velocity, -2), MAX_SNAP_VELOCITY) * SNAP_VELOCITY_MULTIPLIER : 0);
+	const first = snapOffsets[0] ?? 0;
+	let bestIndex = 0;
+	let bestDist = Math.abs(projectedPos - first);
+	for (let i = 1; i < snapOffsets.length; i++) {
+		const offset = snapOffsets[i] ?? 0;
+		const dist = Math.abs(projectedPos - offset);
+		if (dist < bestDist) {
+			bestDist = dist;
+			bestIndex = i;
+		}
+	}
+	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) {
+	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: ""
+};
+function resolveClassNames(cn) {
+	if (!cn) return EMPTY_CLASSNAMES;
+	return {
+		backdrop: cn.backdrop ?? "",
+		panel: cn.panel ?? "",
+		header: cn.header ?? ""
+	};
+}
+function buildAriaProps(isTop, isModal, isComposable, ariaLabel, panelId, hasDescription) {
+	if (!isTop) return {};
+	const props = { role: "dialog" };
+	if (isModal) props["aria-modal"] = "true";
+	if (isComposable) {
+		props["aria-labelledby"] = `${panelId}-title`;
+		if (hasDescription) props["aria-describedby"] = `${panelId}-desc`;
+	} else props["aria-label"] = ariaLabel;
+	return props;
+}
+function getDragTransform(side, offset) {
+	if (offset === 0) return {};
+	switch (side) {
+		case "right": return { x: offset };
+		case "left": return { x: -offset };
+		case "bottom": return { y: offset };
+		default: return {};
+	}
+}
+const VISUAL_TWEEN = {
+	type: "tween",
+	duration: .25,
+	ease: "easeOut"
+};
+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) {
+	if (isDragging) return {
+		type: "tween",
+		duration: 0
+	};
+	return {
+		...isTop ? spring : stackSpring,
+		borderRadius: VISUAL_TWEEN,
+		boxShadow: VISUAL_TWEEN
+	};
+}
+function computeSnapYOffset(side, snapHeights, activeSnapIndex, measuredHeight) {
+	if (side !== "bottom" || snapHeights.length === 0 || measuredHeight <= 0) return 0;
+	return getSnapOffset(activeSnapIndex, snapHeights, measuredHeight);
+}
+function getBottomSlideDistance(measuredHeight) {
+	if (measuredHeight > 0) return measuredHeight;
+	if (typeof window !== "undefined") return window.innerHeight;
+	return 1e3;
+}
+function resolveSlideFrom(side, slideFrom, measuredHeight) {
+	if (side !== "bottom") return slideFrom;
+	return { y: getBottomSlideDistance(measuredHeight) };
+}
+function buildAnimateTarget(slideTarget, stackOffset, dragOffset, transform, animatedRadius, transition, snapYOffset, isTop) {
+	const base = {
+		...slideTarget,
+		...stackOffset,
+		...dragOffset,
+		scale: transform.scale,
+		opacity: transform.opacity,
+		...animatedRadius,
+		boxShadow: getShadow(!isTop),
+		transition
+	};
+	if (snapYOffset > 0) return {
+		...base,
+		y: (dragOffset.y ?? 0) + snapYOffset
+	};
+	return base;
+}
+function getInitialRadius(side) {
+	if (side === "bottom") return {
+		borderTopLeftRadius: 0,
+		borderTopRightRadius: 0,
+		borderBottomLeftRadius: 0,
+		borderBottomRightRadius: 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
+/** Elements that should never initiate a drag */
+const INTERACTIVE_TAGS = new Set([
+	"INPUT",
+	"TEXTAREA",
+	"SELECT",
+	"BUTTON",
+	"A"
+]);
+/** Rubber-band resistance factor for dragging past resting position */
+const RUBBER_BAND_FACTOR = .6;
+//#endregion
+//#region src/Drag/DragGeometry.ts
+function 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) {
+	let current = el;
+	while (current) {
+		if (current instanceof HTMLElement) {
+			const style = getComputedStyle(current);
+			const overflow = axis === "y" ? style.overflowY : style.overflowX;
+			if (overflow === "auto" || overflow === "scroll") {
+				if (axis === "y" ? current.scrollHeight > current.clientHeight : current.scrollWidth > current.clientWidth) return current;
+			}
+		}
+		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) {
+	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) {
+	switch (side) {
+		case "right": return {
+			axis: "x",
+			sign: 1
+		};
+		case "left": return {
+			axis: "x",
+			sign: -1
+		};
+		case "bottom": return {
+			axis: "y",
+			sign: 1
+		};
+		default: return {
+			axis: "x",
+			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 absDx = Math.abs(dx);
+	const absDy = Math.abs(dy);
+	let angleDeg;
+	if (axis === "y") angleDeg = absDy === 0 ? 90 : Math.atan(absDx / absDy) * 180 / Math.PI;
+	else angleDeg = absDx === 0 ? 90 : Math.atan(absDy / absDx) * 180 / Math.PI;
+	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) {
+	if (classifyGesture(dx, dy, axis, sign) === "none") return "none";
+	if (scrollEl && !isAtScrollEdge(scrollEl, axis, sign)) return "none";
+	return "drag";
+}
+function getPanelDimension(panel, axis) {
+	if (!panel) return 300;
+	return axis === "x" ? panel.offsetWidth : panel.offsetHeight;
+}
+//#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]");
+		if (!isHandle && isInteractiveElement(target)) return;
+		scrollTargetRef.current = isHandle ? null : findScrollableAncestor(target, axis);
+		startRef.current = {
+			x: e.clientX,
+			y: e.clientY,
+			time: Date.now()
+		};
+		committedRef.current = null;
+		offsetRef.current = 0;
+		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;
+				return;
+			}
+		}
+		if (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;
+		onDragUpdate({
+			offset: clampedOffset,
+			isDragging: true
+		});
+		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;
+			return;
+		}
+		const offset = Math.max(0, offsetRef.current);
+		const elapsed = Date.now() - startRef.current.time;
+		const velocity = elapsed > 0 ? offset / elapsed : 0;
+		startRef.current = null;
+		committedRef.current = null;
+		offsetRef.current = 0;
+		scrollTargetRef.current = null;
+		const panelSize = getPanelDimension(panelRef.current, axis);
+		if (config.snapHeights.length > 0) {
+			const targetIndex = findSnapTarget(offset, panelSize, config.snapHeights, velocity, config.activeSnapIndex, config.sequential);
+			if (targetIndex === -1) dismiss();
+			else {
+				config.onSnap(targetIndex);
+				onDragUpdate({
+					offset: 0,
+					isDragging: false
+				});
+			}
+			return;
+		}
+		const pastThreshold = offset / panelSize > config.closeThreshold;
+		const fastEnough = velocity > config.velocityThreshold;
+		if (pastThreshold || fastEnough) dismiss();
+		else onDragUpdate({
+			offset: 0,
+			isDragging: false
+		});
+	}, [
+		panelRef,
+		axis,
+		config,
+		onDragUpdate,
+		dismiss
+	]);
+	const handlePointerCancel = useCallback(() => {
+		startRef.current = null;
+		committedRef.current = null;
+		offsetRef.current = 0;
+		scrollTargetRef.current = null;
+		onDragUpdate({
+			offset: 0,
+			isDragging: false
+		});
+	}, [onDragUpdate]);
+	useEffect(() => {
+		const el = panelRef.current;
+		if (!(el && config.enabled)) return;
+		el.addEventListener("pointerdown", handlePointerDown);
+		el.addEventListener("pointermove", handlePointerMove);
+		el.addEventListener("pointerup", handlePointerUp);
+		el.addEventListener("pointercancel", handlePointerCancel);
+		return () => {
+			el.removeEventListener("pointerdown", handlePointerDown);
+			el.removeEventListener("pointermove", handlePointerMove);
+			el.removeEventListener("pointerup", handlePointerUp);
+			el.removeEventListener("pointercancel", handlePointerCancel);
+		};
+	}, [
+		panelRef,
+		config.enabled,
+		handlePointerDown,
+		handlePointerMove,
+		handlePointerUp,
+		handlePointerCancel
+	]);
+}
+//#endregion
+//#region src/panel-context.tsx
+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);
+	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
+/**
+* Compute visual transforms for a panel at a given depth.
+* depth=0 is the top (foreground) panel.
+* Panels beyond renderThreshold are clamped to the edge position and faded out.
+*/
+function getStackTransform(depth, stacking) {
+	if (depth <= 0) return {
+		scale: 1,
+		offset: 0,
+		opacity: 1,
+		borderRadius: 0
+	};
+	const beyondThreshold = depth >= stacking.renderThreshold;
+	const visualDepth = beyondThreshold ? stacking.renderThreshold - 1 : depth;
+	return {
+		scale: Math.max(.5, 1 - visualDepth * stacking.scaleStep),
+		offset: visualDepth * stacking.offsetStep,
+		opacity: beyondThreshold ? 0 : Math.max(0, 1 - visualDepth * stacking.opacityStep),
+		borderRadius: stacking.radius
+	};
+}
+/**
+* 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) {
+	if (side === "bottom") {
+		const radius = depth > 0 ? stacking.radius : 16;
+		return {
+			borderTopLeftRadius: radius,
+			borderTopRightRadius: radius,
+			borderBottomLeftRadius: 0,
+			borderBottomRightRadius: 0
+		};
+	}
+	if (depth > 0) return { borderRadius: stacking.radius };
+	return { borderRadius: 0 };
+}
+/** Motion initial/exit values for sliding from the given side. */
+function 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
+	};
+}
+/** Translate offset that pushes stacked panels away from the stack edge. */
+function getStackOffset(side, offset) {
+	if (offset === 0) return {};
+	switch (side) {
+		case "right": return { x: -offset };
+		case "left": return { x: offset };
+		case "bottom": return { y: -offset };
+		default: return {};
+	}
+}
+/** Opposite-side origin so stacked panels recede away from the stack edge. */
+function 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 { width, maxWidth, zIndex } = config;
+	const base = {
+		position: "fixed",
+		zIndex: zIndex + 10 + index,
+		display: "flex",
+		flexDirection: "column",
+		willChange: "transform",
+		transformOrigin: getTransformOrigin(side)
+	};
+	if (side === "bottom") return {
+		...base,
+		left: 0,
+		right: 0,
+		bottom: 0,
+		height: "85dvh",
+		maxHeight: "85dvh"
+	};
+	const sideStyles = side === "right" ? {
+		top: 0,
+		right: 0,
+		bottom: 0
+	} : {
+		top: 0,
+		left: 0,
+		bottom: 0
+	};
+	return {
+		...base,
+		...sideStyles,
+		width,
+		maxWidth
+	};
+}
+//#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" })
+	});
+}
+//#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",
+			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, {
+		...headerProps,
+		className: headerClassName
+	}), shouldRender && Content && /* @__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";
+function resolvePanelLayout(layout, renderHeader) {
+	if (layout) return layout;
+	return renderHeader === false ? "composable" : "classic";
+}
+//#endregion
+//#region src/SheetPanel/SheetPanelFocus.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 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())),
+			fallbackFocus: () => {
+				if (fallbackRef.current) return fallbackRef.current;
+				return document.body;
+			}
+		},
+		paused,
+		children
+	});
+}
+function useLayeredModalFocused(active) {
+	const [layered, setLayered] = useState(false);
+	useEffect(() => {
+		if (!active) {
+			setLayered(false);
+			return;
+		}
+		const evaluate = () => {
+			const target = document.activeElement;
+			if (!target || target === document.body) {
+				setLayered(false);
+				return;
+			}
+			setLayered(target instanceof Element && target.closest(LAYERED_MODAL_SELECTORS) !== null);
+		};
+		evaluate();
+		const handler = () => evaluate();
+		document.addEventListener("focusin", handler, true);
+		return () => document.removeEventListener("focusin", handler, true);
+	}, [active]);
+	return layered;
+}
+//#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 }) {
+	const position = side === "right" ? { right: "100%" } : { left: "100%" };
+	return /* @__PURE__ */ jsx(motion.div, {
+		animate: { opacity: isHovered ? 1 : 0 },
+		"aria-label": "Dismiss",
+		className: "absolute top-0 bottom-0 flex w-6 cursor-grab touch-none items-center justify-center",
+		"data-stacksheet-handle": "",
+		onClick: onDismiss,
+		onKeyDown: (e) => {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				onDismiss?.();
+			}
+		},
+		role: "button",
+		style: position,
+		tabIndex: 0,
+		transition: {
+			duration: isHovered ? .15 : .4,
+			ease: "easeOut"
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			className: "h-8 w-1 rounded-full bg-current/20"
+		})
+	});
+}
+//#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);
+	const hasEnteredRef = useRef(false);
+	const [dragState, setDragState] = useState({
+		offset: 0,
+		isDragging: false
+	});
+	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,
+		closeThreshold: config.closeThreshold,
+		velocityThreshold: config.velocityThreshold,
+		side,
+		onClose: swipeClose,
+		onPop: swipePop,
+		isNested,
+		snapHeights,
+		activeSnapIndex,
+		onSnap,
+		sequential: config.snapToSequentialPoints
+	}, setDragState);
+	const ariaLabel = item.ariaLabel ?? (typeof item.data?.__ariaLabel === "string" ? item.data.__ariaLabel : void 0) ?? config.ariaLabel;
+	const panelId = `stacksheet-${item.id}`;
+	const [hasDescription, setHasDescription] = useState(false);
+	const registerDescription = useCallback(() => {
+		setHasDescription(true);
+		return () => setHasDescription(false);
+	}, []);
+	const panelContext = useMemo(() => ({
+		close,
+		back: pop,
+		isNested,
+		isTop,
+		panelId,
+		side,
+		hasDescription,
+		registerDescription
+	}), [
+		close,
+		pop,
+		isNested,
+		isTop,
+		panelId,
+		side,
+		hasDescription,
+		registerDescription
+	]);
+	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
+	}), [
+		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);
+	const snapYOffset = computeSnapYOffset(side, snapHeights, activeSnapIndex, measuredHeight);
+	const resolvedSlideFrom = resolveSlideFrom(side, slideFrom, measuredHeight);
+	const animateTarget = buildAnimateTarget(slideTarget, getStackOffset(side, transform.offset), dragOffset, transform, animatedRadius, transition, snapYOffset, isTop);
+	const initialRadius = getInitialRadius(side);
+	const showSideHandle = isTop && side !== "bottom";
+	const showBottomHandle = isTop && side === "bottom";
+	const panelContent = /* @__PURE__ */ jsxs(motion.div, {
+		animate: animateTarget,
+		className: classNames.panel || void 0,
+		exit: {
+			...resolvedSlideFrom,
+			opacity: .6,
+			boxShadow: getShadow(false),
+			transition: {
+				type: "tween",
+				duration: prefersReducedMotion ? 0 : .24,
+				ease: "easeOut",
+				boxShadow: VISUAL_TWEEN
+			}
+		},
+		initial: {
+			...resolvedSlideFrom,
+			opacity: .8,
+			...initialRadius,
+			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
+		},
+		...ariaProps,
+		children: [showSideHandle && /* @__PURE__ */ jsx(SideHandle, {
+			isHovered,
+			onDismiss: isNested ? pop : close,
+			side
+		}), /* @__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, {
+				Content,
+				data: item.data,
+				headerClassName: classNames.header || void 0,
+				headerProps,
+				isComposable,
+				renderHeader,
+				shouldRender
+			})]
+		})]
+	}, item.id);
+	return /* @__PURE__ */ jsx(SheetPanelContext.Provider, {
+		value: panelContext,
+		children: /* @__PURE__ */ jsx(ModalFocusTrap, {
+			active: isTop,
+			enabled: config.modal,
+			fallbackRef: panelRef,
+			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 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 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 [internalSnapIndex, setInternalSnapIndex] = useState(snapHeights.length > 0 ? snapHeights.length - 1 : 0);
+	const activeSnapIndex = config.snapPointIndex ?? internalSnapIndex;
+	const handleSnap = useCallback((index) => {
+		setInternalSnapIndex(index);
+		config.onSnapPointChange?.(index);
+	}, [config.onSnapPointChange, config]);
+	useEffect(() => {
+		if (isOpen && snapHeights.length > 0) setInternalSnapIndex(config.snapPointIndex ?? snapHeights.length - 1);
+	}, [
+		isOpen,
+		snapHeights.length,
+		config.snapPointIndex
+	]);
+	const closeReasonRef = useRef("programmatic");
+	const closeWith = useCallback((reason) => {
+		closeReasonRef.current = reason;
+		rawClose();
+	}, [rawClose]);
+	const popWith = useCallback((reason) => {
+		closeReasonRef.current = reason;
+		rawPop();
+	}, [rawPop]);
+	const close = useCallback(() => closeWith("programmatic"), [closeWith]);
+	const pop = useCallback(() => popWith("programmatic"), [popWith]);
+	useBodyScale(config, isOpen, prefersReducedMotion);
+	const triggerRef = useRef(null);
+	const wasOpenRef = useRef(false);
+	useEffect(() => {
+		if (isOpen && !wasOpenRef.current) triggerRef.current = document.activeElement;
+		else if (!isOpen && wasOpenRef.current) {
+			const el = triggerRef.current;
+			if (el && el instanceof HTMLElement && el !== document.body && el.tagName !== "BODY") el.focus();
+			triggerRef.current = null;
+		}
+		wasOpenRef.current = isOpen;
+	}, [isOpen]);
+	const stackLengthRef = useRef(stack.length);
+	useEffect(() => {
+		stackLengthRef.current = stack.length;
+	}, [stack.length]);
+	useEffect(() => {
+		if (!(isOpen && config.closeOnEscape && config.dismissible)) return;
+		function handleKeyDown(e) {
+			if (e.key === "Escape") {
+				e.preventDefault();
+				if (stackLengthRef.current > 1) popWith("escape");
+				else closeWith("escape");
+			}
+		}
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [
+		isOpen,
+		config.closeOnEscape,
+		config.dismissible,
+		popWith,
+		closeWith
+	]);
+	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");
+		};
+		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
+	]);
+	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(() => {
+		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 shouldLockScroll = isOpen && isModal && config.lockScroll;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [showOverlay && /* @__PURE__ */ jsx(AnimatePresence, {
+		onExitComplete: handleBackdropExitComplete,
+		children: isOpen && /* @__PURE__ */ jsx(motion.div, {
+			animate: { opacity: 1 },
+			className: `fixed inset-0 ${classNames.backdrop || ""}`,
+			exit: { opacity: 0 },
+			initial: { opacity: 0 },
+			onClick: config.closeOnBackdrop && config.dismissible ? () => closeWith("backdrop") : void 0,
+			style: backdropStyle,
+			transition: spring
+		}, "stacksheet-backdrop")
+	}), /* @__PURE__ */ jsx(RemoveScroll, {
+		enabled: shouldLockScroll,
+		forwardProps: true,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "pointer-events-none fixed inset-0 overflow-hidden",
+			style: { zIndex: config.zIndex + 1 },
+			children: /* @__PURE__ */ jsx(AnimatePresence, {
+				onExitComplete: handleExitComplete,
+				children: stack.map((item, index) => {
+					const depth = stack.length - 1 - index;
+					const isTop = depth === 0;
+					const isNested = index > 0;
+					const shouldRender = depth <= config.stacking.renderThreshold;
+					return /* @__PURE__ */ jsx(SheetPanel, {
+						activeSnapIndex,
+						Content: componentMap.get(item.type) ?? sheets[item.type],
+						classNames,
+						close,
+						config,
+						depth,
+						index,
+						isNested,
+						isTop,
+						item,
+						layout,
+						onSnap: handleSnap,
+						pop,
+						prefersReducedMotion,
+						renderHeader,
+						shouldRender,
+						side,
+						slideFrom,
+						slideTarget,
+						snapHeights,
+						spring,
+						stackSpring,
+						swipeClose,
+						swipePop
+					}, item.id);
+				})
+			})
+		})
+	})] });
+}
+//#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;
+}
+/**
+* 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;
+	if (warnedNames.has(name)) return;
+	for (const [existing, key] of componentRegistry) if ((existing.displayName || existing.name) === 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;
+	}
+}
+/**
+* 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);
+		}
+		if (typeof second === "string") return {
+			ariaLabel: resolvePresentationOptions(fourth)?.ariaLabel,
+			type: typeKey,
+			id: second,
+			data: third ?? {}
+		};
+		return {
+			ariaLabel: resolvePresentationOptions(third)?.ariaLabel,
+			type: typeKey,
+			id: crypto.randomUUID(),
+			data: second ?? {}
+		};
+	}
+	return {
+		ariaLabel: resolvePresentationOptions(fourth)?.ariaLabel,
+		type: first,
+		id: second,
+		data: third ?? {}
+	};
+}
+//#endregion
+//#region src/Store/createSheetStore.ts
+/**
+* Create an isolated Zustand store for a sheet stack instance.
+*
+* Returns a store bundle containing the Zustand store plus two maps
+* that track ad-hoc (component-direct) registrations:
+* - `componentRegistry` — maps `ComponentType` → generated type key (dedup)
+* - `componentMap` — maps generated type key → `ComponentType` (renderer lookup)
+*
+* The ad-hoc counter is scoped per instance to prevent identity leaks across
+* multiple `createStacksheet()` calls or test runs.
+*/
+function createSheetStore(config) {
+	const componentRegistry = /* @__PURE__ */ new Map();
+	const componentMap = /* @__PURE__ */ new Map();
+	let adhocCounter = 0;
+	function getNextKey() {
+		return `__adhoc_${adhocCounter++}`;
+	}
+	const warnedNames = /* @__PURE__ */ new Set();
+	function resolve(first, second, third, fourth) {
+		return resolveArgs(componentRegistry, componentMap, getNextKey, warnedNames, first, second, third, fourth);
+	}
+	/** Remove registry entries for type keys no longer in the stack */
+	function pruneRegistry(remainingStack) {
+		const usedTypes = new Set(remainingStack.map((item) => item.type));
+		for (const [component, typeKey] of componentRegistry) if (!usedTypes.has(typeKey)) {
+			componentRegistry.delete(component);
+			componentMap.delete(typeKey);
+		}
+	}
+	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
+					});
+				}
+			};
+		}),
+		componentRegistry,
+		componentMap
+	};
+}
+//#endregion
+//#region src/create.tsx
+/**
+* Create an isolated sheet stack instance with typed store, hooks, and provider.
+*
+* Works with both `interface` and `type` definitions:
+*
+* ```ts
+* // Using an interface
+* interface SheetDataMap {
+*   "bucket-create": { onCreated?: (b: Bucket) => void };
+*   "bucket-edit": { bucket: Bucket };
+* }
+*
+* // Using a type alias
+* type SheetDataMap = {
+*   "bucket-create": { onCreated?: (b: Bucket) => void };
+*   "bucket-edit": { bucket: Bucket };
+* };
+*
+* const { StacksheetProvider, useSheet, useStacksheetState } =
+*   createStacksheet<SheetDataMap>();
+* ```
+*
+* Sheet content components receive their data as **spread props**:
+* ```ts
+* // Data map defines: "bucket-edit": { bucket: Bucket }
+* // Component receives:  ({ bucket }: { bucket: Bucket }) => JSX.Element
+* ```
+*
+* Use `useSheetPanel()` inside content components to access `close()` and `back()`.
+*/
+function createStacksheet(config) {
+	const resolved = resolveConfig(config);
+	const { store, componentMap } = createSheetStore(resolved);
+	const StoreContext = createContext(null);
+	function useStoreContext() {
+		const ctx = useContext(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 { 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 { store: s } = useStoreContext();
+		return useStore(s, useShallow((state) => ({
+			stack: state.stack,
+			isOpen: state.isOpen
+		})));
+	}
+	return {
+		StacksheetProvider,
+		useSheet,
+		useStacksheetState,
+		store
+	};
+}
+//#endregion
+//#region src/SheetParts/SheetBack.tsx
+function 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),
+		onClick: back,
+		style,
+		type: asChild ? 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, {
+		className: joinClassNames("relative min-h-0 flex-1", className),
+		"data-stacksheet-no-drag": "",
+		style,
+		children
+	});
+	return /* @__PURE__ */ jsxs(Root, {
+		className: joinClassNames("relative flex min-h-0 flex-1 flex-col overflow-hidden", className),
+		"data-stacksheet-no-drag": "",
+		style,
+		children: [/* @__PURE__ */ jsx(Viewport, {
+			className: "min-h-0 w-full flex-1 overscroll-contain",
+			children
+		}), /* @__PURE__ */ jsx(Scrollbar, {
+			className: "flex w-2 touch-none select-none p-0.5",
+			orientation: "vertical",
+			children: /* @__PURE__ */ jsx(Thumb, { className: "relative flex-1 rounded bg-current/15" })
+		})]
+	});
+}
+//#endregion
+//#region src/SheetParts/SheetClose.tsx
+function 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),
+		onClick: close,
+		style,
+		type: asChild ? void 0 : "button",
+		children: children ?? /* @__PURE__ */ jsx(XIcon, {})
+	});
+}
+//#endregion
+//#region src/SheetParts/SheetDescription.tsx
+function SheetDescription({ asChild, className, style, children }) {
+	const { panelId, registerDescription } = useSheetPanel();
+	useEffect(() => registerDescription(), [registerDescription]);
+	return /* @__PURE__ */ jsx(asChild ? 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),
+		style,
+		children
+	});
+}
+//#endregion
+//#region src/SheetParts/SheetHandle.tsx
+function SheetHandle({ asChild, className, style, children }) {
+	const { close, back, isNested } = useSheetPanel();
+	const dismiss = isNested ? back : close;
+	return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
+		"aria-label": "Dismiss",
+		className: joinClassNames(asChild ? void 0 : "flex shrink-0 cursor-grab touch-none items-center justify-center pt-4 pb-1", className),
+		"data-stacksheet-handle": "",
+		onClick: dismiss,
+		onKeyDown: (e) => {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				dismiss();
+			}
+		},
+		role: "button",
+		style,
+		tabIndex: 0,
+		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),
+		style,
+		children
+	});
+}
+//#endregion
+//#region src/SheetParts/SheetTitle.tsx
+function SheetTitle({ asChild, className, style, children }) {
+	const { panelId } = useSheetPanel();
+	return /* @__PURE__ */ jsx(asChild ? Slot : "h2", {
+		className: joinClassNames(asChild ? void 0 : "font-semibold text-sm", className),
+		id: `${panelId}-title`,
+		style,
+		children
+	});
+}
+//#endregion
+//#region src/SheetParts/SheetParts.ts
+/**
+* Composable Sheet Parts for building custom Sheet layouts.
+*
+* Use with `layout="composable"` on the provider to opt into composable mode:
+* no auto header or scroll wrapper, full control over the Sheet structure.
+*
+* `Sheet.Title` and `Sheet.Description` are linked to the Panel's
+* `aria-labelledby` and `aria-describedby` via matching IDs.
+*/
+const Sheet = {
+	Back: SheetBack,
+	Body: SheetBody,
+	Close: SheetClose,
+	Description: SheetDescription,
+	Footer: SheetFooter,
+	Handle: SheetHandle,
+	Header: SheetHeader,
+	Title: SheetTitle
+};
+//#endregion
+export { Sheet, createStacksheet, springs, useIsMobile, useResolvedSide, useSheetPanel };
+
+//# sourceMappingURL=index.mjs.map