@humanspeak/svelte-motion 0.1.10 → 0.1.12

package/dist/html/_MotionContainer.svelte

@@ -30,6 +30,7 @@
         getInitialFalseContext
     } from '../components/variantContext.context'
     import { writable } from 'svelte/store'
+    import { transformSVGPathProperties, computeNormalizedSVGInitialAttrs } from '../utils/svg'
 
     type Props = MotionProps & {
         children?: Snippet
@@ -232,8 +233,22 @@
                   'data-path': dataPath
               }
             : {}),
+        // Apply normalized SVG path attributes synchronously on first render to avoid flash
+        // Compute via svg utils (no dynamic import in SSR/derived expressions)
+        ...(() => {
+            if (!initialKeyframes) return {}
+            const attrs = computeNormalizedSVGInitialAttrs(
+                initialKeyframes as Record<string, unknown>
+            )
+            if (attrs) {
+                return attrs
+            }
+            return {}
+        })(),
         style: mergeInlineStyles(
-            styleProp,
+            initialKeyframes && 'pathLength' in initialKeyframes && isLoaded === 'mounting'
+                ? `${styleProp || ''};visibility:hidden`
+                : styleProp,
             initialKeyframes as unknown as Record<string, unknown>,
             resolvedAnimate as unknown as Record<string, unknown>
         ),
