react-sway 0.4.2 → 0.5.0

package/dist/index.cjs

@@ -1,10 +1,48 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+// \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule || !__hasOwnProp.call(mod, "default") ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
 let react = require("react");
-let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/edge-hover-velocity.ts
-/**
-* Defines the bounded spatial mapping from edge-hover depth to Sway velocity.
-*/
+react = __toESM(react, 1);
+// src/depth-position.ts
+var DEFAULT_DEPTH_PERSPECTIVE = 800;
+var DEFAULT_DEPTH_SPACING = 420;
+/** Bounds pixel lengths so periods and fade denominators remain finite and nonzero. */
+function normalizeDepthLength(value, fallback) {
+	return Number.isFinite(value) && value > 0 ? Math.min(Number.MAX_SAFE_INTEGER, Math.max(1, value)) : fallback;
+}
+function getDepthItemState(position, index, count, perspective = 800, spacing = 420) {
+	if (count <= 0) return {
+		opacity: 0,
+		z: 0
+	};
+	const period = count * spacing;
+	const phase = ((index * spacing + position) % period + period) % period;
+	const fade = Math.min(1, Math.min(phase, period - phase) / (spacing * .45));
+	return {
+		opacity: fade * fade * (3 - 2 * fade),
+		z: perspective * .7 - phase
+	};
+}
+// src/edge-hover-velocity.ts
 /** Default edge-hover activation thickness in pixels. */
 var DEFAULT_EDGE_HOVER_SIZE = 96;
 /** Default maximum edge-hover speed relative to the configured base speed. */
@@ -50,10 +88,10 @@ function getEdgeHoverVelocityScale(intensity, speedMultiplier = 6) {
 	if (depth < EDGE_HOVER_ENTRY_FEATHER_INTENSITY) return direction * smoothUnitStep(depth / EDGE_HOVER_ENTRY_FEATHER_INTENSITY);
 	const physicalEdgeScale = Math.min(EDGE_HOVER_PHYSICAL_EDGE_SPEED_MULTIPLIER, maximumScale);
 	if (depth <= EDGE_HOVER_PHYSICAL_EDGE_INTENSITY) {
-		const physicalEdgeProgress = (depth - EDGE_HOVER_ENTRY_FEATHER_INTENSITY) / (EDGE_HOVER_PHYSICAL_EDGE_INTENSITY - EDGE_HOVER_ENTRY_FEATHER_INTENSITY);
+		const physicalEdgeProgress = (depth - EDGE_HOVER_ENTRY_FEATHER_INTENSITY) / .42;
 		return direction * (1 + (physicalEdgeScale - 1) * smoothUnitStep(physicalEdgeProgress));
 	}
-	const beyondEdgeProgress = (depth - EDGE_HOVER_PHYSICAL_EDGE_INTENSITY) / (1 - EDGE_HOVER_PHYSICAL_EDGE_INTENSITY);
+	const beyondEdgeProgress = (depth - EDGE_HOVER_PHYSICAL_EDGE_INTENSITY) / .5;
 	return direction * (physicalEdgeScale + (maximumScale - physicalEdgeScale) * smoothUnitStep(beyondEdgeProgress));
 }
 /**
@@ -79,9 +117,7 @@ function getEdgeHoverIntensity(pointerPosition, visibleInterval, edgeHoverSize)
 	}
 	return 0;
 }
-//#endregion
-//#region src/wheel-input.ts
-/** Fallback pixel height for wheel events reported in line units. */
+// src/wheel-input.ts
 var WHEEL_LINE_HEIGHT_FALLBACK_PX = 16;
 /** WheelEvent deltaMode value for line-based deltas. */
 var WHEEL_MODE_LINE = 1;
