@humanspeak/svelte-motion 0.5.1 → 0.5.3

package/dist/utils/style.d.ts

@@ -3,3 +3,26 @@
  * This is used during SSR to reflect the initial state in server-rendered markup.
  */
 export declare const mergeInlineStyles: (existingStyle: unknown, initial: Record<string, unknown> | null | undefined, animateFallback?: Record<string, unknown> | null | undefined) => string;
+/**
+ * Extract the user-authored `transform` declaration from a `style` prop.
+ *
+ * Used by the projection system as the "base" transform a node resets to
+ * while measuring — the value the user wrote, independent of any
+ * motion-applied transform (`initial`/`animate`/FLIP/drag) that lands on
+ * `element.style.transform` after mount. Reading it from the `style` prop
+ * rather than the live inline style is what keeps an `initial={{ x }}` (or
+ * any transform-type initial/animate) from being mistaken for the base.
+ *
+ * Returns `''` when the prop is not a string or carries no transform.
+ *
+ * @param style The component's `style` prop.
+ * @returns The user's `transform` value, or `''`.
+ * @example
+ * ```ts
+ * extractTransform('opacity: 0.5; transform: translateX(10px) scale(2)')
+ * // => 'translateX(10px) scale(2)'
+ * extractTransform('color: red') // => ''
+ * extractTransform({ color: 'red' }) // => '' (non-string)
+ * ```
+ */
+export declare const extractTransform: (style: unknown) => string;

package/dist/utils/style.js

@@ -117,6 +117,33 @@ export const mergeInlineStyles = (existingStyle, initial, animateFallback) => {
     }
     return stringifyStyleObject(base);
 };
