@kitlangton/solid-motion 0.1.0 → 0.2.1

package/dist/source/gestures/drag/VisualElementDragControls.js

@@ -1,8 +1,7 @@
-import { addValueToWillChange, animateMotionValue, calcLength, convertBoundingBoxToBox, convertBoxToBoundingBox, createBox, eachAxis, frame, cancelFrame, measurePageBox, mixNumber, percent, setDragLock, } from "motion-dom";
+import { addValueToWillChange, animateMotionValue, calcLength, convertBoundingBoxToBox, convertBoxToBoundingBox, createBox, eachAxis, frame, isElementTextInput, cancelFrame, measurePageBox, mixNumber, percent, resize, setDragLock, } from "motion-dom";
 import { invariant } from "motion-utils";
 import { addDomEvent } from "motion-dom";
 import { addPointerEvent } from "../../events/add-pointer-event";
-import { extractEventInfo } from "../../events/event-info";
 import { getContextWindow } from "../../utils/get-context-window";
 import { isRefObject } from "../../utils/is-ref-object";
 import { PanSession } from "../pan/PanSession";
@@ -41,21 +40,11 @@ export class VisualElementDragControls {
         if (presenceContext && presenceContext.isPresent === false)
             return;
         const onSessionStart = (event) => {
-            // Stop or pause animations based on context:
-            // - snapToCursor: stop because we'll set new position values
-            // - otherwise: pause to allow resume if no drag starts (for constraint animations)
-            if (snapToCursor) {
-                this.stopAnimation();
-                this.snapToCursor(extractEventInfo(event).point);
-            }
-            else {
-                this.pauseAnimation();
-            }
+            if (snapToCursor)
+                this.snapToCursor(event);
+            this.stopAnimation();
         };
         const onStart = (event, info) => {
-            // Stop any paused animation so motion values reflect true current position
-            // (pauseAnimation was called in onSessionStart to allow resume if no drag started)
-            this.stopAnimation();
             // Attempt to grab the global drag gesture lock - maybe make this part of PanSession
             const { drag, dragPropagation, onDragStart } = this.getProps();
             if (drag && !dragPropagation) {
@@ -97,7 +86,7 @@ export class VisualElementDragControls {
             });
             // Fire onDragStart event
             if (onDragStart) {
-                frame.postRender(() => onDragStart(event, info));
+                frame.update(() => onDragStart(event, info), false, true);
             }
             addValueToWillChange(this.visualElement, "transform");
             const { animationState } = this.visualElement;
@@ -134,7 +123,9 @@ export class VisualElementDragControls {
              * This must fire after the render call as it might trigger a state
              * change which itself might trigger a layout update.
              */
-            onDrag && onDrag(event, info);
+            if (onDrag) {
+                frame.update(() => onDrag(event, info), false, true);
+            }
         };
         const onSessionEnd = (event, info) => {
             this.latestPointerEvent = event;
@@ -143,8 +134,12 @@ export class VisualElementDragControls {
             this.latestPointerEvent = null;
             this.latestPanInfo = null;
         };
-        const resumeAnimation = () => eachAxis((axis) => this.getAnimationState(axis) === "paused" &&
-            this.getAxisMotionValue(axis).animation?.play());
+        const resumeAnimation = () => {
+            const { dragSnapToOrigin: snap } = this.getProps();
+            if (snap || this.constraints) {
+                this.startAnimation({ x: 0, y: 0 });
+            }
+        };
         const { dragSnapToOrigin } = this.getProps();
         this.panSession = new PanSession(originEvent, {
             onSessionStart,
@@ -246,9 +241,12 @@ export class VisualElementDragControls {
         this.elastic = resolveDragElastic(dragElastic);
         /**
          * If we're outputting to external MotionValues, we want to rebase the measured constraints
-         * from viewport-relative to component-relative.
+         * from viewport-relative to component-relative. This only applies to relative (non-ref)
+         * constraints, as ref-based constraints from calcViewportConstraints are already in the
+         * correct coordinate space for the motion value transform offset.
          */
         if (prevConstraints !== this.constraints &&
+            !isRefObject(dragConstraints) &&
             layout &&
             this.constraints &&
             !this.hasMutatedConstraints) {
@@ -270,6 +268,20 @@ export class VisualElementDragControls {
         // TODO
         if (!projection || !projection.layout)
             return false;
+        /**
+         * Refresh the root scroll offset so the constraint's viewport box
+         * translates to correct page coordinates. The scroll captured at
+         * drag mount can be stale if the document was scrolled afterwards —
+         * e.g. via the browser restoring scroll on refresh, or an ancestor
+         * layout effect running after this element's mount (#2829).
+         *
+         * Clear the cached scroll first so `updateScroll` bypasses its
+         * per-animationId cache and re-reads the live value.
+         */
+        if (projection.root) {
+            projection.root.scroll = undefined;
+            projection.root.updateScroll();
+        }
         const constraintsBox = measurePageBox(constraintsElement, projection.root, this.visualElement.getTransformPagePoint());
         let measuredConstraints = calcViewportConstraints(projection.layout.layoutBox, constraintsBox);
         /**
@@ -293,7 +305,8 @@ export class VisualElementDragControls {
                 return;
             }
             let transition = (constraints && constraints[axis]) || {};
-            if (dragSnapToOrigin)
+            if (dragSnapToOrigin === true ||
+                dragSnapToOrigin === axis)
                 transition = { min: 0, max: 0 };
             /**
              * Overdamp the boundary spring if `dragElastic` is disabled. There's still a frame
@@ -330,12 +343,6 @@ export class VisualElementDragControls {
     stopAnimation() {
         eachAxis((axis) => this.getAxisMotionValue(axis).stop());
     }
-    pauseAnimation() {
-        eachAxis((axis) => this.getAxisMotionValue(axis).animation?.pause());
-    }
-    getAnimationState(axis) {
-        return this.getAxisMotionValue(axis).animation?.state;
-    }
     /**
      * Drag works differently depending on which props are provided.
      *
@@ -348,29 +355,23 @@ export class VisualElementDragControls {
         const externalMotionValue = props[dragKey];
         return externalMotionValue
             ? externalMotionValue
-            : this.visualElement.getValue(axis, (props.initial
-                ? props.initial[axis]
-                : undefined) || 0);
+            : this.visualElement.getValue(axis, this.visualElement.latestValues[axis] ?? 0);
     }
-    snapToCursor(point) {
+    /**
+     * Measure the live box - projection.layout may or may not include the
+     * drag transform, depending on when it was measured.
+     */
+    snapToCursor({ clientX, clientY }) {
+        const { drag } = this.getProps();
+        const point = { x: clientX, y: clientY };
+        const cursor = this.visualElement.getTransformPagePoint()?.(point) || point;
+        const box = this.visualElement.measureViewportBox();
         eachAxis((axis) => {
-            const { drag } = this.getProps();
-            // If we're not dragging this axis, do an early return.
             if (!shouldDrag(axis, drag, this.currentDirection))
                 return;
-            const { projection } = this.visualElement;
             const axisValue = this.getAxisMotionValue(axis);
-            if (projection && projection.layout) {
-                const { min, max } = projection.layout.layoutBox[axis];
-                /**
-                 * The layout measurement includes the current transform value,
-                 * so we need to add it back to get the correct snap position.
-                 * This fixes an issue where elements with initial coordinates
-                 * would snap to the wrong position on the first drag.
-                 */
-                const current = axisValue.get() || 0;
-                axisValue.set(point[axis] - mixNumber(min, max, 0.5) + current);
-            }
+            const { min, max } = box[axis];
+            axisValue.set((axisValue.get() || 0) + cursor[axis] - mixNumber(min, max, 0.5));
         });
     }
     /**
@@ -394,13 +395,11 @@ export class VisualElementDragControls {
          * Record the relative position of the dragged element relative to the
          * constraints box and save as a progress value.
          */
+        const constraints = this.constraints;
         const boxProgress = { x: 0, y: 0 };
         eachAxis((axis) => {
-            const axisValue = this.getAxisMotionValue(axis);
-            if (axisValue && this.constraints !== false) {
-                const latest = axisValue.get();
-                boxProgress[axis] = calcOrigin({ min: latest, max: latest }, this.constraints[axis]);
-            }
+            const latest = this.getAxisMotionValue(axis).get();
+            boxProgress[axis] = calcOrigin({ min: latest, max: latest }, constraints[axis]);
         });
         /**
          * Update the layout of this element and resolve the latest drag constraints
@@ -411,21 +410,36 @@ export class VisualElementDragControls {
             : "none";
         projection.root && projection.root.updateScroll();
         projection.updateLayout();
+        /**
+         * Reset constraints so resolveConstraints() will recalculate them
+         * with the freshly measured layout rather than returning the cached value.
+         */
+        this.constraints = false;
         this.resolveConstraints();
         /**
          * For each axis, calculate the current progress of the layout axis
          * within the new constraints.
          */
         eachAxis((axis) => {
-            if (!shouldDrag(axis, drag, null))
+            const axisValue = this.getAxisMotionValue(axis);
+            /**
+             * An element resting at its origin has no offset to preserve,
+             * and re-projecting 0 into the new constraints would move it.
+             */
+            if (!shouldDrag(axis, drag, null) || !axisValue.get())
                 return;
             /**
              * Calculate a new transform based on the previous box progress
              */
-            const axisValue = this.getAxisMotionValue(axis);
             const { min, max } = this.constraints[axis];
             axisValue.set(mixNumber(min, max, boxProgress[axis]));
         });
+        /**
+         * Flush the updated transform to the DOM synchronously to prevent
+         * a visual flash at the element's CSS layout position (0,0) when
+         * the transform was stripped for measurement.
+         */
+        this.visualElement.render();
     }
     addListeners() {
         if (!this.visualElement.current)
@@ -439,20 +453,32 @@ export class VisualElementDragControls {
             const { drag, dragListener = true } = this.getProps();
             const target = event.target;
             /**
-             * Allow dragging from buttons/links (e.g. carousel items), while
-             * preserving text editing and native input interactions.
+             * Only block drag if clicking on a text input child element
+             * (input, textarea, select, contenteditable) where users might
+             * want to select text or interact with the control.
+             *
+             * Buttons and links don't block drag since they don't have
+             * click-and-move actions of their own.
              */
-            const isClickingTextInputChild = target !== element &&
-                (Boolean(target.closest("input, textarea, select")) ||
-                    (target instanceof HTMLElement && target.isContentEditable));
+            const isClickingTextInputChild = target !== element && isElementTextInput(target);
             if (drag && dragListener && !isClickingTextInputChild) {
                 this.start(event);
             }
         });
+        /**
+         * If using ref-based constraints, observe both the draggable element
+         * and the constraint container for size changes via ResizeObserver.
+         * Setup is deferred because dragConstraints.current is null when
+         * addListeners first runs (React hasn't committed the ref yet).
+         */
+        let stopResizeObservers;
         const measureDragConstraints = () => {
             const { dragConstraints } = this.getProps();
             if (isRefObject(dragConstraints) && dragConstraints.current) {
                 this.constraints = this.resolveRefConstraints();
+                if (!stopResizeObservers) {
+                    stopResizeObservers = startResizeObservers(element, dragConstraints.current, () => this.scalePositionWithinConstraints());
+                }
             }
         };
         const { projection } = this.visualElement;
@@ -489,6 +515,7 @@ export class VisualElementDragControls {
             stopPointerListener();
             stopMeasureLayoutListener();
             stopLayoutUpdateListener && stopLayoutUpdateListener();
+            stopResizeObservers && stopResizeObservers();
         };
     }
     getProps() {
@@ -505,6 +532,24 @@ export class VisualElementDragControls {
         };
     }
 }
+function skipFirstCall(callback) {
+    let isFirst = true;
+    return () => {
+        if (isFirst) {
+            isFirst = false;
+            return;
+        }
+        callback();
+    };
+}
+function startResizeObservers(element, constraintsElement, onResize) {
+    const stopElement = resize(element, skipFirstCall(onResize));
+    const stopContainer = resize(constraintsElement, skipFirstCall(onResize));
+    return () => {
+        stopElement();
+        stopContainer();
+    };
+}
 function shouldDrag(direction, drag, currentDirection) {
     return ((drag === true || drag === direction) &&
         (currentDirection === null || currentDirection === direction));

package/dist/source/gestures/drag/utils/constraints.js

@@ -82,7 +82,7 @@ export function calcViewportConstraints(layoutBox, constraintsBox) {
 }
 /**
  * Calculate a transform origin relative to the source axis, between 0-1, that results
- * in an asthetically pleasing scale/transform needed to project from source to target.
+ * in an aesthetically pleasing scale/transform needed to project from source to target.
  */
 export function calcOrigin(source, target) {
     let origin = 0.5;

package/dist/source/gestures/pan/PanSession.js

@@ -1,4 +1,4 @@
-import { cancelFrame, frame, frameData, isPrimaryPointer } from "motion-dom";
+import { cancelFrame, frame, frameData, isPrimaryPointer, time, } from "motion-dom";
 import { millisecondsToSeconds, pipe, secondsToMilliseconds, } from "motion-utils";
 import { addPointerEvent } from "../../events/add-pointer-event";
 import { extractEventInfo } from "../../events/event-info";
@@ -25,6 +25,12 @@ export class PanSession {
          * @internal
          */
         this.lastMoveEventInfo = null;
+        /**
+         * Raw (untransformed) event info, re-transformed each frame
+         * so transformPagePoint sees the current parent matrix.
+         * @internal
+         */
+        this.lastRawMoveEventInfo = null;
         /**
          * @internal
          */
@@ -34,7 +40,7 @@ export class PanSession {
          */
         this.removeListeners = () => { };
         /**
-         * For determining if an animation should resume after it is interupted
+         * For determining if an animation should resume after it is interrupted
          *
          * @internal
          */
@@ -68,6 +74,12 @@ export class PanSession {
         this.updatePoint = () => {
             if (!(this.lastMoveEvent && this.lastMoveEventInfo))
                 return;
+            this.hasPendingMove = false;
+            // Re-transform raw point through current transformPagePoint so
+            // animated parent transforms (e.g. rotation) are picked up each frame
+            if (this.lastRawMoveEventInfo) {
+                this.lastMoveEventInfo = transformPoint(this.lastRawMoveEventInfo, this.transformPagePoint);
+            }
             const info = getPanInfo(this.lastMoveEventInfo, this.history);
             const isPanStarted = this.startEvent !== null;
             // Only start panning if the offset is larger than 3 pixels. If we make it
@@ -77,8 +89,7 @@ export class PanSession {
             if (!isPanStarted && !isDistancePastThreshold)
                 return;
             const { point } = info;
-            const { timestamp } = frameData;
-            this.history.push({ ...point, timestamp });
+            this.history.push({ ...point, timestamp: time.now() });
             const { onStart, onMove } = this.handlers;
             if (!isPanStarted) {
                 onStart && onStart(this.lastMoveEvent, info);
@@ -88,11 +99,16 @@ export class PanSession {
         };
         this.handlePointerMove = (event, info) => {
             this.lastMoveEvent = event;
+            this.lastRawMoveEventInfo = info;
             this.lastMoveEventInfo = transformPoint(info, this.transformPagePoint);
+            this.hasPendingMove = true;
             // Throttle mouse move event to once per frame
             frame.update(this.updatePoint, true);
         };
         this.handlePointerUp = (event, info) => {
+            // Browsers flush a coalesced pointermove immediately before
+            // pointerup, so the final move can still be waiting for a frame.
+            this.hasPendingMove && this.updatePoint();
             this.end();
             const { onEnd, onSessionEnd, resumeAnimation } = this.handlers;
             // Resume animation if dragSnapToOrigin is set OR if no drag started (user just clicked)
@@ -126,7 +142,11 @@ export class PanSession {
         const { onSessionStart } = handlers;
         onSessionStart &&
             onSessionStart(event, getPanInfo(initialInfo, this.history));
-        this.removeListeners = pipe(addPointerEvent(this.contextWindow, "pointermove", this.handlePointerMove), addPointerEvent(this.contextWindow, "pointerup", this.handlePointerUp), addPointerEvent(this.contextWindow, "pointercancel", this.handlePointerUp));
+        // Listen in the capture phase so a descendant calling
+        // stopPropagation() (e.g. in its own pointerup handler) can't
+        // prevent the gesture from ending. See #2794.
+        const eventOptions = { passive: true, capture: true };
+        this.removeListeners = pipe(addPointerEvent(this.contextWindow, "pointermove", this.handlePointerMove, eventOptions), addPointerEvent(this.contextWindow, "pointerup", this.handlePointerUp, eventOptions), addPointerEvent(this.contextWindow, "pointercancel", this.handlePointerUp, eventOptions));
         // Start scroll tracking if element provided
         if (element) {
             this.startScrollTracking(element);
@@ -157,12 +177,9 @@ export class PanSession {
         // Capture listener catches element scroll events as they bubble
         window.addEventListener("scroll", this.onElementScroll, {
             capture: true,
-            passive: true,
         });
         // Direct window scroll listener (window scroll doesn't bubble)
-        window.addEventListener("scroll", this.onWindowScroll, {
-            passive: true,
-        });
+        window.addEventListener("scroll", this.onWindowScroll);
         this.removeScrollListeners = () => {
             window.removeEventListener("scroll", this.onElementScroll, {
                 capture: true,
@@ -255,13 +272,26 @@ function getVelocity(history, timeDelta) {
     if (!timestampedPoint) {
         return { x: 0, y: 0 };
     }
-    const time = millisecondsToSeconds(lastPoint.timestamp - timestampedPoint.timestamp);
-    if (time === 0) {
+    /**
+     * If the selected point is the pointer-down origin (history[0]),
+     * there are better movement points available, and the time gap
+     * is suspiciously large (>2x timeDelta), use the next point instead.
+     * This prevents stale pointer-down points from diluting velocity
+     * in hold-then-flick gestures.
+     */
+    if (timestampedPoint === history[0] &&
+        history.length > 2 &&
+        lastPoint.timestamp - timestampedPoint.timestamp >
+            secondsToMilliseconds(timeDelta) * 2) {
+        timestampedPoint = history[1];
+    }
+    const seconds = millisecondsToSeconds(lastPoint.timestamp - timestampedPoint.timestamp);
+    if (seconds === 0) {
         return { x: 0, y: 0 };
     }
     const currentVelocity = {
-        x: (lastPoint.x - timestampedPoint.x) / time,
-        y: (lastPoint.y - timestampedPoint.y) / time,
+        x: (lastPoint.x - timestampedPoint.x) / seconds,
+        y: (lastPoint.y - timestampedPoint.y) / seconds,
     };
     if (currentVelocity.x === Infinity) {
         currentVelocity.x = 0;

package/dist/source/gestures/pan/index.js

@@ -5,7 +5,7 @@ import { getContextWindow } from "../../utils/get-context-window";
 import { PanSession } from "./PanSession";
 const asyncHandler = (handler) => (event, info) => {
     if (handler) {
-        frame.postRender(() => handler(event, info));
+        frame.update(() => handler(event, info), false, true);
     }
 };
 export class PanGesture extends Feature {
@@ -24,7 +24,7 @@ export class PanGesture extends Feature {
         return {
             onSessionStart: asyncHandler(onPanSessionStart),
             onStart: asyncHandler(onPanStart),
-            onMove: onPan,
+            onMove: asyncHandler(onPan),
             onEnd: (event, info) => {
                 delete this.session;
                 if (onPanEnd) {

package/dist/source/gestures/press.js

@@ -19,10 +19,14 @@ export class PressGesture extends Feature {
         const { current } = this.node;
         if (!current)
             return;
+        const { globalTapTarget, propagate } = this.node.props;
         this.unmount = press(current, (_element, startEvent) => {
             handlePressEvent(this.node, startEvent, "Start");
             return (endEvent, { success }) => handlePressEvent(this.node, endEvent, success ? "End" : "Cancel");
-        }, { useGlobalTarget: this.node.props.globalTapTarget });
+        }, {
+            useGlobalTarget: globalTapTarget,
+            stopPropagation: propagate?.tap === false,
+        });
     }
     unmount() { }
 }

package/dist/source/motion/index.jsx

@@ -1,6 +1,6 @@
 import { createEffect, createMemo, onCleanup, onMount, splitProps, useContext } from "solid-js";
 import { Dynamic } from "solid-js/web";
-import { scrapeHTMLMotionValuesFromProps, scrapeSVGMotionValuesFromProps } from "motion-dom";
+import { isAnimationControls, scrapeHTMLMotionValuesFromProps, scrapeSVGMotionValuesFromProps, setTarget } from "motion-dom";
 import { MotionConfigContext } from "../components/MotionConfig";
 import { MotionContext } from "../context/MotionContext";
 import { PresenceContext } from "../context/PresenceContext";
@@ -102,6 +102,7 @@ export function createMotionComponent(Component, { forwardMotionProps = false, t
                 return;
             visualElement.scheduleRenderMicrotask();
         });
+        let mounted = false;
         createEffect(() => {
             if (!visualElement)
                 return;
@@ -110,9 +111,20 @@ export function createMotionComponent(Component, { forwardMotionProps = false, t
             visualElement.update(nextProps, nextPresenceContext);
             prepareDragProjection(visualElement, nextProps);
             visualElement.updateFeatures();
-            if (visualElement.current && visualElement.animationState) {
-                visualElement.animationState.animateChanges();
+            if (!visualElement.current || !visualElement.animationState)
+                return;
+            if (!mounted) {
+                mounted = true;
+                // The visual state was built when the element was created, but in Solid an earlier
+                // effect in the same flush can change `animate` before it mounts. React can't render a
+                // stale target, so a blocked initial animation would otherwise skip the newer one.
+                const { animate } = nextProps;
+                const blocked = nextProps.initial === false || nextPresenceContext?.initial === false;
+                if (blocked && animate && typeof animate !== "boolean" && !isAnimationControls(animate)) {
+                    setTarget(visualElement, animate);
+                }
             }
+            visualElement.animationState.animateChanges();
         });
         onCleanup(() => {
             visualElement?.unmount();

package/dist/source/value/use-spring.js

@@ -20,7 +20,7 @@ export function useSpring(source, options = {}) {
         cancelFrame(start);
         value.stop();
     };
-    // motion-dom 12.30's springValue queues an anonymous callback that survives
+    // motion-dom's springValue queues an anonymous callback that survives
     // destroy(). Keep the scheduled work owned and cancellable by this Solid scope.
     const start = () => {
         if (disposed)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitlangton/solid-motion",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Motion for SolidJS: springs, presence, drag and gestures on Motion's engine.",
   "license": "MIT",
   "author": "Kit Langton",
@@ -46,8 +46,8 @@
     "prepublishOnly": "bun run typecheck && bun run build"
   },
   "dependencies": {
-    "motion-dom": "^12.30.0",
-    "motion-utils": "^12.29.2"
+    "motion-dom": "14.0.0",
+    "motion-utils": "14.0.0"
   },
   "peerDependencies": {
     "solid-js": "^1.8.0"