@patternmode/stacksheet 1.3.6 → 1.3.8

package/dist/index.mjs

@@ -1,8 +1,9 @@
 "use client";
 import { Portal } from "@radix-ui/react-portal";
-import { createContext, use, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { createContext, use, useCallback, useEffect, useMemo, 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,29 +12,28 @@ 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 = {
-	snappy: {
-		damping: 28,
-		mass: .8,
-		stiffness: 400
-	},
+	snappy: toSpringConfig(springs$1.snappy),
 	stiff: {
 		damping: 40,
 		mass: 1,
 		stiffness: 400
 	},
-	subtle: {
-		damping: 30,
-		mass: 1,
-		stiffness: 300
-	}
+	subtle: toSpringConfig(springs$1.subtle)
 };
 //#endregion
 //#region src/config.ts
@@ -114,9 +114,13 @@ const useIsMobile = (breakpoint) => {
 	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;
 };
@@ -130,13 +134,17 @@ 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;
 };
@@ -144,40 +152,68 @@ const getViewportHeight = () => typeof window === "undefined" ? 0 : window.visua
 const useViewportHeight = (active) => {
 	const [height, setHeight] = useState(() => typeof window === "undefined" ? void 0 : getViewportHeight());
 	useEffect(() => {
-		if (typeof window === "undefined") return;
-		const update = () => setHeight(getViewportHeight());
-		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);
+			}
 		};
 	}, []);
 	return active ? height ?? 0 : 0;
 };
+const BODY_SCALE_TRANSITION = "transform 500ms cubic-bezier(0.32, 0.72, 0, 1), border-radius 500ms cubic-bezier(0.32, 0.72, 0, 1)";
+/** Fallback delay (transition duration + margin) if `transitionend` never fires. */
+const BODY_SCALE_RESET_FALLBACK_MS = 600;
+/** Cancels a pending un-scale reset when the sheet reopens mid-animation. */
+let cancelPendingBodyScaleReset;
 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 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;
+		const scalable = config.shouldScaleBackground && !prefersReducedMotion && wrapper instanceof HTMLElement && isOpen ? wrapper : null;
+		if (scalable !== null) {
+			cancelPendingBodyScaleReset?.();
+			scalable.style.transition = BODY_SCALE_TRANSITION;
+			scalable.style.transform = `scale(${config.scaleBackgroundAmount})`;
+			scalable.style.borderRadius = "8px";
+			scalable.style.overflow = "hidden";
+			scalable.style.transformOrigin = "center top";
 		}
-		wrapper.style.transform = "";
-		wrapper.style.borderRadius = "";
-		const handleEnd = () => {
-			wrapper.style.transition = "";
-			wrapper.style.overflow = "";
-			wrapper.style.transformOrigin = "";
+		return () => {
+			if (scalable === null) return;
+			scalable.style.transition = BODY_SCALE_TRANSITION;
+			scalable.style.transform = "";
+			scalable.style.borderRadius = "";
+			const controller = new AbortController();
+			const { signal } = controller;
+			const finish = () => {
+				controller.abort();
+				cancelPendingBodyScaleReset = void 0;
+				scalable.style.transition = "";
+				scalable.style.overflow = "";
+				scalable.style.transformOrigin = "";
+			};
+			scalable.addEventListener("transitionend", (event) => {
+				if (event.target === scalable && event.propertyName === "transform") finish();
+			}, { signal });
+			const timeoutId = setTimeout(() => {
+				if (!signal.aborted) finish();
+			}, BODY_SCALE_RESET_FALLBACK_MS);
+			signal.addEventListener("abort", () => {
+				clearTimeout(timeoutId);
+			});
+			cancelPendingBodyScaleReset = () => {
+				controller.abort();
+				cancelPendingBodyScaleReset = void 0;
+			};
 		};
-		wrapper.addEventListener("transitionend", handleEnd, { once: true });
-		return () => wrapper.removeEventListener("transitionend", handleEnd);
 	}, [
 		isOpen,
 		config.shouldScaleBackground,
@@ -187,7 +223,14 @@ const useBodyScale = (config, isOpen, prefersReducedMotion) => {
 };
 //#endregion
 //#region src/snap-points.ts
-const SNAP_POINT_RE = /^(\d+(?:\.\d+)?)(px|rem|em|vh|%)$/u;
+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)
@@ -197,18 +240,11 @@ const SNAP_POINT_RE = /^(\d+(?:\.\d+)?)(px|rem|em|vh|%)$/u;
 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 [, rawValue, unit] = match;