+/**
+ * Extract the user-authored `transform` declaration from a `style` prop.
+ *
+ * Used by the projection system as the "base" transform a node resets to
+ * while measuring — the value the user wrote, independent of any
+ * motion-applied transform (`initial`/`animate`/FLIP/drag) that lands on
+ * `element.style.transform` after mount. Reading it from the `style` prop
+ * rather than the live inline style is what keeps an `initial={{ x }}` (or
+ * any transform-type initial/animate) from being mistaken for the base.
+ *
+ * Returns `''` when the prop is not a string or carries no transform.
+ *
+ * @param style The component's `style` prop.
+ * @returns The user's `transform` value, or `''`.
+ * @example
+ * ```ts
+ * extractTransform('opacity: 0.5; transform: translateX(10px) scale(2)')
+ * // => 'translateX(10px) scale(2)'
+ * extractTransform('color: red') // => ''
+ * extractTransform({ color: 'red' }) // => '' (non-string)
+ * ```
+ */
+export const extractTransform = (style) => {
+    if (typeof style !== 'string')
+        return '';
+    return parseStyleString(style).transform ?? '';
+};
 const parseStyleString = (style) => {
     const out = {};
     style

package/dist/utils/variants.d.ts

@@ -148,3 +148,29 @@ export declare const resolveExit: (exit: MotionExit, variants: Variants | undefi
  * ```
  */
 export declare const resolveWhile: (value: MotionWhileTap | MotionWhileHover | MotionWhileFocus | MotionWhileDrag | MotionWhileInView, variants: Variants | undefined, custom?: unknown) => DOMKeyframesDefinition | undefined;
+/**
+ * Collapse each keyframe value to the value the element comes to REST at
+ * — the last element of a keyframe array, or the value itself otherwise.
+ *
+ * Used when deriving the post-animation inline style baseline: an
+ * `animate={{ x: [0, 100, 50] }}` settles at `50`, so the resting inline
+ * transform must reflect `50`, not the first keyframe. Mirrors
+ * framer-motion, whose `buildTransform` reads the motion value as a
+ * scalar that has already settled at the final keyframe
+ * (`motion-dom/.../build-transform.ts`).
+ *
+ * @param keyframes - Resolved animate keyframes (scalars and/or arrays),
+ *     or `undefined`.
+ * @returns A new object with each value collapsed to its resting scalar,
+ *     or `undefined` when given `undefined`. Keys whose value is an empty
+ *     array are omitted (no resting value).
+ *
+ * @example
+ * ```ts
+ * resolveRestingValues({ x: [0, 100, 50], scaleX: 1 }) // { x: 50, scaleX: 1 }
+ * resolveRestingValues({ opacity: 0.5 })               // { opacity: 0.5 }
+ * resolveRestingValues({ x: [], y: 5 })                // { y: 5 } (empty array dropped)
+ * resolveRestingValues(undefined)                      // undefined
+ * ```
+ */
+export declare const resolveRestingValues: (keyframes: DOMKeyframesDefinition | undefined) => DOMKeyframesDefinition | undefined;

package/dist/utils/variants.js

@@ -210,3 +210,45 @@ export const resolveWhile = (value, variants, custom) => {
         return resolveVariantList(variants, value, custom);
     return value;
 };
+/**
+ * Collapse each keyframe value to the value the element comes to REST at
+ * — the last element of a keyframe array, or the value itself otherwise.
+ *
+ * Used when deriving the post-animation inline style baseline: an
+ * `animate={{ x: [0, 100, 50] }}` settles at `50`, so the resting inline
+ * transform must reflect `50`, not the first keyframe. Mirrors
+ * framer-motion, whose `buildTransform` reads the motion value as a
+ * scalar that has already settled at the final keyframe
+ * (`motion-dom/.../build-transform.ts`).
+ *
+ * @param keyframes - Resolved animate keyframes (scalars and/or arrays),
+ *     or `undefined`.
+ * @returns A new object with each value collapsed to its resting scalar,
+ *     or `undefined` when given `undefined`. Keys whose value is an empty
+ *     array are omitted (no resting value).
+ *
+ * @example
+ * ```ts
+ * resolveRestingValues({ x: [0, 100, 50], scaleX: 1 }) // { x: 50, scaleX: 1 }
+ * resolveRestingValues({ opacity: 0.5 })               // { opacity: 0.5 }
+ * resolveRestingValues({ x: [], y: 5 })                // { y: 5 } (empty array dropped)
+ * resolveRestingValues(undefined)                      // undefined
+ * ```
+ */
+export const resolveRestingValues = (keyframes) => {
+    if (keyframes === undefined)
+        return undefined;
+    const out = {};
+    for (const [key, value] of Object.entries(keyframes)) {
+        if (Array.isArray(value)) {
+            // An empty array has no resting value — omit the key rather than
+            // emitting `value[-1]` (undefined).
+            if (value.length > 0)
+                out[key] = value[value.length - 1];
+        }
+        else {
+            out[key] = value;
+        }
+    }
+    return out;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humanspeak/svelte-motion",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "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",
@@ -104,7 +104,7 @@
     "@eslint/js": "^10.0.1",
     "@playwright/test": "^1.60.0",
     "@sveltejs/adapter-auto": "^7.0.1",
-    "@sveltejs/kit": "^2.60.1",
+    "@sveltejs/kit": "^2.61.1",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^7.1.2",
     "@tailwindcss/aspect-ratio": "^0.4.2",
@@ -119,7 +119,7 @@
     "eslint": "^10.4.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-import": "2.32.0",
-    "eslint-plugin-svelte": "3.17.1",
+    "eslint-plugin-svelte": "3.18.0",
     "eslint-plugin-unused-imports": "4.4.1",
     "esm-env": "^1.2.2",
     "globals": "^17.6.0",
@@ -131,7 +131,7 @@
     "prettier": "^3.8.3",
     "prettier-plugin-organize-imports": "^4.3.0",
     "prettier-plugin-sort-json": "^4.2.0",
-    "prettier-plugin-svelte": "^3.5.2",
+    "prettier-plugin-svelte": "^4.0.1",
     "prettier-plugin-tailwindcss": "^0.8.0",
     "publint": "^0.3.21",
     "runed": "0.37.1",
@@ -144,7 +144,7 @@
     "tailwindcss-animate": "^1.0.7",
     "tsx": "^4.22.3",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.59.4",
+    "typescript-eslint": "^8.60.0",
     "vite": "^8.0.14",
     "vite-tsconfig-paths": "^6.1.1",
     "vitest": "^4.1.7"