@humanspeak/svelte-motion 0.3.5 → 0.4.0

package/dist/utils/drag.js

@@ -1,4 +1,4 @@
-import { pwLog, pwWarn } from './log';
+import { isPlaywrightEnv, pwLog, pwWarn } from './log';
 /**
  * Drag utilities
  *
@@ -16,7 +16,7 @@ import { pwLog, pwWarn } from './log';
  * - For nested drags, set `propagation` as needed to avoid parent-child contention.
  */
 import { isDomElement } from './dom';
-import { applyConstraints as applyFloatConstraints } from './dragMath';
+import { applyConstraints as applyFloatConstraints, parseMatrixTranslate } from './dragMath';
 import { deriveBoundaryPhysics } from './dragParams';
 import { computeHoverBaseline, splitHoverDefinition } from './hover';
 import { createInertiaToBoundary } from './inertia';
@@ -87,6 +87,53 @@ export const applyElastic = (value, min, max, elastic) => {
 };
 /** Prefer high-resolution time in browser; fall back for SSR/tests. */
 const now = () => (typeof performance !== 'undefined' ? performance.now() : Date.now());
+/** Sample windows for release-velocity inference (matches motion-dom values). */
+const MAX_VELOCITY_DELTA_MS = 30;
+const MIN_VELOCITY_INTERVAL_MS = 5;
+/**
+ * Compute the release velocity for momentum from a pointer-history window.
+ *
+ * Mirrors motion-dom: walks back from the newest sample, including only
+ * samples within `MAX_VELOCITY_DELTA_MS` (30 ms) of newest, then divides
+ * the displacement by the elapsed time. Returns 0 if the newest sample is
+ * stale, the window has fewer than two samples, or the oldest-newest span
+ * is shorter than `MIN_VELOCITY_INTERVAL_MS` (5 ms — sub-frame).
+ *
+ * @param history Recent pointer samples ordered oldest → newest. Each
+ *   sample is `{ x, y, t }` where `t` is `performance.now()` ms.
+ * @param nowMs Current `performance.now()` ms — used to discard a stale
+ *   newest sample (finger lifted after a pause).
+ * @returns Inferred release velocity in pixels per second on each axis.
+ * @example
+ *   const v = computeReleaseVelocity(
+ *       [{ x: 0, y: 0, t: 1000 }, { x: 20, y: 0, t: 1020 }],
+ *       1020
+ *   )
+ *   // v ≈ { x: 1000, y: 0 } — 20 px over 20 ms → 1000 px/s
+ */
+const computeReleaseVelocity = (history, nowMs) => {
+    if (history.length < 2)
+        return { x: 0, y: 0 };
+    const newest = history[history.length - 1];
+    if (nowMs - newest.t > MAX_VELOCITY_DELTA_MS)
+        return { x: 0, y: 0 };
+    let oldestIdx = history.length - 1;
+    for (let i = history.length - 2; i >= 0; i--) {
+        if (newest.t - history[i].t > MAX_VELOCITY_DELTA_MS)
+            break;
+        oldestIdx = i;
+    }
+    if (oldestIdx === history.length - 1)
+        return { x: 0, y: 0 };
+    const oldest = history[oldestIdx];
+    const dtMs = newest.t - oldest.t;
+    if (dtMs < MIN_VELOCITY_INTERVAL_MS)
+        return { x: 0, y: 0 };
+    return {
+        x: ((newest.x - oldest.x) / dtMs) * 1000,
+        y: ((newest.y - oldest.y) / dtMs) * 1000
+    };
+};
 /**
  * Attach a drag gesture to an element.
  *
@@ -184,25 +231,21 @@ export const attachDrag = (el, opts) => {
             applied.x = x;
         if ('y' in payload)
             applied.y = y;
-        // Verify it's actually applied; if not, retry once (Playwright visibility only)
-        const cs = getComputedStyle(el);
-        let actualTransform = cs.transform;
-        if (actualTransform === 'none' || !actualTransform.includes('matrix')) {
-            pwWarn('⚠️ setXY transform missing; retrying write', {
-                x,
-                y,
-                transform: actualTransform
-            });
-            animate(el, ('x' in payload || 'y' in payload ? payload : { x, y }), {
-                duration: 0
-            });
-            actualTransform = getComputedStyle(el).transform;
+        // Playwright-only sanity check: confirm the transform actually
+        // landed on the element and retry once if not. Forces a style
+        // recalc via getComputedStyle, so we gate it behind the same
+        // playwright env flag pwLog uses so it never fires in prod.
+        if (isPlaywrightEnv()) {
+            let actualTransform = getComputedStyle(el).transform;
             if (actualTransform === 'none' || !actualTransform.includes('matrix')) {
-                pwWarn('⚠️ setXY second attempt still missing transform', {
-                    x,
-                    y,
-                    transform: actualTransform
-                });
+                pwWarn('⚠️ setXY transform missing; retrying write', { x, y });
+                animate(el, ('x' in payload || 'y' in payload
+                    ? payload
+                    : { x, y }), { duration: 0 });
+                actualTransform = getComputedStyle(el).transform;
+                if (actualTransform === 'none' || !actualTransform.includes('matrix')) {
+                    pwWarn('⚠️ setXY second attempt still missing transform', { x, y });
+                }
             }
         }
     };
@@ -404,22 +447,28 @@ export const attachDrag = (el, opts) => {
         });
         if (!dragging)
             return;
-        finishDrag(e);
+        // Pointer was preempted (gesture-nav, palm rejection, scroll
+        // takeover). User did not release intentionally — skip the
+        // inertia/momentum path and force a no-momentum settle so the
+        // card clamps back into constraints without flinging.
+        finishDrag(e, true);
     };
     /**
      * Finish a drag:
      * - If momentum is enabled, decay towards a clamped target with exponential easing
      * - Otherwise, animate back to a clamped position (or origin), then sync `applied`
      */