-		const value = Number.parseFloat(rawValue);
-		switch (unit) {
-			case "px": return value;
-			case "rem":
-			case "em": return value * (typeof document === "undefined" ? 16 : Number.parseFloat(getComputedStyle(document.documentElement).fontSize));
-			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;
 };
@@ -294,12 +330,13 @@ const resolveClassNames = (cn) => {
 		panel: cn.panel ?? ""
 	};
 };
-const buildAriaProps = (isTop, isModal, isComposable, ariaLabel, panelId, hasDescription) => {
+const buildAriaProps = ({ ariaLabel, hasDescription, hasTitle, isComposable, isModal, isTop, panelId }) => {
 	if (!isTop) return {};
 	const props = { role: "dialog" };
 	if (isModal) props["aria-modal"] = "true";
 	if (isComposable) {
-		props["aria-labelledby"] = `${panelId}-title`;
+		if (hasTitle) props["aria-labelledby"] = `${panelId}-title`;
+		else props["aria-label"] = ariaLabel;
 		if (hasDescription) props["aria-describedby"] = `${panelId}-desc`;
 	} else props["aria-label"] = ariaLabel;
 	return props;
@@ -397,7 +434,7 @@ const RUBBER_BAND_FACTOR = .6;
 //#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;
@@ -473,95 +510,108 @@ const classifyGesture = (dx, dy, axis, sign) => {
 /** Decide whether a pointer gesture commits as a drag or should be ignored. */
 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";
 };
 const getPanelDimension = (panel, axis) => {
 	if (!panel) return 300;
 	return axis === "x" ? panel.offsetWidth : panel.offsetHeight;
 };
-//#endregion
-//#region src/Drag/use-drag.ts
+/** Upper bound on retained samples — plenty for a 100ms window at 120Hz. */
+const MAX_SAMPLES = 20;
 /**
-* 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).
+* Append a pointer sample, pruning entries that fall outside the sliding
+* window (plus a hard cap as a memory guard). Mutates and returns `samples`.
+*/
+const appendVelocitySample = (samples, sample) => {
+	samples.push(sample);
+	const cutoff = sample.time - 100;
+	while (samples.length > MAX_SAMPLES || samples.length > 2 && (samples[0]?.time ?? 0) < cutoff) samples.shift();
+	return samples;
+};
+/**
+* Compute release velocity (px/ms, positive = dismiss direction) from the
+* samples recorded within the sliding window before `releaseTime`.
 *
-* When `snapHeights` is provided, release targeting uses
-* `findSnapTarget()` instead of the simple threshold check.
+* Using only recent samples means a pause followed by a flick reports the
+* flick's velocity — not the whole-gesture average, which would dilute it
+* to near zero.
 */
-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 getReleaseVelocity = (samples, releaseTime) => {
+	const cutoff = releaseTime - 100;
+	const recent = samples.filter((sample) => sample.time >= cutoff);
+	const [first] = recent;
+	const last = recent.at(-1);
+	if (first === void 0 || last === void 0 || last.time <= first.time) return 0;
+	return (last.offset - first.offset) / (last.time - first.time);
+};
+//#endregion
+//#region src/Drag/use-drag.ts
+const resetDragRefs = ({ committedRef, offsetRef, samplesRef, scrollTargetRef, startRef }) => {
+	startRef.current = null;
+	committedRef.current = null;
+	offsetRef.current = 0;
+	samplesRef.current = [];
+	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) return;
-		if (e.button !== 0) return;
-		const target = e.target;
-		if (!target) return;
-		const isHandle = !!target.closest("[data-stacksheet-handle]");
+		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 = {
-			time: Date.now(),
+		refs.scrollTargetRef.current = isHandle ? null : findScrollableAncestor(target, axis);
+		refs.startRef.current = {
 			x: e.clientX,
 			y: e.clientY
 		};
-		committedRef.current = null;
-		offsetRef.current = 0;
-		e.currentTarget?.setPointerCapture?.(e.pointerId);
+		refs.committedRef.current = null;
+		refs.offsetRef.current = 0;
+		refs.samplesRef.current = [{
+			offset: 0,
+			time: Date.now()
+		}];
 	};
 	const handlePointerMove = (e) => {
-		if (!startRef.current) return;
-		const dx = e.clientX - startRef.current.x;
-		const dy = e.clientY - startRef.current.y;
+		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 (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;
+		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 (e.currentTarget instanceof HTMLElement) e.currentTarget.setPointerCapture(e.pointerId);
 		}
-		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;
+		appendVelocitySample(refs.samplesRef.current, {
+			offset: clampedOffset,
+			time: Date.now()
+		});
 		onDragUpdate({
 			isDragging: true,
 			offset: clampedOffset
 		});
 		e.preventDefault();
 	};
-	const dismiss = () => {
-		if (config.isNested) config.onPop();
-		else config.onClose();
-	};
-	const handlePointerUp = (_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 velocity = elapsed > 0 ? offset / elapsed : 0;
-		startRef.current = null;
-		committedRef.current = null;
-		offsetRef.current = 0;
-		scrollTargetRef.current = null;
+		const offset = Math.max(0, refs.offsetRef.current);
+		const velocity = getReleaseVelocity(refs.samplesRef.current, Date.now());
+		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);
@@ -584,15 +634,56 @@ const useDrag = (panelRef, config, onDragUpdate) => {
 		});
 	};
 	const handlePointerCancel = () => {
-		startRef.current = null;
-		committedRef.current = null;
-		offsetRef.current = 0;
-		scrollTargetRef.current = null;
+		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 samplesRef = useRef([]);
+	const scrollTargetRef = useRef(null);
+	const { axis, sign } = getDismissAxis(config.side);
+	const { handlePointerCancel, handlePointerDown, handlePointerMove, handlePointerUp } = createDragHandlers({
+		axis,
+		config,
+		onDragUpdate,
+		panelRef,
+		refs: {
+			committedRef,
+			offsetRef,
+			samplesRef,
+			scrollTargetRef,
+			startRef
+		},
+		sign
+	});
 	const handlersRef = useRef({
 		handlePointerCancel,
 		handlePointerDown,
@@ -607,20 +698,32 @@ const 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]);
 };