@@ -115,8 +151,10 @@ function normalizeWheelDelta(event, container, axis) {
 * the gesture. This partial function is the wheel-ownership boundary.
 */
 function getOwnedWheelDelta(event, container, isHorizontal, wheelMode) {
+	if (event.ctrlKey) return null;
 	const deltaX = normalizeWheelDelta(event, container, "x");
 	const deltaY = normalizeWheelDelta(event, container, "y");
+	if (!Number.isFinite(deltaX) || !Number.isFinite(deltaY) || deltaX === 0 && deltaY === 0) return null;
 	const absDeltaX = Math.abs(deltaX);
 	const absDeltaY = Math.abs(deltaY);
 	if (isHorizontal) {
@@ -126,11 +164,7 @@ function getOwnedWheelDelta(event, container, isHorizontal, wheelMode) {
 	if (wheelMode === "axis" && absDeltaX > absDeltaY) return null;
 	return deltaY;
 }
-//#endregion
-//#region src/ReactSway.tsx
-/**
-* Core ReactSway component implementing axis-aware infinite scrolling interactions.
-*/
+// src/ReactSway.tsx
 /** Velocity applied per arrow key press (pixels). */
 var ARROW_KEY_VELOCITY = 15;
 /** Default friction coefficient applied to velocity each frame. */
@@ -161,6 +195,10 @@ var WHEEL_VELOCITY_MULTIPLIER = .14;
 var WHEEL_IMMEDIATE_DELTA_FACTOR = .14;
 /** Minimum touch movement before a gesture is classified by axis. */
 var TOUCH_AXIS_LOCK_THRESHOLD_PX = 8;
+var INERT_ATTRIBUTE = { inert: Number.parseInt(react.version, 10) >= 19 ? true : "" };
+function isInteractiveTarget(target) {
+	return target instanceof Element && Boolean(target.closest("a, button, input, select, textarea, [contenteditable]:not([contenteditable=\"false\"])"));
+}
 function getVisibleEdgeInterval(rect, isHorizontal) {
 	const rectEnd = isHorizontal ? rect.right : rect.bottom;
 	const rectStart = isHorizontal ? rect.left : rect.top;
@@ -180,11 +218,11 @@ function getVisibleEdgeInterval(rect, isHorizontal) {
 * Renders children in a continuously looping scroll area with support for
 * auto-scrolling, mouse drag, touch swipe, wheel, keyboard interactions,
 * and optional edge-hover scrolling.
-* Content is duplicated to create a seamless loop effect. Duplicate content
+* Planar content is duplicated to create a seamless loop effect. Duplicate content
 * is wrapped in `<aside>` elements with `aria-hidden="true"` for accessibility.
 *
-* Respects `prefers-reduced-motion: reduce` by lowering auto-scroll speed
-* and disabling momentum effects.
+* Reduced motion stops depth auto-scroll, lowers planar auto-scroll speed,
+* and disables momentum effects.
 *
 * @example
 * ```tsx
@@ -194,8 +232,14 @@ function getVisibleEdgeInterval(rect, isHorizontal) {
 * </ReactSway>
 * ```
 */
-var ReactSway = (0, react.forwardRef)(function ReactSway({ ariaLabel = "Scrollable content", axis, autoScroll = true, children, className, direction = "up", draggable = true, edgeHoverInputMode = "hybrid", edgeHoverScroll = false, edgeHoverSize = 96, edgeHoverSpeedMultiplier = 6, friction = DEFAULT_FRICTION, keyboard = true, lazy = true, lazyRootMargin = DEFAULT_LAZY_ROOT_MARGIN, lazyThreshold = DEFAULT_LAZY_THRESHOLD, onPause, onResume, onScroll, pauseOnInteraction = true, resumeDelay = DEFAULT_RESUME_DELAY, speed = DEFAULT_SPEED, wheelEnabled = true, wheelMode = "axis" }, ref) {
-	const isHorizontal = (0, react.useMemo)(() => axis ?? (direction === "left" || direction === "right" ? "horizontal" : "vertical"), [axis, direction]) === "horizontal";
+var ReactSway = (0, react.forwardRef)(function ReactSway({ active = true, ariaLabel = "Scrollable content", axis, autoScroll = true, children, className, depthPerspective = 800, depthSpacing = 420, direction = "up", draggable = true, edgeHoverInputMode = "hybrid", edgeHoverScroll = false, edgeHoverSize = 96, edgeHoverSpeedMultiplier = 6, friction = DEFAULT_FRICTION, keyboard = true, lazy = true, lazyRootMargin = DEFAULT_LAZY_ROOT_MARGIN, lazyThreshold = DEFAULT_LAZY_THRESHOLD, onPause, onResume, onScroll, pauseOnInteraction = true, reducedMotion = false, resumeDelay = DEFAULT_RESUME_DELAY, speed = DEFAULT_SPEED, wheelEnabled = true, wheelMode = "axis" }, ref) {
+	const scrollAxis = (0, react.useMemo)(() => axis ?? (direction === "toward" || direction === "away" ? "depth" : direction === "left" || direction === "right" ? "horizontal" : "vertical"), [axis, direction]);
+	const isHorizontal = scrollAxis === "horizontal";
+	const isDepth = scrollAxis === "depth";
+	const depthChildren = (0, react.useMemo)(() => react.Children.toArray(children), [children]);
+	const enabled = active && (!isDepth || depthChildren.length > 0);
+	const normalizedDepthPerspective = normalizeDepthLength(depthPerspective, 800);
+	const normalizedDepthSpacing = normalizeDepthLength(depthSpacing, 420);
 	const normalizedEdgeHoverSize = (0, react.useMemo)(() => Number.isFinite(edgeHoverSize) ? Math.max(1, edgeHoverSize) : 96, [edgeHoverSize]);
 	const normalizedEdgeHoverSpeedMultiplier = (0, react.useMemo)(() => normalizeEdgeHoverSpeedMultiplier(edgeHoverSpeedMultiplier), [edgeHoverSpeedMultiplier]);
 	const normalizedFriction = (0, react.useMemo)(() => Number.isFinite(friction) ? Math.min(Math.max(friction, 0), 1) : DEFAULT_FRICTION, [friction]);
@@ -203,17 +247,22 @@ var ReactSway = (0, react.forwardRef)(function ReactSway({ ariaLabel = "Scrollab
 	const normalizedResumeDelay = (0, react.useMemo)(() => Number.isFinite(resumeDelay) ? Math.max(0, resumeDelay) : DEFAULT_RESUME_DELAY, [resumeDelay]);
 	const normalizedSpeed = (0, react.useMemo)(() => Number.isFinite(speed) ? Math.max(0, speed) : DEFAULT_SPEED, [speed]);
 	const touchAction = (0, react.useMemo)(() => {
-		if (!draggable) return "auto";
+		if (!enabled || !draggable) return "auto";
 		return isHorizontal ? "pan-y" : "pan-x";
-	}, [draggable, isHorizontal]);
-	const overscrollBehavior = wheelEnabled && wheelMode === "capture" ? "contain" : "auto";
+	}, [
+		draggable,
+		enabled,
+		isHorizontal
+	]);
+	const overscrollBehavior = enabled && wheelEnabled && wheelMode === "capture" ? "contain" : "auto";
 	const [isPaused, setIsPaused] = (0, react.useState)(false);
 	const [isTabActive, setIsTabActive] = (0, react.useState)(() => typeof document === "undefined" || !document.hidden);
 	const [loopSegmentCount, setLoopSegmentCount] = (0, react.useState)(MIN_LOOP_SEGMENTS);
-	const [prefersReducedMotion, setPrefersReducedMotion] = (0, react.useState)(() => {
+	const [systemReducedMotion, setSystemReducedMotion] = (0, react.useState)(() => {
 		if (typeof window === "undefined") return false;
 		return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 	});
+	const prefersReducedMotion = systemReducedMotion || reducedMotion;
 	const animationFrameRef = (0, react.useRef)(null);
 	const animationLoopRef = (0, react.useRef)(null);
 	const autoScrollRef = (0, react.useRef)({
@@ -260,7 +309,7 @@ var ReactSway = (0, react.forwardRef)(function ReactSway({ ariaLabel = "Scrollab
 		if (typeof window === "undefined") return;
 		const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
 		const handleChange = (e) => {
-			setPrefersReducedMotion(e.matches);
+			setSystemReducedMotion(e.matches);
 		};
 		mediaQuery.addEventListener("change", handleChange);
 		return () => {
@@ -300,11 +349,28 @@ var ReactSway = (0, react.forwardRef)(function ReactSway({ ariaLabel = "Scrollab
 	}, [isHorizontal]);
 	const renderPosition = (0, react.useCallback)((rawPosition) => {
 		if (!containerRef.current) return;
+		if (isDepth) {
+			containerRef.current.style.transform = "translate3d(0, 0, 0)";
+			const items = originalGroupRef.current?.children;
+			if (!items) return;
+			Array.from(items).forEach((item, index) => {
+				const { opacity, z } = getDepthItemState(rawPosition, index, items.length, normalizedDepthPerspective, normalizedDepthSpacing);
+				const element = item;
+				element.style.transform = `translate3d(0, 0, ${z}px)`;
+				element.style.opacity = String(opacity);
+			});
+			return;
+		}
 		const currentLoopPoint = loopPointRef.current;
 		let visualPosition = rawPosition % (currentLoopPoint || 1);
 		if (visualPosition > 0 && currentLoopPoint > 0) visualPosition -= currentLoopPoint;
 		containerRef.current.style.transform = isHorizontal ? `translate3d(${visualPosition}px, 0, 0)` : `translate3d(0, ${visualPosition}px, 0)`;
-	}, [isHorizontal]);
+	}, [
+		isDepth,
+		isHorizontal,
+		normalizedDepthPerspective,
+		normalizedDepthSpacing
+	]);
 	const commitPosition = (0, react.useCallback)((nextPosition) => {
 		if (positionRef.current === nextPosition) return;
 		positionRef.current = nextPosition;
@@ -325,11 +391,14 @@ var ReactSway = (0, react.forwardRef)(function ReactSway({ ariaLabel = "Scrollab
 	}, [draggable]);
 	const recalculateLoopPoint = (0, react.useCallback)(() => {
 		if (!containerRef.current || !originalGroupRef.current) return;
-		const originalContentSize = isHorizontal ? originalGroupRef.current.scrollWidth : originalGroupRef.current.scrollHeight;
-		if (originalContentSize <= 0) return;
+		const originalContentSize = isDepth ? depthChildren.length * normalizedDepthSpacing : isHorizontal ? originalGroupRef.current.scrollWidth : originalGroupRef.current.scrollHeight;
+		if (originalContentSize <= 0) {
+			if (isDepth) loopPointRef.current = 0;
+			return;
+		}
 		const viewport = containerRef.current.parentElement ?? containerRef.current;
 		const viewportSize = isHorizontal ? Math.max(viewport.clientWidth, 1) : Math.max(viewport.clientHeight, 1);
-		const nextLoopSegmentCount = Math.max(MIN_LOOP_SEGMENTS, Math.ceil(viewportSize / originalContentSize) + 1);
+		const nextLoopSegmentCount = isDepth ? 1 : Math.max(MIN_LOOP_SEGMENTS, Math.ceil(viewportSize / originalContentSize) + 1);
 		const nextLoopPoint = originalContentSize;
 		const previousMeasurement = lastLoopMeasurementRef.current;
 		const nextMeasurement = {
@@ -342,7 +411,13 @@ var ReactSway = (0, react.forwardRef)(function ReactSway({ ariaLabel = "Scrollab
 		setLoopSegmentCount((previousLoopSegmentCount) => previousLoopSegmentCount === nextLoopSegmentCount ? previousLoopSegmentCount : nextLoopSegmentCount);
 		loopPointRef.current = nextLoopPoint;
 		renderPosition(positionRef.current);
-	}, [isHorizontal, renderPosition]);
+	}, [
+		depthChildren.length,
+		isDepth,
+		isHorizontal,
+		normalizedDepthSpacing,
+		renderPosition
+	]);
 	(0, react.useEffect)(() => {
 		autoScrollRef.current.desired = autoScroll;
 		if (!autoScroll) {
@@ -367,6 +442,7 @@ var ReactSway = (0, react.forwardRef)(function ReactSway({ ariaLabel = "Scrollab
 		scheduleLoopPointRecalculation();
 	}, [
 		children,
+		isDepth,
 		isHorizontal,
 		scheduleLoopPointRecalculation
 	]);
@@ -421,7 +497,14 @@ var ReactSway = (0, react.forwardRef)(function ReactSway({ ariaLabel = "Scrollab
 		touchDragListenerCleanupRef.current = null;
 	}, []);
 	const handleKeyDown = (0, react.useCallback)((e) => {
-		if (!keyboard) return;
+		if (!enabled || !keyboard || isInteractiveTarget(e.target)) return;
+		const arrowDelta = isHorizontal ? e.key === "ArrowLeft" ? ARROW_KEY_VELOCITY : e.key === "ArrowRight" ? -15 : 0 : e.key === "ArrowUp" ? ARROW_KEY_VELOCITY : e.key === "ArrowDown" ? -15 : 0;
+		if (prefersReducedMotion && arrowDelta !== 0) {
+			e.preventDefault();
+			commitPosition(wrapPosition(positionRef.current + arrowDelta));
+			velocityRef.current = 0;
+			return;
+		}
 		switch (e.key) {
 			case " ":
 				e.preventDefault();
@@ -468,18 +551,19 @@ var ReactSway = (0, react.forwardRef)(function ReactSway({ ariaLabel = "Scrollab
 				velocityRef.current = 0;
 				pauseAutoScroll();
 				scheduleAutoScrollResume();
-				break;
-			default: break;
 		}
 		startAnimationLoop();
 	}, [
 		commitPosition,
+		enabled,
 		isHorizontal,
 		keyboard,
 		pauseAutoScroll,
+		prefersReducedMotion,
 		scheduleAutoScrollResume,
 		startAnimationLoop,
-		togglePause
+		togglePause,
+		wrapPosition
 	]);
 	const handleMouseMove = (0, react.useCallback)((e) => {
 		if (!isDraggingRef.current) return;
@@ -537,7 +621,7 @@ var ReactSway = (0, react.forwardRef)(function ReactSway({ ariaLabel = "Scrollab
 		handleMouseUp
 	]);
 	const handleMouseDown = (0, react.useCallback)((e) => {
-		if (!draggable) return;
+		if (!enabled || !draggable || e.button !== 0 || isInteractiveTarget(e.target)) return;
 		e.preventDefault();
 		containerRef.current?.focus();
 		setDraggingState(true);
@@ -550,6 +634,7 @@ var ReactSway = (0, react.forwardRef)(function ReactSway({ ariaLabel = "Scrollab
 	}, [
 		attachMouseDragListeners,
 		draggable,
+		enabled,
 		pauseAutoScroll,
 		setDraggingState,
 		startAnimationLoop
@@ -573,6 +658,7 @@ var ReactSway = (0, react.forwardRef)(function ReactSway({ ariaLabel = "Scrollab
 		if (touchInteractionStateRef.current === "idle" || touchInteractionStateRef.current === "ignored") return;
 		if (e.touches.length !== 1) return;
 		const touch = e.touches[0];
+		if (!touch) return;
 		if (touchInteractionStateRef.current === "pending") {
 			const totalDeltaX = touch.clientX - touchStartXRef.current;
 			const totalDeltaY = touch.clientY - touchStartYRef.current;
@@ -617,18 +703,24 @@ var ReactSway = (0, react.forwardRef)(function ReactSway({ ariaLabel = "Scrollab
 		handleTouchMove
 	]);
 	const handleTouchStart = (0, react.useCallback)((e) => {
-		if (!draggable || e.touches.length !== 1) return;
+		if (!enabled || !draggable || e.touches.length !== 1 || isInteractiveTarget(e.target)) return;
+		const touch = e.touches[0];
+		if (!touch) return;
 		containerRef.current?.focus();
 		touchInteractionStateRef.current = "pending";
-		lastTouchXRef.current = e.touches[0].clientX;
-		lastTouchYRef.current = e.touches[0].clientY;
-		touchStartXRef.current = e.touches[0].clientX;
-		touchStartYRef.current = e.touches[0].clientY;
+		lastTouchXRef.current = touch.clientX;
+		lastTouchYRef.current = touch.clientY;
+		touchStartXRef.current = touch.clientX;
+		touchStartYRef.current = touch.clientY;
 		velocityRef.current = 0;
 		attachTouchDragListeners();
-	}, [attachTouchDragListeners, draggable]);
+	}, [
+		attachTouchDragListeners,
+		draggable,
+		enabled
+	]);
 	const handleWheel = (0, react.useCallback)((e) => {
-		if (!wheelEnabled) return false;
+		if (!enabled || !wheelEnabled || e.defaultPrevented) return false;
 		const currentContainer = e.currentTarget instanceof HTMLElement ? e.currentTarget : containerRef.current;
 		if (!currentContainer) return false;
 		const ownedDelta = getOwnedWheelDelta(e, currentContainer, isHorizontal, wheelMode);
@@ -645,6 +737,7 @@ var ReactSway = (0, react.forwardRef)(function ReactSway({ ariaLabel = "Scrollab
 		return true;
 	}, [
 		commitPosition,
+		enabled,
 		isHorizontal,
 		pauseAutoScroll,
 		scheduleAutoScrollResume,
@@ -654,7 +747,7 @@ var ReactSway = (0, react.forwardRef)(function ReactSway({ ariaLabel = "Scrollab
 		wrapPosition
 	]);
 	const applyEdgeHoverPoint = (0, react.useCallback)((point) => {
-		if (!edgeHoverScroll) return false;
+		if (!enabled || !edgeHoverScroll) return false;
 		const viewport = containerRef.current?.parentElement ?? containerRef.current;
 		if (!viewport) return false;
 		const visibleInterval = readVisibleEdgeInterval(viewport);
@@ -667,6 +760,7 @@ var ReactSway = (0, react.forwardRef)(function ReactSway({ ariaLabel = "Scrollab
 		return true;
 	}, [
 		edgeHoverScroll,
+		enabled,
 		isHorizontal,
 		normalizedEdgeHoverSize,
 		readVisibleEdgeInterval,
@@ -681,6 +775,9 @@ var ReactSway = (0, react.forwardRef)(function ReactSway({ ariaLabel = "Scrollab
 		externalEdgeHoverLeaseRef.current = false;
 		setEdgeHoverIntensity(0);
 	}, [setEdgeHoverIntensity]);
+	(0, react.useEffect)(() => {
+		if (!edgeHoverScroll) clearEdgeHover();
+	}, [clearEdgeHover, edgeHoverScroll]);
 	(0, react.useImperativeHandle)(ref, () => ({
 		clearEdgeHover,
 		handleEdgeHover,
@@ -700,7 +797,7 @@ var ReactSway = (0, react.forwardRef)(function ReactSway({ ariaLabel = "Scrollab
 	}, [setEdgeHoverIntensity]);
 	(0, react.useEffect)(() => {
 		const currentContainer = containerRef.current;
-		if (!currentContainer) return;
+		if (!currentContainer || !enabled) return;
 		if (draggable) {
 			currentContainer.addEventListener("mousedown", handleMouseDown);
 			currentContainer.addEventListener("touchstart", handleTouchStart, { passive: true });
@@ -738,6 +835,7 @@ var ReactSway = (0, react.forwardRef)(function ReactSway({ ariaLabel = "Scrollab
 		detachMouseDragListeners,
 		detachTouchDragListeners,
 		draggable,
+		enabled,
 		edgeHoverScroll,
 		edgeHoverInputMode,
 		clearEdgeHover,
@@ -748,6 +846,24 @@ var ReactSway = (0, react.forwardRef)(function ReactSway({ ariaLabel = "Scrollab
 		handleWheel,
 		wheelEnabled
 	]);
+	(0, react.useEffect)(() => {
+		if (enabled) return;
+		clearInactivityTimer();
+		clearEdgeHover();
+		detachMouseDragListeners();
+		detachTouchDragListeners();
+		touchInteractionStateRef.current = "idle";
+		setDraggingState(false);
+		velocityRef.current = 0;
+		autoScrollRef.current.active = autoScrollRef.current.desired;
+	}, [
+		clearEdgeHover,
+		clearInactivityTimer,
+		detachMouseDragListeners,
+		detachTouchDragListeners,
+		enabled,
+		setDraggingState
+	]);
 	(0, react.useEffect)(() => {
 		window.addEventListener("resize", scheduleLoopPointRecalculation);
 		return () => {
@@ -796,7 +912,7 @@ var ReactSway = (0, react.forwardRef)(function ReactSway({ ariaLabel = "Scrollab
 		};
 	}, [clearInactivityTimer]);
 	(0, react.useEffect)(() => {
-		if (!isTabActive || isPaused) {
+		if (!enabled || !isTabActive || isPaused) {
 			if (animationFrameRef.current !== null) {
 				cancelAnimationFrame(animationFrameRef.current);
 				animationFrameRef.current = null;
@@ -805,7 +921,7 @@ var ReactSway = (0, react.forwardRef)(function ReactSway({ ariaLabel = "Scrollab
 			return;
 		}
 		lastFrameTimeRef.current = 0;
-		const directionMultiplier = direction === "down" || direction === "right" ? 1 : -1;
+		const directionMultiplier = direction === "away" || direction === "down" || direction === "right" ? 1 : -1;
 		const animate = (currentTime) => {
 			let deltaTime = lastFrameTimeRef.current ? (currentTime - lastFrameTimeRef.current) / MS_PER_FRAME_60FPS : 1;
 			deltaTime = Math.min(deltaTime, MAX_DELTA_TIME);
@@ -816,7 +932,7 @@ var ReactSway = (0, react.forwardRef)(function ReactSway({ ariaLabel = "Scrollab
 			let nextPosition = positionRef.current;
 			const effectiveSpeed = prefersReducedMotion ? normalizedSpeed * REDUCED_MOTION_SPEED_FACTOR : normalizedSpeed;
 			const edgeHoverMultiplier = edgeHoverScroll ? getEdgeHoverVelocityScale(edgeHoverIntensityRef.current, normalizedEdgeHoverSpeedMultiplier) : directionMultiplier;
-			const shouldAutoScroll = (autoScrollRef.current.desired && autoScrollRef.current.active || externalEdgeHoverLeaseRef.current) && !isDraggingRef.current && (!edgeHoverScroll || edgeHoverMultiplier !== 0);
+			const shouldAutoScroll = (autoScrollRef.current.desired && autoScrollRef.current.active || externalEdgeHoverLeaseRef.current) && !isDraggingRef.current && !(isDepth && prefersReducedMotion) && (!edgeHoverScroll || edgeHoverMultiplier !== 0);
 			if (shouldAutoScroll) {
 				const autoScrollDeltaTime = edgeHoverScroll ? Math.min(deltaTime, MAX_EDGE_HOVER_DELTA_TIME) : deltaTime;
 				nextPosition += edgeHoverMultiplier * effectiveSpeed * autoScrollDeltaTime;
@@ -845,6 +961,8 @@ var ReactSway = (0, react.forwardRef)(function ReactSway({ ariaLabel = "Scrollab
 		commitPosition,
 		direction,
 		edgeHoverScroll,
+		enabled,
+		isDepth,
 		isPaused,
 		isTabActive,
 		normalizedFriction,
@@ -877,56 +995,77 @@ var ReactSway = (0, react.forwardRef)(function ReactSway({ ariaLabel = "Scrollab
 		lazyRootMargin,
 		normalizedLazyThreshold
 	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+	return /* @__PURE__ */ react.default.createElement("section", {
 		"aria-label": ariaLabel,
 		className: `react-sway-container scroller-content${className ? ` ${className}` : ""}`,
 		ref: containerRef,
 		style: {
-			cursor: draggable ? isDraggingRef.current ? "grabbing" : "grab" : "default",
+			cursor: enabled && draggable ? isDraggingRef.current ? "grabbing" : "grab" : "default",
 			display: isHorizontal ? "flex" : void 0,
 			flexDirection: isHorizontal ? "row" : void 0,
-			height: isHorizontal ? "100%" : "max-content",
+			height: isHorizontal || isDepth ? "100%" : "max-content",
 			MozUserSelect: "none",
 			msUserSelect: "none",
 			minHeight: isHorizontal ? void 0 : "100%",
-			overflow: "hidden",
+			overflow: isDepth ? "visible" : "hidden",
+			perspective: isDepth ? normalizedDepthPerspective : void 0,
 			overscrollBehavior,
 			pointerEvents: "auto",
 			position: "absolute",
 			touchAction,
 			transform: "translate3d(0, 0, 0)",
+			transformStyle: isDepth ? "preserve-3d" : void 0,
 			userSelect: "none",
 			WebkitUserSelect: "none",
 			width: isHorizontal ? "max-content" : "100%",
-			willChange: "transform",
+			willChange: isDepth ? void 0 : "transform",
 			zIndex: 1
 		},
 		onKeyDown: keyboard ? handleKeyDown : void 0,
-		tabIndex: keyboard ? 0 : void 0,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "content-group original",
-			ref: originalGroupRef,
-			style: isHorizontal ? {
-				display: "flex",
-				flex: "0 0 auto"
-			} : void 0,
-			children
-		}), Array.from({ length: loopSegmentCount - 1 }, (_, duplicateIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
-			"aria-hidden": "true",
-			className: "content-group duplicate",
-			"data-duplicate": "true",
-			inert: true,
-			role: "presentation",
-			style: isHorizontal ? {
-				display: "flex",
-				flex: "0 0 auto",
-				pointerEvents: "none"
-			} : { pointerEvents: "none" },
-			children
-		}, `duplicate-${duplicateIndex}`))]
-	});
+		tabIndex: enabled && keyboard ? 0 : void 0
+	}, /* @__PURE__ */ react.default.createElement("div", {
+		className: "content-group original",
+		ref: originalGroupRef,
+		style: isDepth ? {
+			height: "100%",
+			position: "relative",
+			transformStyle: "preserve-3d"
+		} : isHorizontal ? {
+			display: "flex",
+			flex: "0 0 auto"
+		} : void 0
+	}, isDepth ? depthChildren.map((child, index) => {
+		const { opacity, z } = getDepthItemState(0, index, depthChildren.length, normalizedDepthPerspective, normalizedDepthSpacing);
+		return /* @__PURE__ */ react.default.createElement("div", {
+			className: "react-sway-depth-item",
+			key: typeof child === "object" && "key" in child ? child.key : index,
+			style: {
+				height: 0,
+				left: "50%",
+				opacity,
+				position: "absolute",
+				top: "50%",
+				transform: `translate3d(0, 0, ${z}px)`,
+				width: 0,
+				willChange: "transform, opacity"
+			}
+		}, child);
+	}) : children), Array.from({ length: isDepth ? 0 : loopSegmentCount - 1 }, (_, duplicateIndex) => /* @__PURE__ */ react.default.createElement("aside", {
+		"aria-hidden": "true",
+		className: "content-group duplicate",
+		"data-duplicate": "true",
+		...INERT_ATTRIBUTE,
+		key: `duplicate-${duplicateIndex}`,
+		role: "presentation",
+		style: isHorizontal ? {
+			display: "flex",
+			flex: "0 0 auto",
+			pointerEvents: "none"
+		} : { pointerEvents: "none" }
+	}, children)));
 });
-//#endregion
+exports.DEFAULT_DEPTH_PERSPECTIVE = DEFAULT_DEPTH_PERSPECTIVE;
+exports.DEFAULT_DEPTH_SPACING = DEFAULT_DEPTH_SPACING;
 exports.DEFAULT_EDGE_HOVER_SIZE = DEFAULT_EDGE_HOVER_SIZE;
 exports.DEFAULT_EDGE_HOVER_SPEED_MULTIPLIER = DEFAULT_EDGE_HOVER_SPEED_MULTIPLIER;
 exports.ReactSway = ReactSway;

package/dist/index.d.ts

@@ -2,5 +2,6 @@
  * Public package entrypoint for ReactSway exports.
  */
 export { default as ReactSway } from './ReactSway';
+export { DEFAULT_DEPTH_PERSPECTIVE, DEFAULT_DEPTH_SPACING, } from './depth-position';
 export { DEFAULT_EDGE_HOVER_SIZE, DEFAULT_EDGE_HOVER_SPEED_MULTIPLIER, } from './edge-hover-velocity';
 export type { ReactSwayHandle, ReactSwayProps, SwayAxis, SwayDirection, SwayEdgeHoverInputMode, SwayWheelMode, } from './ReactSway';