-    const finishDrag = (e) => {
+    const finishDrag = (e, cancelled = false) => {
         dragging = false;
+        velocity = computeReleaseVelocity(history, now());
         pwLog('[drag] finish', {
             el: EL_ID,
             lastPoint,
             startPoint,
             origin,
             applied,
-            momentum
+            momentum,
+            velocity
         });
         try {
             if ('releasePointerCapture' in el && typeof e.pointerId === 'number')
@@ -434,8 +483,10 @@ export const attachDrag = (el, opts) => {
         window.removeEventListener('pointermove', onPointerMove);
         window.removeEventListener('pointerup', onPointerUp);
         window.removeEventListener('pointercancel', onPointerCancel);
-        // Momentum/inertia with boundary handoff: inertia until crossing, then spring to boundary
-        if (momentum) {
+        // Momentum/inertia with boundary handoff: inertia until crossing, then spring to boundary.
+        // Pointer-cancel forces a no-momentum settle (clamp into constraints, no fling) since the
+        // gesture was preempted rather than intentionally released.
+        if (momentum && !cancelled) {
             pwLog('🚀 STARTING MOMENTUM', {
                 velocityX: velocity.x,
                 velocityY: velocity.y,
@@ -454,6 +505,18 @@ export const attachDrag = (el, opts) => {
                     ...(applyX ? { x: 0 } : {}),
                     ...(applyY ? { y: 0 } : {})
                 }, (mergedTransition ?? {}));
+                // Cancel hook so re-grab / controls.stop() interrupts the snap.
+                stopInertia = () => {
+                    pwLog('❌ snapToOrigin cancelled');
+                    controls.stop?.();
+                    // Sync applied to wherever the snap reached so the next drag origin is correct.
+                    const { tx, ty } = parseMatrixTranslate(getComputedStyle(el).transform);
+                    if (applyX)
+                        applied.x = tx;
+                    if (applyY)
+                        applied.y = ty;
+                    stopInertia = null;
+                };
                 Promise.resolve(controls.finished)
                     .then(() => {
                     // Sync internal applied transform so next drag uses the correct origin
@@ -465,26 +528,31 @@ export const attachDrag = (el, opts) => {
                         el: EL_ID,
                         applied
                     });
+                    if (stopInertia)
+                        stopInertia = null;
                 })
                     .catch(() => { })
                     .finally(() => opts.callbacks?.onTransitionEnd?.());
                 return;
             }
-            // If no constraints, disable boundary springs by setting finite but very wide bounds
+            // Boundary min/max anchor to `constraintsBase` (the absolute
+            // pixel-constraint origin) so the inertia handoff snaps to the
+            // same edge pointermove's elastic clamping uses — not to a
+            // per-drag-shifted `origin` that would drift across drags.
             const noConstraints = !constraints;
             const huge = 1e6;
             const minX = noConstraints
                 ? applied.x - huge
-                : origin.x + (constraints?.left ?? -Infinity);
+                : constraintsBase.x + (constraints?.left ?? -Infinity);
             const maxX = noConstraints
                 ? applied.x + huge
-                : origin.x + (constraints?.right ?? Infinity);
+                : constraintsBase.x + (constraints?.right ?? Infinity);
             const minY = noConstraints
                 ? applied.y - huge
-                : origin.y + (constraints?.top ?? -Infinity);
+                : constraintsBase.y + (constraints?.top ?? -Infinity);
             const maxY = noConstraints
                 ? applied.y + huge
-                : origin.y + (constraints?.bottom ?? Infinity);
+                : constraintsBase.y + (constraints?.bottom ?? Infinity);
             const { timeConstantMs, restDelta, restSpeed, bounceStiffness, bounceDamping } = deriveBoundaryPhysics(elastic, opts.transition);
             pwLog('⚙️ boundary-physics', {
                 timeConstantMs,
@@ -500,6 +568,10 @@ export const attachDrag = (el, opts) => {
             // Respect direction lock on release: only animate the locked axis
             const applyX = (axis === true || axis === 'x') && lockAxis !== 'y';
             const applyY = (axis === true || axis === 'y') && lockAxis !== 'x';
+            // Element-ref constraints can resize / reflow during inertia.
+            // Pixel constraints never change once set. We re-resolve only
+            // for element-ref each frame in the rAF loop below.
+            const isElementRefConstraint = isDomElement(opts.constraints);
             const stepX = applyX
                 ? createInertiaToBoundary({ value: applied.x, velocity: velocity.x }, { min: minX, max: maxX }, { timeConstantMs, restDelta, restSpeed, bounceStiffness, bounceDamping })
                 : null;
@@ -519,9 +591,27 @@ export const attachDrag = (el, opts) => {
                 // Use the precomputed step functions (built once per release)
                 const rx = stepX ? stepX(t) : { value: applied.x, done: true };
                 const ry = stepY ? stepY(t) : { value: applied.y, done: true };
-                // Preserve non-animated axis exactly; don't write y during x-only drags, or vice versa
-                const nextX = rx.value;
-                const nextY = (axis === true || axis === 'y') && lockAxis !== 'x' ? ry.value : applied.y;
+                // Element-ref constraints may have resized / reflowed since
+                // the steppers were built. Re-resolve and clamp the output
+                // so the card never lands outside the now-current container
+                // even if its boundary moved mid-spring. Pixel constraints
+                // don't move so we skip the work.
+                let nextX = rx.value;
+                let nextY = (axis === true || axis === 'y') && lockAxis !== 'x' ? ry.value : applied.y;
+                if (isElementRefConstraint) {
+                    const freshConstraints = resolveConstraints(el, opts.constraints);
+                    if (freshConstraints) {
+                        constraintsBase = { x: applied.x, y: applied.y };
+                        const freshMinX = constraintsBase.x + (freshConstraints.left ?? -Infinity);
+                        const freshMaxX = constraintsBase.x + (freshConstraints.right ?? Infinity);
+                        const freshMinY = constraintsBase.y + (freshConstraints.top ?? -Infinity);
+                        const freshMaxY = constraintsBase.y + (freshConstraints.bottom ?? Infinity);
+                        if (applyX)
+                            nextX = Math.max(freshMinX, Math.min(freshMaxX, nextX));
+                        if (applyY)
+                            nextY = Math.max(freshMinY, Math.min(freshMaxY, nextY));
+                    }
+                }
                 setXY(nextX, nextY);
                 if (frameCount <= 3 || frameCount % 10 === 0) {
                     pwLog(`🔄 FRAME ${frameCount}`, {
@@ -537,15 +627,19 @@ export const attachDrag = (el, opts) => {
                 if ((rx.done || !stepX) && (ry.done || !stepY)) {
                     pwLog('✅ REST REACHED', {
                         frameCount,
-                        finalX: rx.value,
-                        finalY: ry.value,
+                        finalX: nextX,
+                        finalY: nextY,
                         timeConstantMs,
                         restDelta,
                         restSpeed
                     });
-                    // Ensure applied is synced to final values (setXY should have done this, but be explicit)
-                    const finalX = stepX ? rx.value : applied.x;
-                    const finalY = stepY ? ry.value : applied.y;
+                    // Sync `applied` from the post-clamp frame values
+                    // (nextX/nextY), not the raw stepper output. When
+                    // element-ref constraints clamped this frame, raw
+                    // rx.value sits outside the visible bounds and would
+                    // desync the next-drag origin from the rendered transform.
+                    const finalX = stepX ? nextX : applied.x;
+                    const finalY = stepY ? nextY : applied.y;
                     if (axis === true || axis === 'x')
                         applied.x = finalX;
                     if (axis === true || axis === 'y')
@@ -560,14 +654,12 @@ export const attachDrag = (el, opts) => {
             stopInertia = () => {
                 pwLog('❌ MOMENTUM CANCELLED');
                 running = false;
-                // Sync applied to the current visual position so the next drag starts correctly
-                // Use the last computed values from the steppers if available
-                const finalX = stepX ? stepX(now() - startTs).value : applied.x;
-                const finalY = stepY ? stepY(now() - startTs).value : applied.y;
-                if (axis === true || axis === 'x')
-                    applied.x = finalX;
-                if (axis === true || axis === 'y')
-                    applied.y = finalY;
+                // `applied` is already in sync with the last frame rendered
+                // by the rAF loop (setXY updates it on every frame). We
+                // intentionally do NOT call stepX/stepY again here —
+                // they're stateful (mutate lastT/springX/springV) and an
+                // extra call advances them past the visible state, leaving
+                // applied slightly out of sync with what the user sees.
                 pwLog('[drag] inertia cancelled → sync applied', {
                     el: EL_ID,
                     applied: { x: applied.x, y: applied.y }
@@ -624,6 +716,17 @@ export const attachDrag = (el, opts) => {
             const settleTransition = elastic === 0 ? { duration: 0 } : (mergedTransition ?? {});
             // Animate with the merged transition so the settle feels consistent with other motion
             const controls = animate(el, { ...(applyX ? { x } : {}), ...(applyY ? { y } : {}) }, settleTransition);
+            // Cancel hook so re-grab interrupts the settle animation cleanly.
+            stopInertia = () => {
+                pwLog('❌ settle (no momentum) cancelled');
+                controls.stop?.();
+                const { tx, ty } = parseMatrixTranslate(getComputedStyle(el).transform);
+                if (applyX)
+                    applied.x = tx;
+                if (applyY)
+                    applied.y = ty;
+                stopInertia = null;
+            };
             // Fire transition end once settled
             Promise.resolve(controls.finished)
                 .then(() => {
@@ -636,6 +739,8 @@ export const attachDrag = (el, opts) => {
                     el: EL_ID,
                     applied
                 });
+                if (stopInertia)
+                    stopInertia = null;
             })
                 .catch(() => { })
                 .finally(() => opts.callbacks?.onTransitionEnd?.());
@@ -643,10 +748,12 @@ export const attachDrag = (el, opts) => {
         opts.callbacks?.onEnd?.(e, computeInfo());
         endWhileDrag();
     };
-    // Wire dragControls
+    // Wire dragControls. The cancelInertia thunk reads the *current*
+    // stopInertia at call time so the latest in-flight animation is
+    // targeted (stopInertia is re-assigned per finishDrag).
     if (opts.controls) {
         const internal = opts.controls;
-        internal._bind?.(el, beginDrag);
+        internal._bind?.(el, beginDrag, () => stopInertia?.());
         pwLog('[drag] controls bound', { el: EL_ID });
     }
     el.addEventListener('pointerdown', onPointerDown);

package/dist/utils/dragMath.d.ts

@@ -34,3 +34,21 @@ export type ConstraintElastic = {
  * ```
  */
 export declare const applyConstraints: (point: number, range: ConstraintRange, elastic?: ConstraintElastic) => number;
+/**
+ * Parse a CSS `matrix(a, b, c, d, tx, ty)` string into translate components.
+ *
+ * Used to read the rendered translate after Motion writes inline transforms
+ * during drag-cancel hooks.
+ *
+ * @param transform The computed `transform` style — typically `'none'` or
+ *   `'matrix(1, 0, 0, 1, 10, 20)'`. `matrix3d(...)` is not supported.
+ * @returns The 2D translate components `{ tx, ty }`. Defaults to
+ *   `{ tx: 0, ty: 0 }` for `'none'` or any non-matching input.
+ * @example
+ *   parseMatrixTranslate('matrix(1, 0, 0, 1, 10, 20)') // → { tx: 10, ty: 20 }
+ *   parseMatrixTranslate('none')                       // → { tx: 0, ty: 0 }
+ */
+export declare const parseMatrixTranslate: (transform: string) => {
+    tx: number;
+    ty: number;
+};

package/dist/utils/dragMath.js

@@ -42,3 +42,24 @@ export const applyConstraints = (point, range, elastic) => {
     }
     return point;
 };
+/**
+ * Parse a CSS `matrix(a, b, c, d, tx, ty)` string into translate components.
+ *
+ * Used to read the rendered translate after Motion writes inline transforms
+ * during drag-cancel hooks.
+ *
+ * @param transform The computed `transform` style — typically `'none'` or
+ *   `'matrix(1, 0, 0, 1, 10, 20)'`. `matrix3d(...)` is not supported.
+ * @returns The 2D translate components `{ tx, ty }`. Defaults to
+ *   `{ tx: 0, ty: 0 }` for `'none'` or any non-matching input.
+ * @example
+ *   parseMatrixTranslate('matrix(1, 0, 0, 1, 10, 20)') // → { tx: 10, ty: 20 }
+ *   parseMatrixTranslate('none')                       // → { tx: 0, ty: 0 }
+ */
+export const parseMatrixTranslate = (transform) => {
+    const m = transform.match(/matrix\(([^)]+)\)/);
+    if (!m)
+        return { tx: 0, ty: 0 };
+    const parts = m[1].split(',').map((s) => Number.parseFloat(s.trim()));
+    return { tx: parts[4] ?? 0, ty: parts[5] ?? 0 };
+};

package/dist/utils/inertia.js

@@ -80,12 +80,13 @@ export const createInertiaToBoundary = (initial, bounds, opts) => {
     let springX = x;
     let springV = 0;
     let boundaryTarget = null;
-    // If starting OOB, skip inertia
+    // Starting OOB: skip inertia and engage the spring. Drop the
+    // away-from-boundary velocity component so the spring's first frames
+    // don't continue moving the value outward.
     if (x < min || x > max) {
         mode = 'spring';
-        // Set spring start at current value and carry current velocity
         springX = x;
-        springV = v;
+        springV = x < min ? Math.max(0, v) : Math.min(0, v);
         boundaryTarget = x < min ? min : max;
     }
     // Precompute first crossing (if any) from initial state

package/dist/vite.js

@@ -1,3 +1,4 @@
+import { Parser } from 'acorn';
 /**
  * Tag-to-component name mapping. Each key is the lowercase HTML/SVG tag,
  * and the value is the PascalCase component filename (without .svelte).
@@ -318,16 +319,18 @@ export const svelteMotionOptimize = () => ({
         for (const [tag, localName] of tagToLocal) {
             const openRe = new RegExp(`<motion\\.${escapeRegExp(tag)}(?=[\\s/>])`, 'g');
             const closeRe = new RegExp(`</motion\\.${escapeRegExp(tag)}\\s*>`, 'g');
-            const scriptRe = new RegExp(`\\bmotion\\.${escapeRegExp(tag)}\\b`, 'g');
             transformed = transformed.replace(openRe, `<${localName}`);
             transformed = transformed.replace(closeRe, `</${localName}>`);
-            // Also replace script-block references (e.g., const Component = motion.div)
-            // But only outside of the import statement we already handled
-            const importEndIdx = transformed.indexOf(localName) + localName.length;
-            const beforeImport = transformed.slice(0, importEndIdx);
-            const afterImport = transformed.slice(importEndIdx);
-            transformed = beforeImport + afterImport.replace(scriptRe, localName);
         }
+        // Rewrite `motion.TAG` JS references (e.g. `const Component = motion.div`)
+        // inside <script> blocks only. A naive regex over the script body would
+        // also clobber the same substring in string literals (`"motion.div"`)
+        // and comments (`// motion.div`). Parse the script as JS instead and
+        // only rewrite real `motion.<tag>` MemberExpressions. For scripts that
+        // fail to parse as plain JS (e.g. `<script lang="ts">`), fall back to a
+        // string/comment-aware lexer that achieves the same correctness without
+        // needing a TS parser.
+        transformed = transformed.replace(/(<script\b[^>]*>)([\s\S]*?)(<\/script>)/g, (_full, open, content, close) => open + rewriteMotionRefsInScript(content, tagToLocal) + close);
         return {
             code: transformed,
             map: null
@@ -341,3 +344,169 @@ export const svelteMotionOptimize = () => ({
  * @returns The escaped string safe for use in a RegExp.
  */
 const escapeRegExp = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+/**
+ * Rewrite `motion.<tag>` member-expression references inside a `<script>`
+ * body to the matching `SvelteMotionTag` local. Preserves string literals
+ * and comments — they look like `motion.div` to a regex but must not be
+ * rewritten.
+ *
+ * Strategy: parse the body as JS with acorn and splice only real
+ * MemberExpression matches. If parsing fails (TypeScript, JSX, etc.) fall
+ * back to a string/comment-aware lexer that skips literals and comments.
+ *
+ * @param content - Raw script body (between `<script ...>` and `</script>`).
+ * @param tagToLocal - Map of lowercase tag → local component identifier.
+ * @returns The rewritten body, ready to splice back into the source.
+ */
+const rewriteMotionRefsInScript = (content, tagToLocal) => {
+    try {
+        return rewriteViaAst(content, tagToLocal);
+    }
+    catch {
+        return rewriteViaLexer(content, tagToLocal);
+    }
+};
+const isIdentifier = (n) => !!n && n.type === 'Identifier';
+const isMemberExpression = (n) => !!n && n.type === 'MemberExpression';
+/**
+ * Walk an acorn AST and collect every `motion.<tag>` MemberExpression range
+ * we should rewrite. Splice from end to start so earlier indices stay valid.
+ */
+const rewriteViaAst = (content, tagToLocal) => {
+    const ast = Parser.parse(content, {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        allowImportExportEverywhere: true,
+        allowReturnOutsideFunction: true,
+        allowAwaitOutsideFunction: true,
+        allowHashBang: true
+    });
+    const edits = [];
+    const visit = (node) => {
+        if (!node || typeof node !== 'object' || typeof node.type !== 'string')
+            return;
+        if (isMemberExpression(node) &&
+            !node.computed &&
+            isIdentifier(node.object) &&
+            node.object.name === 'motion' &&
+            isIdentifier(node.property)) {
+            const localName = tagToLocal.get(node.property.name);
+            if (localName) {
+                edits.push({ start: node.start, end: node.end, replacement: localName });
+                return;
+            }
+        }
+        for (const key of Object.keys(node)) {
+            if (key === 'type' || key === 'start' || key === 'end' || key === 'loc')
+                continue;
+            const value = node[key];
+            if (Array.isArray(value))
+                value.forEach((v) => visit(v));
+            else if (value && typeof value === 'object')
+                visit(value);
+        }
+    };
+    visit(ast);
+    if (edits.length === 0)
+        return content;
+    edits.sort((a, b) => b.start - a.start);
+    let out = content;
+    for (const edit of edits) {
+        out = out.slice(0, edit.start) + edit.replacement + out.slice(edit.end);
+    }
+    return out;
+};
+/**
+ * Fallback for scripts acorn can't parse (TS, JSX). Walks the source
+ * character-by-character, skipping string literals (`'`, `"`, backtick incl.
+ * `${…}` substitutions) and line/block comments, then applies a `motion.<tag>`
+ * regex to the remaining "code" regions. Less precise than AST but covers
+ * the same correctness contract for literal/comment preservation.
+ */
+const rewriteViaLexer = (content, tagToLocal) => {
+    const len = content.length;
+    const out = [];
+    let i = 0;
+    const isIdStart = (ch) => /[A-Za-z_$]/.test(ch);
+    const isIdPart = (ch) => /[A-Za-z0-9_$-]/.test(ch);
+    while (i < len) {
+        const ch = content[i];
+        const next = content[i + 1];
+        // Line comment
+        if (ch === '/' && next === '/') {
+            const end = content.indexOf('\n', i);
+            const stop = end === -1 ? len : end;
+            out.push(content.slice(i, stop));
+            i = stop;
+            continue;
+        }
+        // Block comment
+        if (ch === '/' && next === '*') {
+            const end = content.indexOf('*/', i + 2);
+            const stop = end === -1 ? len : end + 2;
+            out.push(content.slice(i, stop));
+            i = stop;
+            continue;
+        }
+        // String literals (single/double)
+        if (ch === '"' || ch === "'") {
+            const quote = ch;
+            let j = i + 1;
+            while (j < len) {
+                if (content[j] === '\\') {
+                    j += 2;
+                    continue;
+                }
+                if (content[j] === quote) {
+                    j++;
+                    break;
+                }
+                j++;
+            }
+            out.push(content.slice(i, j));
+            i = j;
+            continue;
+        }
+        // Template literal — naive: skip to matching backtick, no `${…}` parsing
+        // is needed for our use case (we only need to NOT rewrite the literal
+        // text; substitutions still look like code but `motion.<tag>` inside
+        // a template substitution is vanishingly rare and acorn would normally
+        // handle it).
+        if (ch === '`') {
+            let j = i + 1;
+            while (j < len) {
+                if (content[j] === '\\') {
+                    j += 2;
+                    continue;
+                }
+                if (content[j] === '`') {
+                    j++;
+                    break;
+                }
+                j++;
+            }
+            out.push(content.slice(i, j));
+            i = j;
+            continue;
+        }
+        // Possible `motion.<tag>` identifier — require word boundary on left
+        if ((i === 0 || !isIdPart(content[i - 1])) &&
+            isIdStart(ch) &&
+            content.slice(i, i + 7) === 'motion.') {
+            let j = i + 7;
+            const tagStart = j;
+            while (j < len && isIdPart(content[j]))
+                j++;
+            const tag = content.slice(tagStart, j);
+            const localName = tagToLocal.get(tag);
+            if (localName && (j === len || !isIdPart(content[j]))) {
+                out.push(localName);
+                i = j;
+                continue;
+            }
+        }
+        out.push(ch);
+        i++;
+    }
+    return out.join('');
+};

package/package.json

@@ -1,29 +1,52 @@
 {
   "name": "@humanspeak/svelte-motion",
-  "version": "0.3.5",
-  "description": "A Framer Motion-compatible animation library for Svelte 5 that provides smooth, hardware-accelerated animations. Features include spring physics, custom easing, and fluid transitions. Built on top of the motion library, it offers a simple API for creating complex animations with minimal code. Perfect for interactive UIs, micro-interactions, and engaging user experiences.",
+  "version": "0.4.0",
+  "description": "Framer Motion for Svelte 5. Declarative motion.<tag> components with AnimatePresence exit animations, gestures (hover, tap, drag, focus, in-view), variants, FLIP layout animations, shared-layout transitions, spring physics, and scroll-linked motion values. The drop-in Framer Motion alternative for Svelte and SvelteKit.",
   "keywords": [
     "svelte",
+    "svelte-5",
+    "svelte5",
+    "sveltekit",
+    "svelte-motion",
+    "motion-svelte",
+    "svelte-animation",
+    "svelte-animations",
+    "svelte-animation-library",
     "animation",
+    "animations",
     "motion",
-    "transitions",
-    "spring-physics",
-    "ui-animation",
-    "svelte5",
-    "hardware-accelerated",
-    "micro-interactions",
-    "performance",
     "framer-motion",
     "framer-motion-svelte",
+    "framer-motion-for-svelte",
+    "framer-motion-alternative",
+    "transitions",
     "gestures",
-    "exit-animation",
-    "animate-presence",
-    "layout-animation",
     "drag",
+    "drag-and-drop",
+    "hover",
+    "tap",
+    "while-in-view",
     "variants",
-    "sveltekit",
+    "animate-presence",
+    "exit-animation",
+    "layout-animation",
+    "shared-layout",
+    "flip-animation",
+    "spring",
+    "spring-physics",
+    "scroll-animation",
+    "scroll-linked",
+    "use-spring",
+    "use-scroll",
+    "use-animate",
+    "use-transform",
+    "use-in-view",
+    "use-presence",
+    "motion-values",
+    "ssr",
     "typescript",
-    "svelte-animation"
+    "ui-animation",
+    "micro-interactions"
   ],
   "homepage": "https://motion.svelte.page",
   "bugs": {
@@ -71,59 +94,60 @@
     }
   },
   "dependencies": {
+    "acorn": "^8.16.0",
     "motion": "^12.38.0",
     "motion-dom": "^12.38.0"
   },
   "devDependencies": {
     "@changesets/cli": "^2.31.0",
-    "@eslint/compat": "^2.0.5",
+    "@eslint/compat": "^2.1.0",
     "@eslint/js": "^10.0.1",
-    "@playwright/test": "^1.59.1",
+    "@playwright/test": "^1.60.0",
     "@sveltejs/adapter-auto": "^7.0.1",
-    "@sveltejs/kit": "^2.58.0",
+    "@sveltejs/kit": "^2.60.1",
     "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.11",
     "@tailwindcss/typography": "^0.5.19",
-    "@tailwindcss/vite": "^4.2.4",
+    "@tailwindcss/vite": "^4.3.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/svelte": "^5.3.1",
-    "@types/node": "^25.6.0",
-    "@vitest/coverage-v8": "^4.1.5",
-    "eslint": "^10.2.1",
+    "@types/node": "^25.8.0",
+    "@vitest/coverage-v8": "^4.1.6",
+    "eslint": "^10.4.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-import": "2.32.0",
     "eslint-plugin-svelte": "3.17.1",
     "eslint-plugin-unused-imports": "4.4.1",
     "esm-env": "^1.2.2",
-    "globals": "^17.5.0",
+    "globals": "^17.6.0",
     "html-tags": "^5.1.0",
     "html-void-elements": "^3.0.0",
     "husky": "^9.1.7",
-    "jsdom": "^29.0.2",
+    "jsdom": "^29.1.1",
     "mprocs": "^0.9.2",
     "prettier": "^3.8.3",
     "prettier-plugin-organize-imports": "^4.3.0",
     "prettier-plugin-sort-json": "^4.2.0",
-    "prettier-plugin-svelte": "^3.5.1",
-    "prettier-plugin-tailwindcss": "^0.7.3",
-    "publint": "^0.3.18",
+    "prettier-plugin-svelte": "^3.5.2",
+    "prettier-plugin-tailwindcss": "^0.8.0",
+    "publint": "^0.3.21",
     "runed": "0.37.1",
-    "svelte": "^5.55.5",
-    "svelte-check": "^4.4.6",
+    "svelte": "5.55.5",
+    "svelte-check": "^4.4.8",
     "svg-tags": "^1.0.0",
-    "tailwind-merge": "^3.5.0",
+    "tailwind-merge": "^3.6.0",
     "tailwind-variants": "^3.2.2",
-    "tailwindcss": "^4.2.4",
+    "tailwindcss": "^4.3.0",
     "tailwindcss-animate": "^1.0.7",
-    "tsx": "^4.21.0",
+    "tsx": "^4.22.0",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.59.0",
-    "vite": "^8.0.10",
+    "typescript-eslint": "^8.59.3",
+    "vite": "^8.0.13",
     "vite-tsconfig-paths": "^6.1.1",
-    "vitest": "^4.1.5"
+    "vitest": "^4.1.6"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"
@@ -134,17 +158,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "tags": [
-    "svelte",
-    "animation",
-    "motion",
-    "transitions",
-    "spring-physics",
-    "performance",
-    "ui-animation",
-    "micro-interactions",
-    "svelte5"
-  ],
   "scripts": {
     "build": "vite build && npm run package",
     "cf-typegen": "pnpm --filter docs cf-typegen",