@humanspeak/svelte-motion 0.0.11 → 0.0.13

package/README.md

@@ -14,70 +14,13 @@
 
 ## Why are we here?
 
-Just a little wrapper for motion. I love their work! The typical this is a WIP, if you have issues please give me a react example working so that I can work to ensure its running properly 😍
+Motion vibes, Svelte runes. This brings Motion’s declarative animation goodness to Svelte with `motion.<tag>` components, interaction props, and composable config. If you spot a cool React example, drop it in an issue—we’ll port it. 😍
+
+Requests welcome: Have a feature/prop/example you want? Please open an issue (ideally include a working Motion/React snippet or example link) and we’ll prioritize it.
 
 ## Supported Elements
 
-### Regular Elements
-
-- `motion.a`
-- `motion.article`
-- `motion.aside`
-- `motion.blockquote`
-- `motion.button`
-- `motion.code`
-- `motion.dd`
-- `motion.div`
-- `motion.dl`
-- `motion.dt`
-- `motion.fieldset`
-- `motion.figcaption`
-- `motion.figure`
-- `motion.footer`
-- `motion.form`
-- `motion.h1`
-- `motion.h2`
-- `motion.h3`
-- `motion.h4`
-- `motion.h5`
-- `motion.h6`
-- `motion.header`
-- `motion.label`
-- `motion.legend`
-- `motion.li`
-- `motion.main`
-- `motion.nav`
-- `motion.ol`
-- `motion.option`
-- `motion.p`
-- `motion.pre`
-- `motion.section`
-- `motion.select`
-- `motion.span`
-- `motion.table`
-- `motion.tbody`
-- `motion.td`
-- `motion.textarea`
-- `motion.tfoot`
-- `motion.th`
-- `motion.thead`
-- `motion.tr`
-- `motion.ul`
-
-### Void Elements
-
-- `motion.area`
-- `motion.base`
-- `motion.br`
-- `motion.col`
-- `motion.embed`
-- `motion.hr`
-- `motion.img`
-- `motion.input`
-- `motion.param`
-- `motion.source`
-- `motion.track`
-- `motion.wbr`
+All standard HTML elements are supported as motion components (e.g., `motion.div`, `motion.button`). See the full set in `src/lib/html/`.
 
 ## Configuration
 
@@ -100,6 +43,7 @@ Some Motion features are not yet implemented:
 - `features` configuration
 - Performance optimizations like `transformPagePoint`
 - Advanced transition controls
+- `layout`/`layoutId` (FLIP) — prototype planned
 
 We're actively working on adding these features. Check our GitHub issues for progress updates or to contribute.
 
@@ -117,10 +61,12 @@ This package carefully selects its dependencies to provide a robust and maintain
 
 ### Examples
 