@@ -243,7 +258,20 @@
     const runAnimation = () => {
         if (!element || !resolvedAnimate) return
         const transitionAnimate: MotionTransition = mergedTransition ?? {}
-        const payload = $state.snapshot(resolvedAnimate)
+        let payload = $state.snapshot(resolvedAnimate)
+
+        // Transform SVG path properties (pathLength, pathOffset) to their CSS equivalents
+        payload = transformSVGPathProperties(
+            element,
+            payload as Record<string, unknown>
+        ) as typeof payload
+
+        // Ensure dash properties aren't pinned as inline styles
+        if (element && (element as HTMLElement).style) {
+            ;(element as HTMLElement).style.removeProperty('stroke-dasharray')
+            ;(element as HTMLElement).style.removeProperty('stroke-dashoffset')
+        }
+
         animateWithLifecycle(
             element,
             payload as unknown as DOMKeyframesDefinition,
@@ -408,12 +436,14 @@
 
     $effect(() => {
         if (!(element && isLoaded === 'mounting')) return
+
         if (effectiveAnimate) {
             // If initial={false}, render at animate state immediately with no transition
             if (effectiveInitialProp === false && resolvedAnimate) {
                 // Use Motion's animate() with duration:0 so it takes control of these properties
                 // This prevents inline styles from pinning the properties during future animations
-                const snapshot = $state.snapshot(resolvedAnimate) as Record<string, unknown>
+                let snapshot = $state.snapshot(resolvedAnimate) as Record<string, unknown>
+                snapshot = transformSVGPathProperties(element!, snapshot)
                 animate(element!, snapshot as DOMKeyframesDefinition, { duration: 0 })
                 // Mark that we've already applied this variant to avoid a second animate pass
                 mountedWithInitialFalse = true
@@ -424,16 +454,50 @@
                 isLoaded = 'ready'
             } else if (isNotEmpty(initialKeyframes)) {
                 // Apply initial instantly BEFORE exposing 'initial' state
-                animate(element!, initialKeyframes!, { duration: 0 })
+                const transformedInitial = transformSVGPathProperties(
+                    element!,
+                    initialKeyframes as Record<string, unknown>
+                )
+
+                // For SVG paths, apply initial state truly synchronously to prevent flash
+                const hasSVGProps =
+                    'strokeDasharray' in transformedInitial ||
+                    'strokeDashoffset' in transformedInitial
+                if (hasSVGProps) {
+                    // Apply presentation attributes to avoid pinning CSS properties
+                    Object.entries(transformedInitial).forEach(([key, value]) => {
+                        const v = String(Array.isArray(value) ? value[0] : value)
+                        if (key === 'strokeDasharray' || key === 'stroke-dasharray') {
+                            element!.setAttribute('stroke-dasharray', v)
+                        }
+                        if (key === 'strokeDashoffset' || key === 'stroke-dashoffset') {
+                            element!.setAttribute('stroke-dashoffset', v)
+                        }
+                    })
+                    // no-op
+                }
+                // Avoid pinning: strip stroke dash props from the animate(0) payload
+                const initialForAnimate = { ...(transformedInitial as Record<string, unknown>) }
+                delete (initialForAnimate as Record<string, unknown>).strokeDasharray
+                delete (initialForAnimate as Record<string, unknown>)['stroke-dasharray']
+                delete (initialForAnimate as Record<string, unknown>).strokeDashoffset
+                delete (initialForAnimate as Record<string, unknown>)['stroke-dashoffset']
+
+                animate(element!, initialForAnimate as DOMKeyframesDefinition, { duration: 0 })
+                // no-op
+
                 // Mark initial after styles are applied so tests read CSS=0 while state=initial
+                // This also removes visibility:hidden that was hiding SVG paths during mount
                 isLoaded = 'initial'
                 dataPath = 1
+
                 // Then promote to ready and run the enter animation
                 requestAnimationFrame(async () => {
                     if (isPlaywright) {
                         await sleep(10)
                     }
                     isLoaded = 'ready'
+
                     runAnimation()
                 })
             } else {
@@ -447,7 +511,8 @@
                     resolvedAnimate
                 ) {
                     // Apply variant styles instantly with duration:0
-                    const snapshot = $state.snapshot(resolvedAnimate) as Record<string, unknown>
+                    let snapshot = $state.snapshot(resolvedAnimate) as Record<string, unknown>
+                    snapshot = transformSVGPathProperties(element!, snapshot)
                     animate(element!, snapshot as DOMKeyframesDefinition, { duration: 0 })
                     lastRanVariantKey = currentAnimateKey
                 } else {
@@ -456,7 +521,11 @@
             }
         } else if (isNotEmpty(initialKeyframes)) {
             // Apply initial instantly BEFORE exposing 'initial' state
-            animate(element!, initialKeyframes!, { duration: 0 })
+            const transformedInitial = transformSVGPathProperties(
+                element!,
+                initialKeyframes as Record<string, unknown>
+            )
+            animate(element!, transformedInitial as DOMKeyframesDefinition, { duration: 0 })
             dataPath = 3
             isLoaded = 'initial'
             requestAnimationFrame(async () => {

package/dist/utils/focus.js

@@ -41,6 +41,7 @@ export const computeFocusBaseline = (el, opts) => {
         skewY: 0,
         opacity: 1
     };
+    const cs = getComputedStyle(el);
     for (const key of Object.keys(whileFocusRecord)) {
         if (Object.prototype.hasOwnProperty.call(animateRecord, key)) {
             baseline[key] = animateRecord[key];
@@ -52,9 +53,17 @@ export const computeFocusBaseline = (el, opts) => {
             baseline[key] = neutralTransformDefaults[key];
         }
         else {
-            const cs = getComputedStyle(el);
-            if (key in cs) {
-                baseline[key] = cs[key];
+            // Convert camelCase to kebab-case for CSS property access
+            const cssProperty = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+            const value = cs.getPropertyValue(cssProperty);
+            // Always assign a baseline entry to ensure a removal keyframe exists.
+            if (value) {
+                baseline[key] = value;
+            }
+            else {
+                // Fallback to inline style for that property, else explicit empty string
+                const inlineValue = el.style.getPropertyValue(cssProperty);
+                baseline[key] = inlineValue || '';
             }
         }
     }
@@ -89,7 +98,15 @@ export const attachWhileFocus = (el, whileFocus, mergedTransition, callbacks, ba
     };
     const handleBlur = () => {
         if (focusBaseline && Object.keys(focusBaseline).length > 0) {
-            animate(el, focusBaseline, mergedTransition);
+            const baselineForAnimation = { ...focusBaseline };
+            // For baseline entries that are empty string, proactively clear inline CSS
+            for (const [key, v] of Object.entries(baselineForAnimation)) {
+                if (v === '') {
+                    const cssProperty = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+                    el.style.removeProperty(cssProperty);
+                }
+            }
+            animate(el, baselineForAnimation, mergedTransition);
         }
         callbacks?.onEnd?.();
     };

package/dist/utils/style.js

@@ -94,6 +94,16 @@ export const mergeInlineStyles = (existingStyle, initial, animateFallback) => {
             case 'cursor':
                 setProp('cursor', value);
                 break;
+            // Skip SVG path animation properties - they'll be set by animate()
+            case 'pathLength':
+            case 'pathOffset':
+            case 'pathSpacing':
+            case 'strokeDasharray':
+            case 'stroke-dasharray':
+            case 'strokeDashoffset':
+            case 'stroke-dashoffset':
+                // Don't add these to inline styles - they interfere with animation
+                break;
             default:
                 // Fallback: write raw as-is for simple CSS props
                 if (typeof value === 'string' || typeof value === 'number') {

package/dist/utils/svg.d.ts

@@ -0,0 +1,97 @@
+/**
+ * SVG-specific properties that need special handling during animation.
+ * These properties are not standard CSS properties and need to be transformed.
+ */
+export declare const SVG_PATH_PROPERTIES: Set<string>;
+/**
+ * Check if an element is an SVG path element.
+ */
+/**
+ * Determines whether the provided element is an SVGPathElement.
+ *
+ * @param {Element} element The candidate element to test.
+ * @returns {element is SVGPathElement} True when the element is an SVG path.
+ * @example
+ * const el = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+ * if (isSVGPathElement(el)) {
+ *   // el is now typed as SVGPathElement
+ * }
+ */
+export declare const isSVGPathElement: (element: Element) => element is SVGPathElement;
+/**
+ * Check if an element is any SVG element.
+ */
+/**
+ * Determines whether the provided element is an SVGElement.
+ *
+ * @param {Element} element The candidate element to test.
+ * @returns {element is SVGElement} True when the element is an SVG element.
+ * @example
+ * const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+ * if (isSVGElement(svg)) {
+ *   // svg is now typed as SVGElement
+ * }
+ */
+export declare const isSVGElement: (element: Element) => element is SVGElement;
+/**
+ * Transform SVG path-specific animation properties to their CSS equivalents.
+ *
+ * Motion's pathLength property creates a line-drawing effect by manipulating
+ * strokeDasharray and strokeDashoffset. This function transforms:
+ * - pathLength: 0 -> 1 becomes strokeDasharray: "0 1" -> "1 1"
+ * - pathOffset: value becomes strokeDashoffset: -value (inverted for drawing direction)
+ *
+ * @param element - The SVG element being animated
+ * @param keyframes - The animation keyframes that may contain SVG properties
+ * @returns Transformed keyframes with CSS-compatible properties
+ */
+/**
+ * Transforms SVG path-specific animation properties into DOM-compatible attributes.
+ *
+ * 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)
+ *
+ * @param {Element} element The element being animated (must be an SVG path).
+ * @param {Record<string, unknown>} keyframes The input keyframes possibly containing path props.
+ * @returns {Record<string, unknown>} A transformed keyframe object safe for animation.
+ */
+export declare const transformSVGPathProperties: (element: Element, keyframes: Record<string, unknown>) => Record<string, unknown>;
+/**
+ * Check if any keyframes contain SVG path properties.
+ */
+/**
+ * Checks if any SVG path-related properties are present in the keyframes object.
+ *
+ * @param {Record<string, unknown>} keyframes The keyframes to inspect.
+ * @returns {boolean} True if any of `pathLength`, `pathSpacing`, or `pathOffset` are present.
+ */
+export declare const hasSVGPathProperties: (keyframes: Record<string, unknown>) => boolean;
+/**
+ * Transform initial SVG path properties for initial state setup.
+ * This ensures that the initial state also has the proper strokeDasharray values.
+ */
+/**
+ * Transforms initial keyframes for SVG paths so that the initial state uses
+ * normalized dash attributes.
+ *
+ * @param {Element} element The element being animated (must be an SVG path).
+ * @param {Record<string, unknown> | undefined} initial Initial keyframes, if provided.
+ * @returns {Record<string, unknown> | undefined} Transformed initial keyframes or the original value.
+ */
+export declare const transformInitialSVGPathProperties: (element: Element, initial: Record<string, unknown> | undefined) => Record<string, unknown> | undefined;
+/**
+ * Computes normalized SVG path attributes for initial render without requiring an element.
+ *
+ * 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))
+ *
+ * The returned object is suitable for direct DOM attribute assignment (dash-cased keys).
+ *
+ * @param {Record<string, unknown> | null | undefined} initial Incoming initial keyframes object
+ * @returns {Record<string, string> | null} Normalized attribute map or null if no path props
+ */
+export declare const computeNormalizedSVGInitialAttrs: (initial: Record<string, unknown> | null | undefined) => Record<string, string> | null;

package/dist/utils/svg.js

@@ -0,0 +1,226 @@
+/**
+ * SVG-specific properties that need special handling during animation.
+ * These properties are not standard CSS properties and need to be transformed.
+ */
+export const SVG_PATH_PROPERTIES = new Set(['pathLength', 'pathOffset', 'pathSpacing']);
+/**
+ * Check if an element is an SVG path element.
+ */
+/**
+ * Determines whether the provided element is an SVGPathElement.
+ *
+ * @param {Element} element The candidate element to test.
+ * @returns {element is SVGPathElement} True when the element is an SVG path.
+ * @example
+ * const el = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+ * if (isSVGPathElement(el)) {
+ *   // el is now typed as SVGPathElement
+ * }
+ */
+export const isSVGPathElement = (element) => {
+    if (typeof SVGPathElement !== 'undefined') {
+        return element instanceof SVGPathElement;
+    }
+    const nsOk = element.namespaceURI === 'http://www.w3.org/2000/svg';
+    const tagOk = element.tagName?.toLowerCase() === 'path';
+    return !!(nsOk && tagOk);
+};
+/**
+ * Check if an element is any SVG element.
+ */
+/**
+ * Determines whether the provided element is an SVGElement.
+ *
+ * @param {Element} element The candidate element to test.
+ * @returns {element is SVGElement} True when the element is an SVG element.
+ * @example
+ * const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+ * if (isSVGElement(svg)) {
+ *   // svg is now typed as SVGElement
+ * }
+ */
+export const isSVGElement = (element) => {
+    if (typeof SVGElement === 'undefined') {
+        return false;
+    }
+    return element instanceof SVGElement;
+};
+/**
+ * Transform SVG path-specific animation properties to their CSS equivalents.
+ *
+ * Motion's pathLength property creates a line-drawing effect by manipulating
+ * strokeDasharray and strokeDashoffset. This function transforms:
+ * - pathLength: 0 -> 1 becomes strokeDasharray: "0 1" -> "1 1"
+ * - pathOffset: value becomes strokeDashoffset: -value (inverted for drawing direction)
+ *
+ * @param element - The SVG element being animated
+ * @param keyframes - The animation keyframes that may contain SVG properties
+ * @returns Transformed keyframes with CSS-compatible properties
+ */
+/**
+ * Transforms SVG path-specific animation properties into DOM-compatible attributes.
+ *
+ * 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)
+ *
+ * @param {Element} element The element being animated (must be an SVG path).
+ * @param {Record<string, unknown>} keyframes The input keyframes possibly containing path props.
+ * @returns {Record<string, unknown>} A transformed keyframe object safe for animation.
+ */
+export const transformSVGPathProperties = (element, keyframes) => {
+    if (!isSVGPathElement(element)) {
+        return keyframes;
+    }
+    // logging removed
+    const transformed = { ...keyframes };
+    // let hasPathLength = false
+    // Transform normalized path props to dash attributes using pathLength="1" semantics
+    if ('pathLength' in transformed ||
+        'pathSpacing' in transformed ||
+        'pathOffset' in transformed) {
+        try {
+            element.setAttribute('pathLength', '1');
+        }
+        catch {
+            void 0;
+        }
+        const toNum = (v) => typeof v === 'number'
+            ? v
+            : v != null && /^-?\d+(\.\d+)?(px)?$/i.test(String(v).trim())
+                ? parseFloat(String(v))
+                : undefined;
+        const length = (() => {
+            const v = transformed.pathLength;
+            const n = toNum(v);
+            return n ?? v;
+        })();
+        const spacing = (() => {
+            const v = transformed.pathSpacing;
+            const n = toNum(v);
+            return n ?? v;
+        })();
+        const offset = (() => {
+            const v = transformed.pathOffset;
+            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
+        if (Array.isArray(length)) {
+            const lenArr = length;
+            const spaArr = Array.isArray(spacing)
+                ? spacing
+                : lenArr.map((lv) => typeof lv === 'number' ? 1 - lv : spacing);
+            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);
+            transformed.strokeDasharray = dashArray;
+            transformed['stroke-dasharray'] = dashArray;
+        }
+        // stroke-dashoffset from -pathOffset
+        if (Array.isArray(offset)) {
+            const offs = offset.map((ov) => {
+                const n = toNum(ov);
+                return n !== undefined ? `${-n}px` : 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);
+            transformed.strokeDashoffset = off;
+            transformed['stroke-dashoffset'] = off;
+        }
+        else {
+            // default 0
+            ;
+            transformed.strokeDashoffset = '0px';
+            transformed['stroke-dashoffset'] = '0px';
+        }
+        delete transformed.pathLength;
+        delete transformed.pathSpacing;
+        delete transformed.pathOffset;
+    }
+    // logging removed
+    return transformed;
+};
+/**
+ * Check if any keyframes contain SVG path properties.
+ */
+/**
+ * Checks if any SVG path-related properties are present in the keyframes object.
+ *
+ * @param {Record<string, unknown>} keyframes The keyframes to inspect.
+ * @returns {boolean} True if any of `pathLength`, `pathSpacing`, or `pathOffset` are present.
+ */
+export const hasSVGPathProperties = (keyframes) => {
+    return Object.keys(keyframes).some((key) => SVG_PATH_PROPERTIES.has(key));
+};
+/**
+ * Transform initial SVG path properties for initial state setup.
+ * This ensures that the initial state also has the proper strokeDasharray values.
+ */
+/**
+ * Transforms initial keyframes for SVG paths so that the initial state uses
+ * normalized dash attributes.
+ *
+ * @param {Element} element The element being animated (must be an SVG path).
+ * @param {Record<string, unknown> | undefined} initial Initial keyframes, if provided.
+ * @returns {Record<string, unknown> | undefined} Transformed initial keyframes or the original value.
+ */
+export const transformInitialSVGPathProperties = (element, initial) => {
+    if (!initial || !isSVGPathElement(element)) {
+        return initial;
+    }
+    // logging removed
+    return transformSVGPathProperties(element, initial);
+};
+/**
+ * Computes normalized SVG path attributes for initial render without requiring an element.
+ *
+ * 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))
+ *
+ * The returned object is suitable for direct DOM attribute assignment (dash-cased keys).
+ *
+ * @param {Record<string, unknown> | null | undefined} initial Incoming initial keyframes object
+ * @returns {Record<string, string> | null} Normalized attribute map or null if no path props
+ */
+export const computeNormalizedSVGInitialAttrs = (initial) => {
+    if (!initial)
+        return null;
+    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) => {
+        if (typeof v === 'number')
+            return `${-v}px`;
+        const s = String(v);
+        return s.startsWith('-') ? s : /^[\d.]+(px)?$/i.test(s) ? `-${s}` : s;
+    };
+    const len = initial.pathLength ?? 0;
+    const spa = initial.pathSpacing ??
+        (typeof len === 'number' ? 1 - len : 1);
+    const off = initial.pathOffset ?? 0;
+    const dashArray = `${toPx(len)} ${toPx(spa)}`;
+    const dashOffset = negatePx(off);
+    // logging removed
+    return {
+        pathLength: '1',
+        'stroke-dasharray': dashArray,
+        'stroke-dashoffset': dashOffset
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humanspeak/svelte-motion",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "description": "A lightweight 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.",
   "keywords": [
     "svelte",
@@ -59,9 +59,9 @@
     "@changesets/cli": "^2.29.7",
     "@eslint/compat": "^1.4.0",
     "@eslint/js": "^9.37.0",
-    "@playwright/test": "^1.55.1",
+    "@playwright/test": "^1.56.0",
     "@sveltejs/adapter-auto": "^6.1.1",
-    "@sveltejs/kit": "^2.43.8",
+    "@sveltejs/kit": "^2.46.4",
     "@sveltejs/package": "^2.5.4",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@tailwindcss/aspect-ratio": "^0.4.2",
@@ -71,7 +71,7 @@
     "@tailwindcss/typography": "^0.5.19",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/svelte": "^5.2.8",
-    "@types/node": "^24.6.2",
+    "@types/node": "^24.7.1",
     "@vitest/coverage-v8": "^3.2.4",
     "concurrently": "^9.2.1",
     "eslint": "^9.37.0",
@@ -89,9 +89,9 @@
     "prettier-plugin-sort-json": "^4.1.1",
     "prettier-plugin-svelte": "^3.4.0",
     "prettier-plugin-tailwindcss": "^0.6.14",
-    "publint": "^0.3.13",
-    "svelte": "^5.39.8",
-    "svelte-check": "^4.3.2",
+    "publint": "^0.3.14",
+    "svelte": "^5.39.11",
+    "svelte-check": "^4.3.3",
     "svg-tags": "^1.0.0",
     "tailwind-merge": "^3.3.1",
     "tailwind-variants": "^3.1.1",
@@ -99,7 +99,7 @@
     "tailwindcss-animate": "^1.0.7",
     "tsx": "^4.20.6",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.45.0",
+    "typescript-eslint": "^8.46.0",
     "vite": "^7.1.9",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.2.4"