@@ -795,11 +898,12 @@ const DefaultHeader = ({ isNested, onBack, onClose, className }) => /* @__PURE__
 //#endregion
 //#region src/SheetPanel/sheet-panel-content.tsx
 const PanelInnerContent = ({ isComposable, shouldRender, Content, data, renderHeader, headerProps, headerClassName }) => {
-	if (isComposable) return shouldRender && Content ? /* @__PURE__ */ jsx(Content, { ...data }) : null;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [renderHeader ? renderHeader(headerProps) : /* @__PURE__ */ jsx(DefaultHeader, {
+	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 })
@@ -816,7 +920,9 @@ const LAYERED_MODAL_SELECTORS = [
 ].join(", ");
 const subscribeToFocusTarget = (onStoreChange) => {
 	document.addEventListener("focusin", onStoreChange, true);
-	return () => document.removeEventListener("focusin", onStoreChange, true);
+	return () => {
+		document.removeEventListener("focusin", onStoreChange, true);
+	};
 };
 const getServerLayeredModalFocused = () => false;
 const getLayeredModalFocused = () => {
@@ -837,10 +943,10 @@ const ModalFocusTrap = ({ enabled, active, fallbackRef, children }) => {
 			allowOutsideClick: true,
 			escapeDeactivates: false,
 			fallbackFocus: () => {
-				if (fallbackRef.current) return fallbackRef.current;
+				if (fallbackRef.current !== null) return fallbackRef.current;
 				return document.body;
 			},
-			initialFocus: false,
+			initialFocus: () => fallbackRef.current ?? void 0,
 			returnFocusOnDeactivate: true
 		},
 		paused,
@@ -890,10 +996,18 @@ const resolvePanelLayout = (layout, renderHeader) => {
 //#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)
+	onBlur: () => {
+		setIsHovered(false);
+	},
+	onFocus: () => {
+		setIsHovered(true);
+	},
+	onMouseEnter: () => {
+		setIsHovered(true);
+	},
+	onMouseLeave: () => {
+		setIsHovered(false);
+	}
 } : {};
 const getInactivePanelProps = (isTop) => isTop ? {} : {
 	"aria-hidden": "true",
@@ -905,14 +1019,16 @@ const getHeaderProps = ({ close, isNested, pop, side }) => ({
 	onClose: close,
 	side
 });
-const getPanelContext = ({ close, hasDescription, isNested, isTop, panelId, pop, registerDescription, side }) => ({
+const getPanelContext = ({ close, hasDescription, hasTitle, isNested, isTop, panelId, pop, registerDescription, registerTitle, side }) => ({
 	back: pop,
 	close,
 	hasDescription,
+	hasTitle,
 	isNested,
 	isTop,
 	panelId,
 	registerDescription,
+	registerTitle,
 	side
 });
 const getOptionalSideHandle = ({ isHovered, onDismiss, show, side }) => show ? /* @__PURE__ */ jsx(SideHandle, {
@@ -927,25 +1043,22 @@ const completeOpeningAnimation = (hasEnteredRef, isTop, onOpenCompleteRef) => {
 		onOpenCompleteRef.current?.();
 	}
 };
-const SheetPanel = ({ item, index, depth, isTop, isNested, side, config, classNames, Content, shouldRender, pop, close, swipeClose, swipePop, snapHeights, activeSnapIndex, onSnap, layout, renderHeader, slideFrom, slideTarget, spring, stackSpring, prefersReducedMotion }) => {
-	const panelRef = useRef(null);
+const useOpeningCompletion = (isTop, onOpenComplete) => {
 	const hasEnteredRef = useRef(false);
-	const onOpenCompleteRef = useRef(config.onOpenComplete);
-	const [dragState, setDragState] = useState({
-		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);
+	const onOpenCompleteRef = useRef(onOpenComplete);
 	if (!isTop && hasEnteredRef.current) hasEnteredRef.current = false;
 	useEffect(() => {
-		onOpenCompleteRef.current = config.onOpenComplete;
-	}, [config.onOpenComplete]);
-	const handleAnimationComplete = () => {
+		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({
+		isDragging: false,
+		offset: 0
+	});
 	useDrag(panelRef, {
 		activeSnapIndex,
 		closeThreshold: config.closeThreshold,
@@ -959,23 +1072,63 @@ const SheetPanel = ({ item, index, depth, isTop, isNested, side, config, classNa
 		snapHeights,
 		velocityThreshold: config.velocityThreshold
 	}, setDragState);
-	const ariaLabel = getPanelAriaLabel(item, config.ariaLabel);
-	const panelId = `stacksheet-${item.id}`;
+	return dragState;
+};
+const useSheetPanelContext = ({ close, isNested, isTop, pop, side }, panelId) => {
 	const [hasDescription, setHasDescription] = useState(false);
-	const registerDescription = () => {
+	const [hasTitle, setHasTitle] = useState(false);
+	const registerDescription = useCallback(() => {
 		setHasDescription(true);
-		return () => setHasDescription(false);
-	};
-	const panelContext = getPanelContext({
-		close,
+		return () => {
+			setHasDescription(false);
+		};
+	}, []);
+	const registerTitle = useCallback(() => {
+		setHasTitle(true);
+		return () => {
+			setHasTitle(false);
+		};
+	}, []);
+	return {
 		hasDescription,
-		isNested,
-		isTop,
-		panelId,
-		pop,
-		registerDescription,
-		side
-	});
+		hasTitle,
+		panelContext: useMemo(() => getPanelContext({
+			close,
+			hasDescription,
+			hasTitle,
+			isNested,
+			isTop,
+			panelId,
+			pop,
+			registerDescription,
+			registerTitle,
+			side
+		}), [
+			close,
+			hasDescription,
+			hasTitle,
+			isNested,
+			isTop,
+			panelId,
+			pop,
+			registerDescription,
+			registerTitle,
+			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, hasTitle, panelContext } = useSheetPanelContext(props, panelId);
 	const isComposable = resolvePanelLayout(layout, renderHeader) === "composable";
 	const hasPanelClass = classNames.panel !== "";
 	const dragOffset = getDragTransform(side, dragState.offset);
@@ -986,7 +1139,15 @@ const SheetPanel = ({ item, index, depth, isTop, isNested, side, config, classNa
 		pop,
 		side
 	});
-	const ariaProps = buildAriaProps(isTop, config.modal, isComposable, ariaLabel, panelId, hasDescription);
+	const ariaProps = buildAriaProps({
+		ariaLabel,
+		hasDescription,
+		hasTitle,
+		isComposable,
+		isModal: config.modal,
+		isTop,
+		panelId
+	});
 	const transition = buildPanelTransition(dragState.isDragging, isTop, spring, stackSpring);
 	const animatedRadius = getAnimatedBorderRadius(side, depth, config.stacking);
 	const snapYOffset = computeSnapYOffset(side, snapHeights, activeSnapIndex, measuredHeight);
@@ -1002,9 +1163,26 @@ const SheetPanel = ({ item, index, depth, isTop, isNested, side, config, classNa
 		show: showSideHandle,
 		side
 	});
-	const bottomHandle = getOptionalBottomHandle(showBottomHandle, dismiss);
-	const hoverProps = getPanelHoverProps(showSideHandle, setIsHovered);
-	const inactivePanelProps = getInactivePanelProps(isTop);
+	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,
@@ -1079,21 +1257,27 @@ const getBackdropStyle = (config, hasBackdropClass) => ({
 	zIndex: config.zIndex,
 	...hasBackdropClass ? {} : { background: "var(--overlay, rgba(0, 0, 0, 0.15))" }
 });
-/**
-* Root renderer component — manages the backdrop, scroll lock, snap points,
-* close reasons, focus restoration, keyboard/CloseWatcher dismissal, and
-* delegates per-panel rendering to `SheetPanel`.
-*
-* Mounted inside a Portal by `StacksheetProvider`.
-*/
-const SheetRenderer = ({ store, config, sheets, componentMap, classNames: classNamesProp, layout, renderHeader }) => {
+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 = resolveClassNames(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 = getResolvedSnapHeights(side, config.snapPoints, viewportHeight);
 	const snapContext = isOpen ? stack.map((item) => item.id).join("\0") : "";
@@ -1118,6 +1302,13 @@ const SheetRenderer = ({ store, config, sheets, componentMap, classNames: classN
 		});
 		config.onSnapPointChange?.(index);
 	};
+	return {
+		activeSnapIndex,
+		handleSnap,
+		snapHeights
+	};
+};
+const useCloseControls = (rawClose, rawPop) => {
 	const closeReasonRef = useRef("programmatic");
 	const closeWith = (reason) => {
 		closeReasonRef.current = reason;
@@ -1127,9 +1318,19 @@ const SheetRenderer = ({ store, config, sheets, componentMap, classNames: classN
 		closeReasonRef.current = reason;
 		rawPop();
 	};
-	const close = () => closeWith("programmatic");
-	const pop = () => popWith("programmatic");
-	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(() => {
@@ -1141,56 +1342,96 @@ const 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;
+		const shouldListen = isOpen && config.closeOnEscape && config.dismissible;
 		const handleKeyDown = (e) => {
-			if (e.key === "Escape") {
-				e.preventDefault();
-				if (stackLengthRef.current > 1) {
-					closeReasonRef.current = "escape";
-					rawPop();
-				} else {
-					closeReasonRef.current = "escape";
-					rawClose();
-				}
-			}
+			if (e.key !== "Escape" || e.defaultPrevented) return;
+			e.preventDefault();
+			dismissFromEscape({
+				closeReasonRef,
+				rawClose,
+				rawPop,
+				stackLengthRef
+			});
+		};
+		if (shouldListen) document.addEventListener("keydown", handleKeyDown);
+		return () => {
+			if (shouldListen) document.removeEventListener("keydown", handleKeyDown);
 		};
-		document.addEventListener("keydown", handleKeyDown);
-		return () => document.removeEventListener("keydown", handleKeyDown);
 	}, [
 		isOpen,
 		config.closeOnEscape,
 		config.dismissible,
 		rawPop,
-		rawClose
+		rawClose,
+		closeReasonRef
 	]);
 	useEffect(() => {
-		if (!(isOpen && config.dismissible) || globalThis.CloseWatcher === void 0) return;
-		const watcher = new globalThis.CloseWatcher();
+		const CloseWatcherConstructor = globalThis.CloseWatcher;
+		const shouldListen = isOpen && config.closeOnEscape && config.dismissible && CloseWatcherConstructor !== void 0;
+		let watcher;
 		const handleClose = () => {
-			if (stackLengthRef.current > 1) {
-				closeReasonRef.current = "escape";
-				rawPop();
-			} else {
-				closeReasonRef.current = "escape";
-				rawClose();
-			}
+			dismissFromEscape({
+				closeReasonRef,
+				rawClose,
+				rawPop,
+				stackLengthRef
+			});
 		};
-		watcher.addEventListener("close", handleClose);
+		if (shouldListen) {
+			watcher = new CloseWatcherConstructor();
+			watcher.addEventListener("close", handleClose);
+		}
 		return () => {
-			watcher.removeEventListener("close", handleClose);
-			watcher.destroy();
+			if (watcher !== void 0) {
+				watcher.removeEventListener("close", handleClose);
+				watcher.destroy();
+			}
 		};
 	}, [
 		isOpen,
+		config.closeOnEscape,
 		config.dismissible,
 		rawPop,
-		rawClose
+		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);
@@ -1201,8 +1442,12 @@ const SheetRenderer = ({ store, config, sheets, componentMap, classNames: classN
 	const handleExitComplete = () => {
 		if (stack.length === 0) config.onCloseComplete?.(closeReasonRef.current);
 	};
-	const swipeClose = () => closeWith("swipe");
-	const swipePop = () => popWith("swipe");
+	const swipeClose = () => {
+		closeWith("swipe");
+	};
+	const swipePop = () => {
+		popWith("swipe");
+	};
 	const shouldLockScroll = isOpen && isModal && config.lockScroll;
 	return /* @__PURE__ */ jsxs(LazyMotion, {
 		features: domMax,
@@ -1213,7 +1458,9 @@ const 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")
@@ -1232,7 +1479,7 @@ const 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,
@@ -1264,11 +1511,32 @@ const SheetRenderer = ({ store, config, sheets, componentMap, classNames: classN
 };
 //#endregion
 //#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;
+/**
+* Generate a unique sheet id. `crypto.randomUUID` is only available in
+* secure contexts, so fall back to a timestamp + random suffix on
+* non-secure origins (e.g. plain-HTTP LAN dev servers).
+*/
+const generateSheetId = () => {
+	if (typeof globalThis.crypto?.randomUUID === "function") return globalThis.crypto.randomUUID();
+	return `sheet-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+};
+const getStringArg = (value, name) => {
+	if (typeof value !== "string") throw new TypeError(`Expected ${name} to be a string.`);
+	return value;
+};
 const resolvePresentationOptions = (value) => {
-	if (!(value && typeof value === "object")) return;
-	const candidate = value;
-	if (candidate.ariaLabel !== void 0 && typeof candidate.ariaLabel !== "string") return;
-	return candidate;
+	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.
@@ -1276,52 +1544,202 @@ const resolvePresentationOptions = (value) => {
 * it's almost always an inline arrow being re-created every render.
 */
 const warnInlineComponent = (component, componentRegistry, warnedNames) => {
-	if (process === void 0 || process?.env?.NODE_ENV === "production") return;
-	const name = component.displayName || component.name;
-	if (!name) return;
+	if (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.
 */
 const 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 (isComponent(first)) {
+		const typeKey = registerComponent(first, componentRegistry, componentMap, getNextKey, warnedNames);
 		if (typeof second === "string") return {
 			ariaLabel: resolvePresentationOptions(fourth)?.ariaLabel,
-			data: third ?? {},
+			data: toRecord(third),
 			id: second,
 			type: typeKey
 		};
 		return {
 			ariaLabel: resolvePresentationOptions(third)?.ariaLabel,
-			data: second ?? {},
-			id: crypto.randomUUID(),
+			data: toRecord(second),
+			id: generateSheetId(),
 			type: typeKey
 		};
 	}
 	return {
 		ariaLabel: resolvePresentationOptions(fourth)?.ariaLabel,
-		data: third ?? {},
-		id: second,
-		type: first
+		data: toRecord(third),
+		id: getStringArg(second, "sheet id"),
+		type: getStringArg(first, "sheet type")
 	};
 };
 //#endregion
 //#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.
 *
@@ -1355,165 +1773,15 @@ const createSheetStore = (config) => {
 	return {
 		componentMap,
 		componentRegistry,
-		store: createStore()((set, get) => {
-			const _openResolved = ({ type, id, data, ariaLabel }) => {
-				set({
-					isOpen: true,
-					stack: [{
-						ariaLabel,
-						data,
-						id,
-						type
-					}]
-				});
-			};
-			const _pushResolved = ({ type, id, data, ariaLabel }) => {
-				set((state) => {
-					const item = {
-						ariaLabel,
-						data,
-						id,
-						type
-					};
-					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]
-					};
-				});
-			};
-			const _replaceResolved = ({ type, id, data, ariaLabel }) => {
-				set((state) => {
-					const item = {
-						ariaLabel,
-						data,
-						id,
-						type
-					};
-					if (state.stack.length === 0) return {
-						isOpen: true,
-						stack: [item]
-					};
-					return {
-						isOpen: true,
-						stack: [...state.stack.slice(0, -1), item]
-					};
-				});
-			};
-			return {
-				close: () => {
-					pruneRegistry([]);
-					set({
-						isOpen: false,
-						stack: []
-					});
-				},
-				isOpen: false,
-				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);
-				},
-				open: (first, second, third, fourth) => {
-					_openResolved(resolve(first, second, third, fourth));
-				},
-				pop: () => {
-					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
-						};
-					});
-				},
-				push: (first, second, third, fourth) => {
-					_pushResolved(resolve(first, second, third, fourth));
-				},
-				remove: (id) => {
-					set((state) => {
-						const next = state.stack.filter((item) => item.id !== id);
-						if (next.length === state.stack.length) return state;
-						pruneRegistry(next);
-						if (next.length === 0) return {
-							isOpen: false,
-							stack: []
-						};
-						return { stack: next };
-					});
-				},
-				replace: (first, second, third, fourth) => {
-					_replaceResolved(resolve(first, second, third, fourth));
-				},
-				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 };
-					});
-				},
-				stack: [],
-				swap: (first, second, third) => {
-					let type;
-					let data;
-					const ariaLabel = resolvePresentationOptions(third)?.ariaLabel;
-					if (typeof first === "function") {
-						const component = first;
-						let typeKey = componentRegistry.get(component);
-						if (!typeKey) {
-							warnInlineComponent(component, componentRegistry, warnedNames);
-							typeKey = getNextKey();
-							componentRegistry.set(component, typeKey);
-							componentMap.set(typeKey, component);
-						}
-						type = typeKey;
-						data = second ?? {};
-					} else {
-						type = first;
-						data = second ?? {};
-					}
-					set((state) => {
-						const top = state.stack.at(-1);
-						if (!top) return state;
-						const newStack = [...state.stack];
-						newStack[newStack.length - 1] = {
-							ariaLabel: ariaLabel ?? top.ariaLabel,
-							data,
-							id: top.id,
-							type
-						};
-						return { stack: newStack };
-					});
-				}
-			};
-		})
+		store: createStore()(createStoreState({
+			componentMap,
+			componentRegistry,
+			config,
+			getNextKey,
+			pruneRegistry,
+			resolve,
+			warnedNames
+		}))
 	};
 };
 //#endregion
@@ -1557,12 +1825,11 @@ const createStacksheet = (config) => {
 		if (!ctx) throw new Error("useSheet/useStacksheetState must be used within <StacksheetProvider>");
 		return ctx;
 	};
-	const EMPTY_SHEETS = {};
 	const providerValue = {
 		config: resolved,
 		store
 	};
-	const StacksheetProvider = ({ sheets = EMPTY_SHEETS, children, classNames, layout, renderHeader }) => /* @__PURE__ */ jsxs(StoreContext.Provider, {
+	const StacksheetProvider = ({ sheets, children, classNames, layout, renderHeader }) => /* @__PURE__ */ jsxs(StoreContext.Provider, {
 		value: providerValue,
 		children: [children, /* @__PURE__ */ jsx(Portal, {
 			asChild: false,
@@ -1611,19 +1878,20 @@ const createStacksheet = (config) => {
 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/sheet-body.tsx
 const SheetBody = ({ asChild, className, style, children }) => {
-	if (asChild) return /* @__PURE__ */ jsx(Slot, {
+	if (asChild === true) return /* @__PURE__ */ jsx(Slot, {
 		className: joinClassNames("relative min-h-0 flex-1", className),
 		"data-stacksheet-no-drag": "",
 		style,
@@ -1647,12 +1915,13 @@ const SheetBody = ({ 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, {})
 	});
 };
@@ -1661,7 +1930,7 @@ const SheetClose = ({ asChild, className, style, children }) => {
 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,
@@ -1671,8 +1940,9 @@ const SheetDescription = ({ asChild, className, style, children }) => {
 //#endregion
 //#region src/SheetParts/sheet-footer.tsx
 const SheetFooter = ({ asChild, className, style, children }) => {
-	return /* @__PURE__ */ jsx(asChild ? Slot : "footer", {
-		className: joinClassNames(asChild ? "shrink-0" : "flex shrink-0 items-center gap-2 border-t px-6 py-3", className),
+	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
 	});
@@ -1682,13 +1952,14 @@ const SheetFooter = ({ asChild, className, style, children }) => {
 const SheetHandle = ({ asChild, className, style, children }) => {
 	const { close, back, isNested } = useSheetPanel();
 	const dismiss = isNested ? back : close;
-	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
+	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 border-none bg-transparent pt-4 pb-1 text-inherit", 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,
 		style,
-		type: asChild ? void 0 : "button",
+		type: isAsChild ? void 0 : "button",
 		children: children ?? /* @__PURE__ */ jsx("div", {
 			"aria-hidden": "true",
 			className: "h-1 w-9 rounded-sm bg-current/25"
@@ -1698,8 +1969,9 @@ const SheetHandle = ({ asChild, className, style, children }) => {
 //#endregion
 //#region src/SheetParts/sheet-header.tsx
 const SheetHeader = ({ asChild, className, style, children }) => {
-	return /* @__PURE__ */ jsx(asChild ? Slot : "header", {
-		className: joinClassNames(asChild ? "shrink-0" : "flex h-14 shrink-0 items-center justify-between border-b px-6", className),
+	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
 	});
@@ -1707,9 +1979,11 @@ const SheetHeader = ({ asChild, className, style, children }) => {
 //#endregion
 //#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 { panelId, registerTitle } = useSheetPanel();
+	useEffect(() => registerTitle(), [registerTitle]);
+	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