-| Motion                                                                                                   | REPL                                                                                          |
-| -------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
-| [React - Enter Animation](https://examples.motion.dev/react/enter-animation)                             | [View Example](https://svelte.dev/playground/7f60c347729f4ea48b1a4590c9dedc02?version=5.20.2) |
-| [Random - Shiny Button](https://www.youtube.com/watch?v=jcpLprT5F0I) by [@verse\_](https://x.com/verse_) | [View Example](https://svelte.dev/playground/96f9e0bf624f4396adaf06c519147450?version=5.20.2) |
+| Motion                                                                                                   | Demo / Route                      | REPL                                                                                           |
+| -------------------------------------------------------------------------------------------------------- | --------------------------------- | ---------------------------------------------------------------------------------------------- |
+| [React - Enter Animation](https://examples.motion.dev/react/enter-animation)                             | `/tests/motion/enter-animation`   | [View Example](https://svelte.dev/playground/7f60c347729f4ea48b1a4590c9dedc02?version=5.20.2)  |
+| HTML Content (0→100 counter)                                                                             | `/tests/motion/html-content`      | [View Example](https://svelte.dev/playground/31cd72df4a3242b4b4589501a25e774f?version=5.38.10) |
+| [Random - Shiny Button](https://www.youtube.com/watch?v=jcpLprT5F0I) by [@verse\_](https://x.com/verse_) | `/tests/random/shiny-button`      | [View Example](https://svelte.dev/playground/96f9e0bf624f4396adaf06c519147450?version=5.38.10) |
+| [Fancy Like Button](https://github.com/DRlFTER/fancyLikeButton)                                          | `/tests/random/fancy-like-button` | [View Example](https://svelte.dev/playground/c34b7e53d41c48b0ab1eaf21ca120c6e?version=5.38.10) |
 
 ## License
 
@@ -128,4 +74,4 @@ MIT © [Humanspeak, Inc.](LICENSE)
 
 ## Credits
 
-Made with ♥ by [Humanspeak](https://humanspeak.com)
+Made with ❤️ by [Humanspeak](https://humanspeak.com)

package/dist/html/_MotionContainer.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
     import { getMotionConfig } from '../components/motionConfig.context.js'
-    import type { MotionProps } from '../types.js'
-    import { getCommonKeys, isNotEmpty } from '../utils/objects.js'
+    import type { MotionProps, MotionTransition } from '../types.js'
+    import { isNotEmpty } from '../utils/objects.js'
     import { sleep } from '../utils/testing.js'
-    import { animate, press } from 'motion'
+    import { animate } from 'motion'
     import { type Snippet } from 'svelte'
     import type { SvelteHTMLElements } from 'svelte/elements'
 
@@ -19,6 +19,8 @@
         initial: initialProp,
         animate: animateProp,
         transition: transitionProp,
+        onAnimationStart: onAnimationStartProp,
+        onAnimationComplete: onAnimationCompleteProp,
         style: styleProp,
         class: classProp,
         whileTap: whileTapProp,
@@ -32,75 +34,141 @@
         typeof window !== 'undefined' &&
         window.location.search.includes('@humanspeak-svelte-motion-isPlaywright=true')
 
-    $effect(() => {
-        transitionProp = {
-            ...(motionConfig?.transition ?? {}),
-            ...(transitionProp ?? {})
-        }
+    // Compute merged transition without mutating props to avoid effect write loops
+    let mergedTransition = $derived<MotionTransition>({
+        ...(motionConfig?.transition ?? {}),
+        ...(transitionProp ?? {})
     })
 
+    // Type guards for animate return types
+    function isPromiseLike(value: unknown): value is Promise<unknown> {
+        return (
+            typeof value === 'object' &&
+            value !== null &&
+            'then' in (value as { then?: unknown }) &&
+            typeof (value as { then?: unknown }).then === 'function'
+        )
+    }
+    type WithFinished = { finished?: Promise<unknown> }
+    function hasFinishedPromise(value: unknown): value is WithFinished {
+        return (
+            typeof value === 'object' &&
+            value !== null &&
+            'finished' in (value as { finished?: unknown }) &&
+            isPromiseLike((value as { finished?: unknown }).finished)
+        )
+    }
+
     const runAnimation = () => {
         if (!element || !animateProp) return
-        const transitionAmimate = {
-            ...(transitionProp ?? {})
+        const transitionAmimate: MotionTransition = mergedTransition ?? {}
+        // Fire lifecycle callbacks for main animate transitions
+        const payload = $state.snapshot(animateProp)
+        onAnimationStartProp?.(payload)
+        const controls = animate(element, payload, transitionAmimate)
+        // controls may be a promise-like or have a finished promise depending on engine
+        if (hasFinishedPromise(controls)) {
+            controls.finished?.then(() => onAnimationCompleteProp?.(payload)).catch(() => {})
+        } else if (isPromiseLike(controls as unknown)) {
+            ;(controls as unknown as Promise<unknown>)
+                .then(() => onAnimationCompleteProp?.(payload))
+                .catch(() => {})
         }
-        animate(element, animateProp, transitionAmimate)
     }
 
+    // Merge style for before/after ready so styles carry through post-anim
+    // Merge styles directly in markup; keep effect solely for readiness logic
+
+    // whileTap handling without relying on motion.press (fallback compatible)
     $effect(() => {
-        if (element && isLoaded === 'ready') {
-            if (isNotEmpty(whileTapProp)) {
-                press(element, (element: Element) => {
-                    animate(element, whileTapProp!)
-                    return () => {
-                        if (isNotEmpty(initialProp)) {
-                            const commonProps = getCommonKeys(initialProp!, whileTapProp!)
-                            const resetProps = Object.fromEntries(
-                                commonProps.map((key) => [key, initialProp![key]])
-                            )
-                            animate(element, resetProps)
-                        }
-                    }
-                })
+        if (!(element && isLoaded === 'ready' && isNotEmpty(whileTapProp))) return
+
+        const handlePointerDown = () => {
+            animate(element!, whileTapProp!)
+        }
+        const handlePointerUp = () => {
+            // Build reset record preferring animateProp values, falling back to initialProp
+            if (isNotEmpty(whileTapProp) && (isNotEmpty(initialProp) || isNotEmpty(animateProp))) {
+                const initialRecord = (initialProp ?? {}) as Record<string, unknown>
+                const animateRecord = (animateProp ?? {}) as Record<string, unknown>
+                const whileTapRecord = (whileTapProp ?? {}) as Record<string, unknown>
+
+                const keys = new Set<string>([
+                    ...Object.keys(initialRecord),
+                    ...Object.keys(animateRecord)
+                ])
+                const overlappingKeys: string[] = []
+                for (const k of keys) if (k in whileTapRecord) overlappingKeys.push(k)
+
+                const resetRecord: Record<string, unknown> = {}
+                for (const k of overlappingKeys) {
+                    resetRecord[k] = Object.prototype.hasOwnProperty.call(animateRecord, k)
+                        ? animateRecord[k]
+                        : initialRecord[k]
+                }
+                if (Object.keys(resetRecord).length > 0) {
+                    animate(
+                        element!,
+                        resetRecord as unknown as import('motion').DOMKeyframesDefinition
+                    )
+                }
             }
         }
+
+        element.addEventListener('pointerdown', handlePointerDown)
+        element.addEventListener('pointerup', handlePointerUp)
+        element.addEventListener('pointercancel', handlePointerUp)
+
+        return () => {
+            element?.removeEventListener('pointerdown', handlePointerDown)
+            element?.removeEventListener('pointerup', handlePointerUp)
+            element?.removeEventListener('pointercancel', handlePointerUp)
+        }
     })
 
+    // Re-run animate when animateProp changes while ready
     $effect(() => {
-        if (element) {
-            if (animateProp) {
-                if (isNotEmpty(initialProp)) {
-                    // Set initial state immediately
-                    isLoaded = 'initial'
-                    dataPath = 1
-                    // Give time for initial render
-                    setTimeout(async () => {
-                        await animate(element!, initialProp!)
-                        if (isPlaywright) {
-                            await sleep(250)
-                        }
-                        isLoaded = 'ready'
-                        runAnimation()
-                    }, 5)
-                } else {
-                    dataPath = 2
-                    isLoaded = 'ready'
-                    runAnimation()
-                }
-            } else if (isNotEmpty(initialProp)) {
-                dataPath = 3
+        if (element && isLoaded === 'ready' && isNotEmpty(animateProp)) {
+            runAnimation()
+        }
+    })
+
+    $effect(() => {
+        if (!(element && isLoaded === 'mounting')) return
+        if (animateProp) {
+            if (isNotEmpty(initialProp)) {
+                // Apply initial instantly BEFORE exposing 'initial' state
+                animate(element!, initialProp!, { duration: 0 })
+                // Mark initial after styles are applied so tests read CSS=0 while state=initial
                 isLoaded = 'initial'
-                setTimeout(async () => {
-                    await animate(element!, initialProp!)
+                dataPath = 1
+                // Then promote to ready and run the enter animation
+                requestAnimationFrame(async () => {
                     if (isPlaywright) {
-                        await sleep(250)
+                        await sleep(10)
                     }
                     isLoaded = 'ready'
-                }, 5)
+                    runAnimation()
+                })
             } else {
-                dataPath = 4
+                dataPath = 2
                 isLoaded = 'ready'
+                runAnimation()
             }
+        } else if (isNotEmpty(initialProp)) {
+            // Apply initial instantly BEFORE exposing 'initial' state
+            animate(element!, initialProp!, { duration: 0 })
+            dataPath = 3
+            isLoaded = 'initial'
+            requestAnimationFrame(async () => {
+                if (isPlaywright) {
+                    await sleep(10)
+                }
+                isLoaded = 'ready'
+            })
+        } else {
+            dataPath = 4
+            isLoaded = 'ready'
         }
     })
 </script>
@@ -109,11 +177,11 @@
     this={tag}
     bind:this={element}
     {...rest}
-    data-playwright={isPlaywright}
+    data-playwright={isPlaywright ? isPlaywright : undefined}
     data-is-loaded={isPlaywright ? isLoaded : undefined}
     data-path={isPlaywright ? dataPath : undefined}
-    style={isLoaded === 'ready' ? `${styleProp} ${element?.style.cssText}` : undefined}
-    class={isLoaded === 'ready' ? classProp : undefined}
+    style={styleProp}
+    class={classProp}
 >
     {#if isLoaded === 'ready'}
         {@render children?.()}

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import MotionConfig from './components/MotionConfig.svelte';
 import type { MotionComponents } from './html/index.js';
 export declare const motion: MotionComponents;
+export { animate } from 'motion';
 export type { MotionAnimate, MotionInitial, MotionTransition, MotionWhileTap } from './types.js';
 export { MotionConfig };

package/dist/index.js

@@ -2,4 +2,6 @@ import MotionConfig from './components/MotionConfig.svelte';
 import * as html from './html/index.js';
 // Create the motion object with all components
 export const motion = Object.fromEntries(Object.entries(html).map(([key, component]) => [key.toLowerCase(), component]));
+// Export all types
+export { animate } from 'motion';
 export { MotionConfig };

package/dist/types.d.ts

@@ -41,6 +41,11 @@ export type MotionTransition = AnimationOptions | undefined;
  * ```
  */
 export type MotionWhileTap = DOMKeyframesDefinition | undefined;
+/**
+ * Animation lifecycle callbacks for motion components.
+ */
+export type MotionAnimationStart = ((definition: DOMKeyframesDefinition | undefined) => void) | undefined;
+export type MotionAnimationComplete = ((definition: DOMKeyframesDefinition | undefined) => void) | undefined;
 /**
  * Base motion props shared by all motion components.
  */
@@ -53,6 +58,10 @@ export type MotionProps = {
     transition?: MotionTransition;
     /** Tap/click interaction animation */
     whileTap?: MotionWhileTap;
+    /** Called right before a main animate transition starts */
+    onAnimationStart?: MotionAnimationStart;
+    /** Called after a main animate transition completes */
+    onAnimationComplete?: MotionAnimationComplete;
     /** Inline styles */
     style?: string;
     /** CSS classes */

package/package.json

@@ -1,136 +1,138 @@
 {
-    "name": "@humanspeak/svelte-motion",
-    "version": "0.0.11",
-    "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",
-        "animation",
-        "motion",
-        "transitions",
-        "spring-physics",
-        "ui-animation",
-        "svelte5",
-        "hardware-accelerated",
-        "micro-interactions",
-        "performance"
-    ],
-    "bugs": {
-        "url": "https://github.com/humanspeak/svelte-motion/issues"
-    },
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/humanspeak/svelte-motion.git"
-    },
-    "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/humanspeak"
-    },
-    "license": "MIT",
-    "author": "Humanspeak, Inc.",
-    "sideEffects": [
-        "**/*.css"
-    ],
-    "type": "module",
-    "exports": {
-        ".": {
-            "types": "./dist/index.d.ts",
-            "svelte": "./dist/index.js"
-        }
-    },
-    "svelte": "./dist/index.js",
-    "types": "./dist/index.d.ts",
-    "files": [
-        "dist",
-        "!dist/**/*.test.*",
-        "!dist/**/*.spec.*",
-        "!dist/lib/html/*.template"
-    ],
-    "scripts": {
-        "build": "vite build && npm run package",
-        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-        "dev": "vite dev",
-        "format": "prettier --write .",
-        "generate": "tsx scripts/generate-html.ts",
-        "lint": "prettier --check . && eslint .",
-        "lint:fix": "npm run format && eslint . --fix",
-        "package": "svelte-kit sync && svelte-package && publint",
-        "prepublishOnly": "npm run package",
-        "preview": "vite preview",
-        "test": "vitest run --coverage",
-        "test:all": "npm run test && npm run test:e2e",
-        "test:e2e": "playwright test",
-        "test:e2e:debug": "playwright test --debug",
-        "test:e2e:report": "playwright show-report",
-        "test:e2e:ui": "playwright test --ui",
-        "test:only": "vitest run",
-        "test:watch": "vitest"
-    },
-    "dependencies": {
-        "motion": "^12.4.10"
-    },
-    "devDependencies": {
-        "@eslint/compat": "^1.2.7",
-        "@eslint/js": "^9.21.0",
-        "@playwright/test": "^1.50.1",
-        "@sveltejs/adapter-auto": "^4.0.0",
-        "@sveltejs/kit": "^2.17.3",
-        "@sveltejs/package": "^2.3.10",
-        "@sveltejs/vite-plugin-svelte": "^5.0.3",
-        "@tailwindcss/aspect-ratio": "^0.4.2",
-        "@tailwindcss/container-queries": "^0.1.1",
-        "@tailwindcss/forms": "^0.5.10",
-        "@tailwindcss/postcss": "^4.0.9",
-        "@tailwindcss/typography": "^0.5.16",
-        "@testing-library/jest-dom": "^6.6.3",
-        "@testing-library/svelte": "^5.2.7",
-        "@types/node": "^22.13.9",
-        "@vitest/coverage-v8": "^3.0.7",
-        "eslint": "^9.21.0",
-        "eslint-config-prettier": "^10.0.2",
-        "eslint-plugin-svelte": "^3.0.2",
-        "globals": "^16.0.0",
-        "jsdom": "^26.0.0",
-        "prettier": "^3.5.3",
-        "prettier-plugin-organize-imports": "^4.1.0",
-        "prettier-plugin-svelte": "^3.3.3",
-        "prettier-plugin-tailwindcss": "^0.6.11",
-        "publint": "^0.3.8",
-        "svelte": "^5.21.0",
-        "svelte-check": "^4.1.4",
-        "tailwind-merge": "^3.0.2",
-        "tailwind-variants": "^0.3.1",
-        "tailwindcss": "^4.0.9",
-        "tailwindcss-animate": "^1.0.7",
-        "tsx": "^4.19.3",
-        "typescript": "^5.8.2",
-        "typescript-eslint": "^8.26.0",
-        "vite": "^6.2.0",
-        "vitest": "^3.0.7"
-    },
-    "peerDependencies": {
-        "svelte": "^5.0.0"
-    },
-    "volta": {
-        "node": "22.14.0"
-    },
-    "publishConfig": {
-        "access": "public"
-    },
-    "overrides": {
-        "@sveltejs/kit": {
-            "cookie": "^0.7.0"
-        }
-    },
-    "tags": [
-        "svelte",
-        "animation",
-        "motion",
-        "transitions",
-        "spring-physics",
-        "performance",
-        "ui-animation",
-        "micro-interactions",
-        "svelte5"
-    ]
-}
+  "name": "@humanspeak/svelte-motion",
+  "version": "0.0.13",
+  "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",
+    "animation",
+    "motion",
+    "transitions",
+    "spring-physics",
+    "ui-animation",
+    "svelte5",
+    "hardware-accelerated",
+    "micro-interactions",
+    "performance"
+  ],
+  "bugs": {
+    "url": "https://github.com/humanspeak/svelte-motion/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/humanspeak/svelte-motion.git"
+  },
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/humanspeak"
+  },
+  "license": "MIT",
+  "author": "Humanspeak, Inc.",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*",
+    "!dist/lib/html/*.template"
+  ],
+  "overrides": {
+    "@sveltejs/kit": {
+      "cookie": "^0.7.0"
+    }
+  },
+  "dependencies": {
+    "motion": "^12.23.13"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^1.3.2",
+    "@eslint/js": "^9.35.0",
+    "@playwright/test": "^1.55.0",
+    "@sveltejs/adapter-auto": "^6.1.0",
+    "@sveltejs/kit": "^2.41.0",
+    "@sveltejs/package": "^2.5.2",
+    "@sveltejs/vite-plugin-svelte": "^6.2.0",
+    "@tailwindcss/aspect-ratio": "^0.4.2",
+    "@tailwindcss/container-queries": "^0.1.1",
+    "@tailwindcss/forms": "^0.5.10",
+    "@tailwindcss/postcss": "^4.1.13",
+    "@tailwindcss/typography": "^0.5.16",
+    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/svelte": "^5.2.8",
+    "@types/node": "^22.13.14",
+    "@vitest/coverage-v8": "^3.2.4",
+    "eslint": "^9.35.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-svelte": "^3.12.3",
+    "globals": "^16.4.0",
+    "husky": "^9.1.7",
+    "jsdom": "^27.0.0",
+    "prettier": "^3.6.2",
+    "prettier-plugin-organize-imports": "^4.2.0",
+    "prettier-plugin-svelte": "^3.4.0",
+    "prettier-plugin-tailwindcss": "^0.6.14",
+    "publint": "^0.3.12",
+    "svelte": "^5.38.10",
+    "svelte-check": "^4.3.1",
+    "tailwind-merge": "^3.3.1",
+    "tailwind-variants": "^3.1.1",
+    "tailwindcss": "^4.1.13",
+    "tailwindcss-animate": "^1.0.7",
+    "tsx": "^4.20.5",
+    "typescript": "^5.9.2",
+    "typescript-eslint": "^8.44.0",
+    "vite": "^7.1.5",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^3.2.4"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "volta": {
+    "node": "22.19.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "tags": [
+    "svelte",
+    "animation",
+    "motion",
+    "transitions",
+    "spring-physics",
+    "performance",
+    "ui-animation",
+    "micro-interactions",
+    "svelte5"
+  ],
+  "scripts": {
+    "build": "vite build && npm run package",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "dev": "vite dev",
+    "format": "prettier --write .",
+    "generate": "tsx scripts/generate-html.ts",
+    "husky": "husky",
+    "lint": "prettier --check . && eslint .",
+    "lint:fix": "npm run format && eslint . --fix",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "preview": "vite preview",
+    "test": "vitest run --coverage",
+    "test:all": "npm run test && npm run test:e2e",
+    "test:e2e": "playwright test",
+    "test:e2e:debug": "playwright test --debug",
+    "test:e2e:report": "playwright show-report",
+    "test:e2e:ui": "playwright test --ui",
+    "test:only": "vitest run",
+    "test:watch": "vitest"
+  }
+}

package/dist/html/_template.template

@@ -1,10 +0,0 @@
-<script lang="ts">
-    import MotionContainer from './_MotionContainer.svelte'
-    import type { HTMLElementProps } from '../types.js'
-
-    let { children, ...rest }: HTMLElementProps = $props()
-</script>
-
-<MotionContainer tag="{{tag}}" {...rest}>
-    {@render children?.()}
-</MotionContainer>

package/dist/html/_template_void.template

@@ -1,8 +0,0 @@
-<script lang="ts">
-    import MotionContainer from './_MotionContainer.svelte'
-    import type { HTMLVoidElementProps } from '../types.js'
-
-    let { ...rest }: HTMLVoidElementProps = $props()
-</script>
-
-<MotionContainer tag="{{tag}}" {...rest} />