react-sway 0.4.2 → 0.5.0

package/dist/index.js

@@ -1,9 +1,25 @@
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/edge-hover-velocity.ts
-/**
-* Defines the bounded spatial mapping from edge-hover depth to Sway velocity.
-*/
+import React, { Children, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, version } from "react";
+// 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. */
@@ -49,10 +65,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));
 }
 /**
@@ -78,9 +94,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;
@@ -114,8 +128,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) {
@@ -125,11 +141,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. */
@@ -160,6 +172,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(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;
@@ -179,11 +195,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
@@ -193,8 +209,14 @@ function getVisibleEdgeInterval(rect, isHorizontal) {
 * </ReactSway>
 * ```
 */
-var ReactSway = 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 = useMemo(() => axis ?? (direction === "left" || direction === "right" ? "horizontal" : "vertical"), [axis, direction]) === "horizontal";
+var ReactSway = 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 = 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 = useMemo(() => Children.toArray(children), [children]);
+	const enabled = active && (!isDepth || depthChildren.length > 0);
+	const normalizedDepthPerspective = normalizeDepthLength(depthPerspective, 800);
+	const normalizedDepthSpacing = normalizeDepthLength(depthSpacing, 420);
 	const normalizedEdgeHoverSize = useMemo(() => Number.isFinite(edgeHoverSize) ? Math.max(1, edgeHoverSize) : 96, [edgeHoverSize]);
 	const normalizedEdgeHoverSpeedMultiplier = useMemo(() => normalizeEdgeHoverSpeedMultiplier(edgeHoverSpeedMultiplier), [edgeHoverSpeedMultiplier]);
 	const normalizedFriction = useMemo(() => Number.isFinite(friction) ? Math.min(Math.max(friction, 0), 1) : DEFAULT_FRICTION, [friction]);
@@ -202,17 +224,22 @@ var ReactSway = forwardRef(function ReactSway({ ariaLabel = "Scrollable content"
 	const normalizedResumeDelay = useMemo(() => Number.isFinite(resumeDelay) ? Math.max(0, resumeDelay) : DEFAULT_RESUME_DELAY, [resumeDelay]);
 	const normalizedSpeed = useMemo(() => Number.isFinite(speed) ? Math.max(0, speed) : DEFAULT_SPEED, [speed]);
 	const touchAction = 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] = useState(false);
 	const [isTabActive, setIsTabActive] = useState(() => typeof document === "undefined" || !document.hidden);
 	const [loopSegmentCount, setLoopSegmentCount] = useState(MIN_LOOP_SEGMENTS);
-	const [prefersReducedMotion, setPrefersReducedMotion] = useState(() => {
+	const [systemReducedMotion, setSystemReducedMotion] = useState(() => {
 		if (typeof window === "undefined") return false;
 		return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 	});
+	const prefersReducedMotion = systemReducedMotion || reducedMotion;
 	const animationFrameRef = useRef(null);
 	const animationLoopRef = useRef(null);
 	const autoScrollRef = useRef({
@@ -259,7 +286,7 @@ var ReactSway = forwardRef(function ReactSway({ ariaLabel = "Scrollable content"
 		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 () => {
@@ -299,11 +326,28 @@ var ReactSway = forwardRef(function ReactSway({ ariaLabel = "Scrollable content"
 	}, [isHorizontal]);
 	const renderPosition = 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 = useCallback((nextPosition) => {
 		if (positionRef.current === nextPosition) return;
 		positionRef.current = nextPosition;
@@ -324,11 +368,14 @@ var ReactSway = forwardRef(function ReactSway({ ariaLabel = "Scrollable content"
 	}, [draggable]);
 	const recalculateLoopPoint = 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 = {
@@ -341,7 +388,13 @@ var ReactSway = forwardRef(function ReactSway({ ariaLabel = "Scrollable content"
 		setLoopSegmentCount((previousLoopSegmentCount) => previousLoopSegmentCount === nextLoopSegmentCount ? previousLoopSegmentCount : nextLoopSegmentCount);
 		loopPointRef.current = nextLoopPoint;
 		renderPosition(positionRef.current);
-	}, [isHorizontal, renderPosition]);
+	}, [
+		depthChildren.length,
+		isDepth,
+		isHorizontal,
+		normalizedDepthSpacing,
+		renderPosition
+	]);
 	useEffect(() => {
 		autoScrollRef.current.desired = autoScroll;
 		if (!autoScroll) {
@@ -366,6 +419,7 @@ var ReactSway = forwardRef(function ReactSway({ ariaLabel = "Scrollable content"
 		scheduleLoopPointRecalculation();
 	}, [
 		children,
+		isDepth,
 		isHorizontal,
 		scheduleLoopPointRecalculation
 	]);
@@ -420,7 +474,14 @@ var ReactSway = forwardRef(function ReactSway({ ariaLabel = "Scrollable content"
 		touchDragListenerCleanupRef.current = null;
 	}, []);
 	const handleKeyDown = 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();
@@ -467,18 +528,19 @@ var ReactSway = forwardRef(function ReactSway({ ariaLabel = "Scrollable content"
 				velocityRef.current = 0;
 				pauseAutoScroll();
 				scheduleAutoScrollResume();
-				break;
-			default: break;
 		}
 		startAnimationLoop();
 	}, [
 		commitPosition,
+		enabled,
 		isHorizontal,
 		keyboard,
 		pauseAutoScroll,
+		prefersReducedMotion,
 		scheduleAutoScrollResume,
 		startAnimationLoop,
-		togglePause
+		togglePause,
+		wrapPosition
 	]);
 	const handleMouseMove = useCallback((e) => {
 		if (!isDraggingRef.current) return;
@@ -536,7 +598,7 @@ var ReactSway = forwardRef(function ReactSway({ ariaLabel = "Scrollable content"
 		handleMouseUp
 	]);
 	const handleMouseDown = useCallback((e) => {
-		if (!draggable) return;
+		if (!enabled || !draggable || e.button !== 0 || isInteractiveTarget(e.target)) return;
 		e.preventDefault();
 		containerRef.current?.focus();
 		setDraggingState(true);
@@ -549,6 +611,7 @@ var ReactSway = forwardRef(function ReactSway({ ariaLabel = "Scrollable content"
 	}, [
 		attachMouseDragListeners,
 		draggable,
+		enabled,
 		pauseAutoScroll,
 		setDraggingState,
 		startAnimationLoop
@@ -572,6 +635,7 @@ var ReactSway = forwardRef(function ReactSway({ ariaLabel = "Scrollable content"
 		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;
@@ -616,18 +680,24 @@ var ReactSway = forwardRef(function ReactSway({ ariaLabel = "Scrollable content"
 		handleTouchMove
 	]);
 	const handleTouchStart = 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 = 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);
@@ -644,6 +714,7 @@ var ReactSway = forwardRef(function ReactSway({ ariaLabel = "Scrollable content"
 		return true;
 	}, [
 		commitPosition,
+		enabled,
 		isHorizontal,
 		pauseAutoScroll,
 		scheduleAutoScrollResume,
@@ -653,7 +724,7 @@ var ReactSway = forwardRef(function ReactSway({ ariaLabel = "Scrollable content"
 		wrapPosition
 	]);
 	const applyEdgeHoverPoint = 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);
@@ -666,6 +737,7 @@ var ReactSway = forwardRef(function ReactSway({ ariaLabel = "Scrollable content"
 		return true;
 	}, [
 		edgeHoverScroll,
+		enabled,
 		isHorizontal,
 		normalizedEdgeHoverSize,
 		readVisibleEdgeInterval,
@@ -680,6 +752,9 @@ var ReactSway = forwardRef(function ReactSway({ ariaLabel = "Scrollable content"
 		externalEdgeHoverLeaseRef.current = false;
 		setEdgeHoverIntensity(0);
 	}, [setEdgeHoverIntensity]);
+	useEffect(() => {
+		if (!edgeHoverScroll) clearEdgeHover();
+	}, [clearEdgeHover, edgeHoverScroll]);
 	useImperativeHandle(ref, () => ({
 		clearEdgeHover,
 		handleEdgeHover,
@@ -699,7 +774,7 @@ var ReactSway = forwardRef(function ReactSway({ ariaLabel = "Scrollable content"
 	}, [setEdgeHoverIntensity]);
 	useEffect(() => {
 		const currentContainer = containerRef.current;
-		if (!currentContainer) return;
+		if (!currentContainer || !enabled) return;
 		if (draggable) {
 			currentContainer.addEventListener("mousedown", handleMouseDown);
 			currentContainer.addEventListener("touchstart", handleTouchStart, { passive: true });
@@ -737,6 +812,7 @@ var ReactSway = forwardRef(function ReactSway({ ariaLabel = "Scrollable content"
 		detachMouseDragListeners,
 		detachTouchDragListeners,
 		draggable,
+		enabled,
 		edgeHoverScroll,
 		edgeHoverInputMode,
 		clearEdgeHover,
@@ -747,6 +823,24 @@ var ReactSway = forwardRef(function ReactSway({ ariaLabel = "Scrollable content"
 		handleWheel,
 		wheelEnabled
 	]);
+	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
+	]);
 	useEffect(() => {
 		window.addEventListener("resize", scheduleLoopPointRecalculation);
 		return () => {
@@ -795,7 +889,7 @@ var ReactSway = forwardRef(function ReactSway({ ariaLabel = "Scrollable content"
 		};
 	}, [clearInactivityTimer]);
 	useEffect(() => {
-		if (!isTabActive || isPaused) {
+		if (!enabled || !isTabActive || isPaused) {
 			if (animationFrameRef.current !== null) {
 				cancelAnimationFrame(animationFrameRef.current);
 				animationFrameRef.current = null;
@@ -804,7 +898,7 @@ var ReactSway = forwardRef(function ReactSway({ ariaLabel = "Scrollable content"
 			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);
@@ -815,7 +909,7 @@ var ReactSway = forwardRef(function ReactSway({ ariaLabel = "Scrollable content"
 			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;
@@ -844,6 +938,8 @@ var ReactSway = forwardRef(function ReactSway({ ariaLabel = "Scrollable content"
 		commitPosition,
 		direction,
 		edgeHoverScroll,
+		enabled,
+		isDepth,
 		isPaused,
 		isTabActive,
 		normalizedFriction,
@@ -876,54 +972,73 @@ var ReactSway = forwardRef(function ReactSway({ ariaLabel = "Scrollable content"
 		lazyRootMargin,
 		normalizedLazyThreshold
 	]);
-	return /* @__PURE__ */ jsxs("section", {
+	return /* @__PURE__ */ React.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__ */ 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__ */ 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.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.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.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
-export { DEFAULT_EDGE_HOVER_SIZE, DEFAULT_EDGE_HOVER_SPEED_MULTIPLIER, ReactSway };
+export { DEFAULT_DEPTH_PERSPECTIVE, DEFAULT_DEPTH_SPACING, DEFAULT_EDGE_HOVER_SIZE, DEFAULT_EDGE_HOVER_SPEED_MULTIPLIER, ReactSway };

package/package.json

@@ -6,7 +6,7 @@
   "bugs": {
     "url": "https://github.com/lafittemehdy/sway/issues"
   },
-  "description": "A React component for smooth infinite scrolling, designed for creating engaging, continuous content streams with minimal configuration.",
+  "description": "Infinite horizontal, vertical, and perspective depth scrolling for React, with automatic motion and accessible manual interactions.",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -16,18 +16,18 @@
     }
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.2",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "eslint": "^10.8.0",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "eslint": "^10.14.0",
     "eslint-plugin-react-hooks": "^7.1.1",
-    "jsdom": "^29.1.1",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
-    "typescript": "^6.0.3",
-    "vite": "^8.1.5",
-    "vitest": "^4.1.10"
+    "jsdom": "^31.0.0",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "typescript": "~6.0.3",
+    "vite": "^8.3.6",
+    "vitest": "^5.1.0"
   },
   "files": [
     "CHANGELOG.md",
@@ -37,9 +37,11 @@
   "keywords": [
     "content-stream",
     "continuous-scroll",
+    "depth-scroll",
     "frontend",
     "infinite-scroll",
     "javascript",
+    "perspective",
     "react",
     "react-component",
     "scroller",
@@ -74,5 +76,5 @@
   },
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "0.4.2"
+  "version": "0.5.0"
 }