@humanspeak/svelte-motion 0.5.3 → 0.6.0

package/dist/utils/svg.js

@@ -1,3 +1,4 @@
+import { buildSVGPath } from 'motion-dom';
 /**
  * SVG-specific properties that need special handling during animation.
  * These properties are not standard CSS properties and need to be transformed.
@@ -145,8 +146,8 @@ export const isSVGElement = (element) => {
  *
  * Normalized behavior (React/Framer Motion parity):
  * - Ensures `pathLength="1"` is set when any path prop is present
- * - Maps `pathLength`/`pathSpacing` → `stroke-dasharray` (px)
- * - Maps `pathOffset` → `stroke-dashoffset` (negative px)
+ * - Maps `pathLength`/`pathSpacing` → unitless `stroke-dasharray`
+ * - Maps `pathOffset` → unitless negative `stroke-dashoffset`
  *
  * @param {Element} element The element being animated (must be an SVG path).
  * @param {Record<string, unknown>} keyframes The input keyframes possibly containing path props.
@@ -189,46 +190,65 @@ export const transformSVGPathProperties = (element, keyframes) => {
             const n = toNum(v);
             return n ?? v;
         })();
-        const toPx = (v) => (typeof v === 'number' ? `${v}px` : String(v));
-        const buildDashArray = (len, spa) => `${toPx(len)} ${toPx(spa)}`;
-        // stroke-dasharray from pathLength/pathSpacing with default spacing = 1 - length
+        const toUnitless = (v) => (typeof v === 'number' ? `${v}` : String(v));
+        const buildDashArray = (len, spa) => `${toUnitless(len)} ${toUnitless(spa)}`;
+        // stroke-dasharray from pathLength/pathSpacing with upstream's default spacing = 1
         if (Array.isArray(length)) {
             const lenArr = length;
             const spaArr = Array.isArray(spacing)
                 ? spacing
-                : lenArr.map((lv) => typeof lv === 'number' ? 1 - lv : spacing);
+                : lenArr.map(() => (spacing !== undefined ? spacing : 1));
             const dashArray = lenArr.map((lv, i) => buildDashArray(lv, spaArr[i]));
             transformed.strokeDasharray = dashArray;
             transformed['stroke-dasharray'] = dashArray;
         }
         else if (length !== undefined) {
-            const len = length;
-            const lenNum = toNum(len) ?? 0;
-            const spa = spacing !== undefined ? spacing : 1 - lenNum;
-            const dashArray = buildDashArray(len, spa);
+            const lenNum = toNum(length);
+            const spaNum = spacing === undefined ? undefined : toNum(spacing);
+            const offsetNum = offset === undefined ? undefined : toNum(offset);
+            let dashArray;
+            let dashOffset;
+            if (lenNum !== undefined &&
+                (spacing === undefined || spaNum !== undefined) &&
+                (offset === undefined || offsetNum !== undefined)) {
+                const attrs = {};
+                buildSVGPath(attrs, lenNum, spacing === undefined ? 1 : spaNum, offsetNum, true);
+                dashArray = String(attrs['stroke-dasharray']);
+                dashOffset = String(attrs['stroke-dashoffset']);
+            }
+            else {
+                const spa = spacing !== undefined ? spacing : 1;
+                dashArray = buildDashArray(length, spa);
+            }
+            ;
             transformed.strokeDasharray = dashArray;
             transformed['stroke-dasharray'] = dashArray;
+            if (dashOffset !== undefined) {
+                ;
+                transformed.strokeDashoffset = dashOffset;
+                transformed['stroke-dashoffset'] = dashOffset;
+            }
         }
         // stroke-dashoffset from -pathOffset
         if (Array.isArray(offset)) {
             const offs = offset.map((ov) => {
                 const n = toNum(ov);
-                return n !== undefined ? `${-n}px` : String(ov);
+                return n !== undefined ? `${-n}` : String(ov);
             });
             transformed.strokeDashoffset = offs;
             transformed['stroke-dashoffset'] = offs;
         }
         else if (offset !== undefined) {
             const n = toNum(offset);
-            const off = n !== undefined ? `${-n}px` : String(offset);
+            const off = n !== undefined ? `${-n}` : String(offset);
             transformed.strokeDashoffset = off;
             transformed['stroke-dashoffset'] = off;
         }
-        else {
+        else if (!('stroke-dashoffset' in transformed)) {
             // default 0
             ;
-            transformed.strokeDashoffset = '0px';
-            transformed['stroke-dashoffset'] = '0px';
+            transformed.strokeDashoffset = '0';
+            transformed['stroke-dashoffset'] = '0';
         }
         delete transformed.pathLength;
         delete transformed.pathSpacing;
@@ -273,8 +293,8 @@ export const transformInitialSVGPathProperties = (element, initial) => {
  *
  * Behavior matches React/Framer Motion parity:
  * - Always sets pathLength="1" whenever any of path props are present
- * - stroke-dasharray = px(pathLength) + ' ' + px(pathSpacing ?? 1 - Number(pathLength))
- * - stroke-dashoffset = px(-(pathOffset ?? 0))
+ * - stroke-dasharray = pathLength + ' ' + (pathSpacing ?? 1)
+ * - stroke-dashoffset = -(pathOffset ?? 0)
  *
  * The returned object is suitable for direct DOM attribute assignment (dash-cased keys).
  *
@@ -287,19 +307,18 @@ export const computeNormalizedSVGInitialAttrs = (initial) => {
     const hasAny = 'pathLength' in initial || 'pathSpacing' in initial || 'pathOffset' in initial;
     if (!hasAny)
         return null;
-    const toPx = (v) => (typeof v === 'number' ? `${v}px` : String(v));
-    const negatePx = (v) => {
+    const toUnitless = (v) => (typeof v === 'number' ? `${v}` : String(v));
+    const negate = (v) => {
         if (typeof v === 'number')
-            return `${-v}px`;
+            return `${-v}`;
         const s = String(v);
-        return s.startsWith('-') ? s : /^[\d.]+(px)?$/i.test(s) ? `-${s}` : s;
+        return s.startsWith('-') ? s : /^[\d.]+(px)?$/i.test(s) ? `-${s.replace(/px$/i, '')}` : s;
     };
     const len = initial.pathLength ?? 0;
-    const spa = initial.pathSpacing ??
-        (typeof len === 'number' ? 1 - len : 1);
+    const spa = initial.pathSpacing ?? 1;
     const off = initial.pathOffset ?? 0;
-    const dashArray = `${toPx(len)} ${toPx(spa)}`;
-    const dashOffset = negatePx(off);
+    const dashArray = `${toUnitless(len)} ${toUnitless(spa)}`;
+    const dashOffset = negate(off);
     // logging removed
     return {
         pathLength: '1',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humanspeak/svelte-motion",
-  "version": "0.5.3",
+  "version": "0.6.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",