r3f-motion 1.0.5 → 1.0.7

package/dist/cjs/index.js

@@ -4,9 +4,29 @@
 var tslib = require('tslib');
 var react = require('react');
 var motion$1 = require('motion');
-var jsxRuntime = require('react/jsx-runtime');
 var fiber = require('@react-three/fiber');
-var three = require('three');
+var THREE = require('three');
+var jsxRuntime = require('react/jsx-runtime');
+var react$1 = require('motion/react');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var THREE__namespace = /*#__PURE__*/_interopNamespaceDefault(THREE);
 
 const PresenceContext = react.createContext(null);
 /**
@@ -249,6 +269,389 @@ function useTap(isStatic, props, options) {
     };
 }
 
+// World-space units per CSS pixel at the given depth from the camera.
+const getWorldPerPixel = (camera, depth, viewportHeight) => {
+    var _a;
+    const ortho = camera;
+    if (ortho.isOrthographicCamera) {
+        return ((ortho.top - ortho.bottom) / (viewportHeight * (ortho.zoom || 1)));
+    }
+    const persp = camera;
+    const fov = ((_a = persp.fov) !== null && _a !== void 0 ? _a : 60) * (Math.PI / 180);
+    return (2 * Math.tan(fov / 2) * depth) / viewportHeight;
+};
+const clampWithElastic = (value, min, max, elastic) => {
+    if (min !== undefined && value < min)
+        return min + (value - min) * elastic;
+    if (max !== undefined && value > max)
+        return max + (value - max) * elastic;
+    return value;
+};
+function useDrag(isStatic, props, options) {
+    const { camera, gl } = fiber.useThree();
+    const { drag, whileDrag, onDragStart, onPointerDown, transition } = props;
+    const { instanceRef, captureInstanceState, buildTargetFromState, animateToTarget, resolveVariant, stopAnimation, } = options;
+    const isDraggingRef = react.useRef(false);
+    const dragStartPointerRef = react.useRef({ x: 0, y: 0 });
+    const dragStartPosRef = react.useRef(new THREE__namespace.Vector3());
+    const cameraRightRef = react.useRef(new THREE__namespace.Vector3());
+    const cameraUpRef = react.useRef(new THREE__namespace.Vector3());
+    const worldPerPixelRef = react.useRef(0);
+    const targetPosRef = react.useRef(new THREE__namespace.Vector3());
+    const lastPosRef = react.useRef(new THREE__namespace.Vector3());
+    const velocityRef = react.useRef(new THREE__namespace.Vector3());
+    const lastDeltaRef = react.useRef(new THREE__namespace.Vector3());
+    const lastTimeRef = react.useRef(0);
+    const preDragStateRef = react.useRef(null);
+    const pointerIdRef = react.useRef(null);
+    const springStateRef = react.useRef(null);
+    const lastFrameTimeRef = react.useRef(0);
+    const propsRef = react.useRef(props);
+    propsRef.current = props;
+    fiber.useFrame(() => {
+        var _a;
+        const instance = instanceRef.current;
+        if (!instance)
+            return;
+        const obj = instance;
+        // Phase 1: dragging — apply the drag target
+        if (isDraggingRef.current) {
+            const t = targetPosRef.current;
+            obj.position.set(t.x, t.y, t.z);
+            return;
+        }
+        // Phase 2: spring (momentum / snap-to-origin)
+        const s = springStateRef.current;
+        if (!s || !s.active)
+            return;
+        const now = performance.now();
+        let dt = (now - lastFrameTimeRef.current) / 1000;
+        if (dt > 0.05)
+            dt = 0.05;
+        if (dt <= 0)
+            dt = 1 / 60;
+        lastFrameTimeRef.current = now;
+        // Sub-step the integrator for stability with stiff springs
+        const subSteps = 4;
+        const subDt = dt / subSteps;
+        for (let i = 0; i < subSteps; i++) {
+            if (s.hasX) {
+                const force = -s.stiffness * (obj.position.x - s.targetX) - s.damping * s.velX;
+                s.velX += force * subDt;
+                obj.position.x += s.velX * subDt;
+            }
+            if (s.hasY) {
+                const force = -s.stiffness * (obj.position.y - s.targetY) - s.damping * s.velY;
+                s.velY += force * subDt;
+                obj.position.y += s.velY * subDt;
+            }
+            if (s.hasZ) {
+                const force = -s.stiffness * (obj.position.z - s.targetZ) - s.damping * s.velZ;
+                s.velZ += force * subDt;
+                obj.position.z += s.velZ * subDt;
+            }
+        }
+        // Rest detection — stop when both speed and offset are tiny
+        const speedSq = s.velX * s.velX + s.velY * s.velY + s.velZ * s.velZ;
+        const offX = s.hasX ? obj.position.x - s.targetX : 0;
+        const offY = s.hasY ? obj.position.y - s.targetY : 0;
+        const offZ = s.hasZ ? obj.position.z - s.targetZ : 0;
+        const offsetSq = offX * offX + offY * offY + offZ * offZ;
+        if (speedSq < 0.0005 && offsetSq < 0.0005) {
+            if (s.hasX)
+                obj.position.x = s.targetX;
+            if (s.hasY)
+                obj.position.y = s.targetY;
+            if (s.hasZ)
+                obj.position.z = s.targetZ;
+            s.active = false;
+            (_a = s.onComplete) === null || _a === void 0 ? void 0 : _a.call(s);
+        }
+    });
+    const handlePointerDown = react.useCallback((event) => {
+        const instance = instanceRef.current;
+        if (!instance)
+            return;
+        event.stopPropagation();
+        // Halt any in-flight motion-library animation (e.g. main `animate` prop
+        // tween that's still running) and any active drag spring.
+        stopAnimation();
+        if (springStateRef.current)
+            springStateRef.current.active = false;
+        if (whileDrag) {
+            preDragStateRef.current = captureInstanceState();
+            const targetValues = typeof whileDrag === "string"
+                ? resolveVariant(whileDrag)
+                : whileDrag;
+            animateToTarget(targetValues, transition || { duration: 0.1 });
+        }
+        const obj = instance;
+        // Capture initial pointer + position. All subsequent moves are computed
+        // as `initialPos + pixelDelta * worldPerPixel` — never re-derived from
+        // the live (potentially-mid-animation) instance position.
+        dragStartPointerRef.current.x = event.nativeEvent.clientX;
+        dragStartPointerRef.current.y = event.nativeEvent.clientY;
+        dragStartPosRef.current.set(obj.position.x, obj.position.y, obj.position.z);
+        targetPosRef.current.copy(dragStartPosRef.current);
+        lastPosRef.current.copy(dragStartPosRef.current);
+        lastDeltaRef.current.set(0, 0, 0);
+        velocityRef.current.set(0, 0, 0);
+        lastTimeRef.current = performance.now();
+        // Compute world-units-per-pixel at the object's perpendicular depth
+        // (distance from camera along its forward axis).
+        const cameraForward = new THREE__namespace.Vector3(0, 0, -1).applyQuaternion(camera.quaternion);
+        const cameraToObj = new THREE__namespace.Vector3().subVectors(dragStartPosRef.current, camera.position);
+        const depth = Math.abs(cameraToObj.dot(cameraForward));
+        const rect = gl.domElement.getBoundingClientRect();
+        worldPerPixelRef.current = getWorldPerPixel(camera, depth, rect.height);
+        // Cache camera basis vectors so screen X/Y maps correctly to world
+        // X/Y/Z even if the camera is tilted.
+        cameraRightRef.current.set(1, 0, 0).applyQuaternion(camera.quaternion);
+        cameraUpRef.current.set(0, 1, 0).applyQuaternion(camera.quaternion);
+        isDraggingRef.current = true;
+        pointerIdRef.current = event.nativeEvent.pointerId;
+        try {
+            gl.domElement.setPointerCapture(event.nativeEvent.pointerId);
+        }
+        catch (_a) {
+            // not all environments support setPointerCapture
+        }
+        onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(event.nativeEvent, {
+            point: { x: event.nativeEvent.clientX, y: event.nativeEvent.clientY },
+            offset: { x: 0, y: 0, z: 0 },
+            delta: { x: 0, y: 0, z: 0 },
+            velocity: { x: 0, y: 0, z: 0 },
+        });
+        onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+        whileDrag,
+        onDragStart,
+        onPointerDown,
+        camera,
+        gl,
+        captureInstanceState,
+        resolveVariant,
+        animateToTarget,
+        stopAnimation,
+        transition,
+        instanceRef,
+    ]);
+    react.useEffect(() => {
+        const handlePointerMove = (event) => {
+            var _a;
+            if (!isDraggingRef.current || event.pointerId !== pointerIdRef.current)
+                return;
+            const instance = instanceRef.current;
+            if (!instance)
+                return;
+            const cur = propsRef.current;
+            const dragAxis = cur.drag;
+            const elasticVal = typeof cur.dragElastic === "number"
+                ? cur.dragElastic
+                : cur.dragElastic === false
+                    ? 0
+                    : 0.5;
+            const constraints = cur.dragConstraints;
+            const pixelDx = event.clientX - dragStartPointerRef.current.x;
+            const pixelDy = event.clientY - dragStartPointerRef.current.y;
+            const scale = worldPerPixelRef.current;
+            let newX = dragStartPosRef.current.x;
+            let newY = dragStartPosRef.current.y;
+            let newZ = dragStartPosRef.current.z;
+            if (dragAxis === "z") {
+                // Vertical screen movement → Z. Cursor down (pixelDy > 0) = closer.
+                newZ = dragStartPosRef.current.z + pixelDy * scale;
+            }
+            else {
+                // Map screen XY to camera-relative world delta.
+                const r = cameraRightRef.current;
+                const u = cameraUpRef.current;
+                const worldDx = r.x * pixelDx * scale + u.x * -pixelDy * scale;
+                const worldDy = r.y * pixelDx * scale + u.y * -pixelDy * scale;
+                const worldDz = r.z * pixelDx * scale + u.z * -pixelDy * scale;
+                if (dragAxis === "x") {
+                    newX = dragStartPosRef.current.x + worldDx;
+                }
+                else if (dragAxis === "y") {
+                    newY = dragStartPosRef.current.y + worldDy;
+                }
+                else {
+                    newX = dragStartPosRef.current.x + worldDx;
+                    newY = dragStartPosRef.current.y + worldDy;
+                    newZ = dragStartPosRef.current.z + worldDz;
+                }
+            }
+            // Constraints with elastic rubber-banding
+            if (constraints) {
+                if (dragAxis !== "y" && dragAxis !== "z") {
+                    newX = clampWithElastic(newX, constraints.left, constraints.right, elasticVal);
+                }
+                if (dragAxis !== "x" && dragAxis !== "z") {
+                    newY = clampWithElastic(newY, constraints.bottom, constraints.top, elasticVal);
+                }
+            }
+            // Velocity tracking (used for momentum on release)
+            const now = performance.now();
+            const dt = (now - lastTimeRef.current) / 1000;
+            if (dt > 0) {
+                const dx = newX - lastPosRef.current.x;
+                const dy = newY - lastPosRef.current.y;
+                const dz = newZ - lastPosRef.current.z;
+                velocityRef.current.set(dx / dt, dy / dt, dz / dt);
+                lastDeltaRef.current.set(dx, dy, dz);
+            }
+            lastTimeRef.current = now;
+            lastPosRef.current.set(newX, newY, newZ);
+            // Stash target — useFrame applies it next R3F frame.
+            targetPosRef.current.set(newX, newY, newZ);
+            const offset = {
+                x: newX - dragStartPosRef.current.x,
+                y: newY - dragStartPosRef.current.y,
+                z: newZ - dragStartPosRef.current.z,
+            };
+            (_a = cur.onDrag) === null || _a === void 0 ? void 0 : _a.call(cur, event, {
+                point: { x: event.clientX, y: event.clientY },
+                offset,
+                delta: {
+                    x: lastDeltaRef.current.x,
+                    y: lastDeltaRef.current.y,
+                    z: lastDeltaRef.current.z,
+                },
+                velocity: {
+                    x: velocityRef.current.x,
+                    y: velocityRef.current.y,
+                    z: velocityRef.current.z,
+                },
+            });
+        };
+        const handlePointerUp = (event) => {
+            var _a, _b;
+            if (!isDraggingRef.current || event.pointerId !== pointerIdRef.current)
+                return;
+            isDraggingRef.current = false;
+            pointerIdRef.current = null;
+            const instance = instanceRef.current;
+            const cur = propsRef.current;
+            // Lock in the final dragged position synchronously. Once useFrame stops
+            // applying the drag target, a still-pending write from the *previous*
+            // momentum animation can land before the new animateToTarget() call
+            // reads instance.position to use as its "from" value — which causes the
+            // new animation to start from the old momentum's path instead of where
+            // the user actually released.
+            if (instance) {
+                const obj = instance;
+                const t = targetPosRef.current;
+                obj.position.set(t.x, t.y, t.z);
+            }
+            // Restore whileDrag visual state
+            if (cur.whileDrag && preDragStateRef.current) {
+                const targetValues = buildTargetFromState(preDragStateRef.current);
+                animateToTarget(targetValues, options.transition || { duration: 0.2 });
+                const dur = ((_a = options.transition) === null || _a === void 0 ? void 0 : _a.duration) || 0.2;
+                setTimeout(() => {
+                    preDragStateRef.current = null;
+                }, dur * 1000);
+            }
+            if (!instance)
+                return;
+            const finalPos = targetPosRef.current;
+            const offset = {
+                x: finalPos.x - dragStartPosRef.current.x,
+                y: finalPos.y - dragStartPosRef.current.y,
+                z: finalPos.z - dragStartPosRef.current.z,
+            };
+            const vel = velocityRef.current;
+            // Read spring tuning from dragTransition (if user provided one).
+            const dt = cur.dragTransition;
+            const userStiffness = typeof (dt === null || dt === void 0 ? void 0 : dt.stiffness) === "number" ? dt.stiffness : undefined;
+            const userDamping = typeof (dt === null || dt === void 0 ? void 0 : dt.damping) === "number" ? dt.damping : undefined;
+            if (cur.dragSnapToOrigin) {
+                lastFrameTimeRef.current = performance.now();
+                springStateRef.current = {
+                    active: true,
+                    targetX: dragStartPosRef.current.x,
+                    targetY: dragStartPosRef.current.y,
+                    targetZ: dragStartPosRef.current.z,
+                    velX: vel.x,
+                    velY: vel.y,
+                    velZ: vel.z,
+                    hasX: true,
+                    hasY: true,
+                    hasZ: true,
+                    stiffness: userStiffness !== null && userStiffness !== void 0 ? userStiffness : 400,
+                    damping: userDamping !== null && userDamping !== void 0 ? userDamping : 40,
+                };
+            }
+            else if (cur.dragMomentum !== false) {
+                const speed = Math.sqrt(Math.pow(vel.x, 2) + Math.pow(vel.y, 2) + Math.pow(vel.z, 2));
+                if (speed > 0.5) {
+                    const coeff = 0.25;
+                    const dragAxis = cur.drag;
+                    const hasX = dragAxis !== "y" && dragAxis !== "z";
+                    const hasY = dragAxis !== "x" && dragAxis !== "z";
+                    const hasZ = dragAxis === "z";
+                    let targetX = hasX ? finalPos.x + vel.x * coeff : finalPos.x;
+                    let targetY = hasY ? finalPos.y + vel.y * coeff : finalPos.y;
+                    const targetZ = hasZ ? finalPos.z + vel.z * coeff : finalPos.z;
+                    const constraints = cur.dragConstraints;
+                    if (constraints) {
+                        if (hasX) {
+                            if (constraints.left !== undefined)
+                                targetX = Math.max(targetX, constraints.left);
+                            if (constraints.right !== undefined)
+                                targetX = Math.min(targetX, constraints.right);
+                        }
+                        if (hasY) {
+                            if (constraints.bottom !== undefined)
+                                targetY = Math.max(targetY, constraints.bottom);
+                            if (constraints.top !== undefined)
+                                targetY = Math.min(targetY, constraints.top);
+                        }
+                    }
+                    lastFrameTimeRef.current = performance.now();
+                    springStateRef.current = {
+                        active: true,
+                        targetX,
+                        targetY,
+                        targetZ,
+                        velX: hasX ? vel.x : 0,
+                        velY: hasY ? vel.y : 0,
+                        velZ: hasZ ? vel.z : 0,
+                        hasX,
+                        hasY,
+                        hasZ,
+                        stiffness: userStiffness !== null && userStiffness !== void 0 ? userStiffness : 200,
+                        damping: userDamping !== null && userDamping !== void 0 ? userDamping : 50,
+                    };
+                }
+            }
+            (_b = cur.onDragEnd) === null || _b === void 0 ? void 0 : _b.call(cur, event, {
+                point: { x: event.clientX, y: event.clientY },
+                offset,
+                delta: {
+                    x: lastDeltaRef.current.x,
+                    y: lastDeltaRef.current.y,
+                    z: lastDeltaRef.current.z,
+                },
+                velocity: { x: vel.x, y: vel.y, z: vel.z },
+            });
+        };
+        window.addEventListener("pointermove", handlePointerMove);
+        window.addEventListener("pointerup", handlePointerUp);
+        return () => {
+            window.removeEventListener("pointermove", handlePointerMove);
+            window.removeEventListener("pointerup", handlePointerUp);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [gl, instanceRef, animateToTarget, buildTargetFromState]);
+    const isDragEnabled = drag !== undefined && drag !== false;
+    if (!isDragEnabled)
+        return {};
+    return { onPointerDown: handlePointerDown };
+}
+
 function createAnimationState() {
     return {
         hasStarted: false,
@@ -533,14 +936,20 @@ function custom(Component) {
             return () => { var _a; return (_a = animationRef.current) === null || _a === void 0 ? void 0 : _a.stop(); };
             // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.isPresent]);
+        const stopAnimation = react.useCallback(() => {
+            var _a;
+            (_a = animationRef.current) === null || _a === void 0 ? void 0 : _a.stop();
+        }, []);
         const gestureProps = {
+            instanceRef,
             captureInstanceState,
             buildTargetFromState,
             animateToTarget,
             resolveVariant,
             transition,
+            stopAnimation,
         };
-        const gestureHandlers = Object.assign(Object.assign({}, useHover(false, props, gestureProps)), useTap(false, props, gestureProps));
+        const gestureHandlers = Object.assign(Object.assign(Object.assign({}, useHover(false, props, gestureProps)), useTap(false, props, gestureProps)), useDrag(false, props, gestureProps));
         const resolvedInitialValues = typeof initial === "string" ? resolveVariant(initial) : initial;
         const element = useRender(Component, Object.assign(Object.assign(Object.assign({}, restProps), gestureHandlers), { children }), ref, instanceRef, resolvedInitialValues);
         const getNextChildIndex = react.useCallback(() => {
@@ -581,11 +990,11 @@ const MotionCamera = (props) => {
         const aspect = size.width / size.height;
         let cam;
         if (type === "perspective") {
-            cam = new three.PerspectiveCamera(fov, aspect, near, far);
+            cam = new THREE.PerspectiveCamera(fov, aspect, near, far);
         }
         else {
             const frustumSize = 10;
-            cam = new three.OrthographicCamera((-frustumSize * aspect) / 2, (frustumSize * aspect) / 2, frustumSize / 2, -frustumSize / 2, near, far);
+            cam = new THREE.OrthographicCamera((-frustumSize * aspect) / 2, (frustumSize * aspect) / 2, frustumSize / 2, -frustumSize / 2, near, far);
         }
         cam.updateProjectionMatrix();
         return cam;
@@ -710,7 +1119,223 @@ function AnimatePresence({ children, mode = "sync", onExitComplete, custom, }) {
     });
 }
 
+const DEFAULT_SPRING = {
+    type: 'spring',
+    stiffness: 600,
+    damping: 100,
+    restDelta: 0.001,
+};
+// Seconds of velocity to project past the release point when snapping —
+// higher value = a flick advances further.
+const VELOCITY_PROJECTION = 0.2;
+// Fraction of slideWidth the user must cross, or minimum velocity (world
+// units/sec) required, to commit to the next slide. Below both thresholds
+// the carousel snaps back to the slot the drag started on.
+const DRAG_THRESHOLD_RATIO = 0.25;
+const FLICK_VELOCITY = 1.0;
+const mod = (n, m) => ((n % m) + m) % m;
+let isDragging = false;
+const CarouselSlotContext = react.createContext(null);
+const useCarouselSlot = () => {
+    const ctx = react.useContext(CarouselSlotContext);
+    if (!ctx)
+        throw new Error('useCarouselSlot must be used inside <Carousel>');
+    return ctx;
+};
+const CarouselSlot = react.memo(({ item, itemWidth, slotRef, visible }) => {
+    const contentRef = react.useRef(null);
+    const coverRef = react.useRef(null);
+    react.useLayoutEffect(() => {
+        const content = contentRef.current;
+        const cover = coverRef.current;
+        if (!content || !cover)
+            return;
+        const box = new THREE.Box3().setFromObject(content);
+        if (box.isEmpty())
+            return;
+        const w = Math.max(box.max.x - box.min.x, itemWidth);
+        const h = box.max.y - box.min.y;
+        cover.geometry.dispose();
+        cover.geometry = new THREE.PlaneGeometry(w, h);
+        cover.position.set((box.max.x + box.min.x) / 2, (box.max.y + box.min.y) / 2, box.max.z + 0.001);
+    }, [itemWidth]);
+    // Dispose the generated geometry on unmount — useLayoutEffect's replacement
+    // logic only disposes the *previous* geometry, not the final one.
+    react.useEffect(() => () => { var _a; (_a = coverRef.current) === null || _a === void 0 ? void 0 : _a.geometry.dispose(); }, []);
+    // No onClick on the cover — the carousel's document-level capture listener
+    // handles click suppression. The cover stays as a drag hit-target so swiping
+    // works on slot regions where user content has gaps.
+    return (jsxRuntime.jsxs("group", { ref: slotRef, children: [jsxRuntime.jsx("group", { ref: contentRef, children: visible ? item : null }), jsxRuntime.jsxs("mesh", { ref: coverRef, children: [jsxRuntime.jsx("planeGeometry", { args: [itemWidth, itemWidth] }), jsxRuntime.jsx("meshBasicMaterial", { transparent: true, opacity: 0, depthWrite: false })] })] }));
+});
+const Carousel = (_a) => {
+    var { items, itemWidth = 1.5, gap = 0.5, defaultValue = 0, transition = DEFAULT_SPRING, onSwitch, onDragStart, onDrag, onDragEnd, renderThreshold, dragThreshold = DRAG_THRESHOLD_RATIO, flickVelocity = FLICK_VELOCITY } = _a, props = tslib.__rest(_a, ["items", "itemWidth", "gap", "defaultValue", "transition", "onSwitch", "onDragStart", "onDrag", "onDragEnd", "renderThreshold", "dragThreshold", "flickVelocity"]);
+    const slideWidth = itemWidth + gap;
+    const count = items.length;
+    // Render twice the items and center on the first item of the second copy.
+    // The first copy lives to the left, so wrap-points sit at ±N*slideWidth
+    // from camera center — well off-screen — instead of ±N*slideWidth/2
+    // where they'd pop in and out at the visible edges.
+    const loopedItems = react.useMemo(() => [...items, ...items], [items]);
+    const slotCount = loopedItems.length;
+    const period = slotCount * slideWidth;
+    const startSlot = count + defaultValue;
+    const groupRef = react.useRef(null);
+    const itemRefs = react.useRef([]);
+    // Slot mount/unmount state — mirrors `ref.visible` but propagates through
+    // React so children that rely on lifecycle (e.g. Drei's <Html>, which
+    // doesn't reliably react to mid-frame `visible` mutations) update cleanly.
+    // Only flips when a slot crosses the threshold, so re-renders are limited
+    // to ~2-4 per swipe instead of every frame.
+    const [visibleMask, setVisibleMask] = react.useState(() => {
+        if (renderThreshold === undefined)
+            return new Array(slotCount).fill(true);
+        const mask = new Array(slotCount).fill(false);
+        for (let i = 0; i < slotCount; i++) {
+            mask[i] = Math.abs(i - startSlot) <= renderThreshold + 0.5;
+        }
+        return mask;
+    });
+    const visibleMaskRef = react.useRef(visibleMask);
+    visibleMaskRef.current = visibleMask;
+    // Single source of truth: a fractional slot index that grows up/down
+    // infinitely as the user navigates. group.position.x = -currIndex * slideWidth
+    // at rest. Snap animations animate currIndex toward integer targets;
+    // useFrame applies it to the group every frame (when not dragging).
+    const currIndex = react$1.useMotionValue(startSlot);
+    const isDraggingRef = react.useRef(false);
+    const dragStartIndexRef = react.useRef(startSlot);
+    const snapAnimRef = react.useRef(null);
+    // performance.now() of the most recent frame in which the carousel was
+    // moving (drag in progress or off-snap). Click handler uses this to
+    // suppress clicks during/just-after motion.
+    const lastMotionAtRef = react.useRef(0);
+    // Wrapped physical slot index (0..slotCount-1) — drives per-slot context so
+    // children can read isActive/distance without the consumer having to lift
+    // state. Updates the moment a snap commits, not while dragging.
+    const [currentSlot, setCurrentSlot] = react.useState(() => mod(startSlot, slotCount));
+    const initial = react.useMemo(() => ({ x: -startSlot * slideWidth }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    const goTo = react.useCallback((slot) => {
+        var _a;
+        onSwitch === null || onSwitch === void 0 ? void 0 : onSwitch(mod(slot, count));
+        setCurrentSlot(mod(slot, slotCount));
+        (_a = snapAnimRef.current) === null || _a === void 0 ? void 0 : _a.stop();
+        snapAnimRef.current = react$1.animate(currIndex, slot, transition);
+    }, [count, slotCount, transition, onSwitch, currIndex]);
+    react.useEffect(() => () => { var _a; return (_a = snapAnimRef.current) === null || _a === void 0 ? void 0 : _a.stop(); }, []);
+    // Document-level capture click listener — fires before R3F's listener (and
+    // any descendant DOM handlers) anywhere in the tree. While the carousel is
+    // moving (or just settled), swallow the event so it never reaches user
+    // content (R3F meshes or HTML portaled by Drei). No-op outside the cooldown
+    // window, so true taps propagate normally.
+    react.useEffect(() => {
+        const onClickCapture = (e) => {
+            if (isDragging) {
+                e.stopImmediatePropagation();
+                e.stopPropagation();
+            }
+        };
+        document.addEventListener('click', onClickCapture, true);
+        return () => document.removeEventListener('click', onClickCapture, true);
+    }, []);
+    // Drag start: stop any in-flight snap and capture the slot we started on
+    // so an under-threshold release can elastic back to it.
+    const handleDragStart = react.useCallback(() => {
+        var _a;
+        isDragging = false;
+        isDraggingRef.current = true;
+        lastMotionAtRef.current = performance.now();
+        dragStartIndexRef.current = Math.round(currIndex.get());
+        (_a = snapAnimRef.current) === null || _a === void 0 ? void 0 : _a.stop();
+        snapAnimRef.current = null;
+        onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart();
+    }, [currIndex, onDragStart]);
+    const handleDragEnd = react.useCallback((_, info) => {
+        isDraggingRef.current = false;
+        const group = groupRef.current;
+        if (!group)
+            return;
+        // Resync the motion value to where use-drag actually locked the position
+        // — the next useFrame will use this same value, so there's no visible
+        // jump between the dragged position and the start of the snap tween.
+        const releasedX = group.position.x;
+        const releasedIndex = -releasedX / slideWidth;
+        currIndex.jump(releasedIndex);
+        const startIndex = dragStartIndexRef.current;
+        const offsetIndex = releasedIndex - startIndex;
+        const overThreshold = Math.abs(offsetIndex) > dragThreshold;
+        const overVelocity = Math.abs(info.velocity.x) > flickVelocity;
+        if (!overThreshold && !overVelocity) {
+            goTo(startIndex);
+            return;
+        }
+        const projectedX = releasedX + info.velocity.x * VELOCITY_PROJECTION;
+        const targetSlot = Math.round(-projectedX / slideWidth);
+        goTo(targetSlot);
+        onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(info);
+    }, [slideWidth, goTo, currIndex, dragThreshold, flickVelocity, onDragEnd]);
+    // Drive position from currIndex unless the user is dragging — during drag
+    // use-drag writes to group.position.x directly (and dragMomentum=false
+    // ensures it stops writing the moment the pointer lifts, so there's no
+    // race with the snap animation).
+    fiber.useFrame(() => {
+        const group = groupRef.current;
+        if (!group)
+            return;
+        if (!isDraggingRef.current) {
+            group.position.x = -currIndex.get() * slideWidth;
+        }
+        const groupX = group.position.x;
+        const snapDelta = Math.abs(groupX - Math.round(groupX / slideWidth) * slideWidth);
+        if (isDraggingRef.current || snapDelta > 0.001) {
+            lastMotionAtRef.current = performance.now();
+            isDragging = snapDelta > 0.001;
+        }
+        let nextMask = null;
+        for (let i = 0; i < slotCount; i++) {
+            const ref = itemRefs.current[i];
+            if (!ref)
+                continue;
+            const k = Math.round((-groupX - i * slideWidth) / period);
+            ref.position.x = i * slideWidth + k * period;
+            // +0.5 margin so the leading-edge slot fades in the moment the trailing
+            // one fades out — keeps the loop seamless mid-drag instead of waiting
+            // for snap to settle on an integer slot.
+            const slotDist = (groupX + ref.position.x) / slideWidth;
+            const shouldBeVisible = renderThreshold ? Math.abs(slotDist) <= renderThreshold + 0.5 : true;
+            ref.visible = shouldBeVisible;
+            if (visibleMaskRef.current[i] !== shouldBeVisible) {
+                if (!nextMask)
+                    nextMask = visibleMaskRef.current.slice();
+                nextMask[i] = shouldBeVisible;
+            }
+        }
+        if (nextMask) {
+            visibleMaskRef.current = nextMask;
+            setVisibleMask(nextMask);
+        }
+    });
+    return (jsxRuntime.jsx(motion.group, Object.assign({ ref: groupRef, drag: "x", dragMomentum: false, initial: initial }, props, { onDragStart: handleDragStart, onDragEnd: handleDragEnd, onDrag: (_e, info) => onDrag === null || onDrag === void 0 ? void 0 : onDrag(info), children: loopedItems.map((item, i) => {
+            var _a;
+            const raw = i - currentSlot;
+            const halfWrap = (((raw + slotCount / 2) % slotCount) + slotCount) % slotCount;
+            const distance = Math.abs(halfWrap - slotCount / 2);
+            return (jsxRuntime.jsx(CarouselSlotContext.Provider, { value: {
+                    slotIndex: i,
+                    itemIndex: i % count,
+                    distance,
+                    isActive: distance === 0,
+                    isNearby: distance <= 1,
+                    currIndex,
+                }, children: jsxRuntime.jsx(CarouselSlot, { item: item, itemWidth: itemWidth, slotRef: (el) => { itemRefs.current[i] = el; }, visible: (_a = visibleMask[i]) !== null && _a !== void 0 ? _a : false }) }, `carouselItem-${i}`));
+        }) })));
+};
+var index = react.memo(Carousel);
+
 exports.AnimatePresence = AnimatePresence;
+exports.Carousel = index;
 exports.MotionCamera = MotionCamera;
 exports.motion = motion;
+exports.useCarouselSlot = useCarouselSlot;
 exports.usePresence = usePresence;