push changes

package.json

@@ -47,7 +47,7 @@
 		"@changesets/cli": "^2.27.10",
 		"@emotion/is-prop-valid": "^1.3.1",
 		"@sveltejs/adapter-auto": "^3.3.1",
-		"@sveltejs/kit": "^2.11.1",
+		"@sveltejs/kit": "^2.12.1",
 		"@sveltejs/package": "^2.3.7",
 		"@sveltejs/vite-plugin-svelte": "^5.0.2",
 		"@sveltejs/vite-plugin-svelte-inspector": "^4.0.1",
@@ -67,7 +67,7 @@
 		"vitest": "latest"
 	},
 	"peerDependencies": {
-		"svelte": "^5.14.0"
+		"svelte": "^5.14.1"
 	},
 	"engines": {
 		"bun": ">=1.0.0",

src/lib/components/motion/ScrollProgress.svelte

@@ -18,8 +18,6 @@
         [0, -getHeight(items) + size],
         ["calc(0% - 0px)", "calc(100% - 40px)"],
     );
-
-    const scrollHeight = useMotionValue(getHeight(items));
 </script>
 
 <!-- style={{ transform: "translateZ(0)" }} -->
@@ -32,7 +30,7 @@
         <motion.div
             style={{
                 width: "150px",
-                height: scrollHeight,
+                height: useMotionValue(getHeight(items)),
                 y: scrollY,
             }}
             drag="y"

src/lib/motion-start/animation/GroupPlaybackControls.ts → src/lib/motion-start/animation/GroupPlaybackControls.svelte.ts

@@ -3,7 +3,7 @@ based on [email protected],
 Copyright (c) 2018 Framer B.V.
 */
 
-import type { ProgressTimeline } from '../render/dom/scroll/observe';
+import type { ProgressTimeline } from '../render/dom/scroll/observe.svelte';
 import { supportsScrollTimeline } from '../render/dom/scroll/supports';
 import type { AnimationPlaybackControls } from './types';
 

src/lib/motion-start/animation/animate/index.ts → src/lib/motion-start/animation/animate/index.svelte.ts

@@ -4,9 +4,9 @@ Copyright (c) 2018 Framer B.V.
 */
 
 import type { GenericKeyframesTarget } from '../../types';
-import type { MotionValue } from '../../value';
-import { GroupPlaybackControls } from '../GroupPlaybackControls';
-import type { AnimationSequence, ObjectTarget, SequenceOptions } from '../sequence/types';
+import type { MotionValue } from '../../value/index.svelte';
+import { GroupPlaybackControls } from '../GroupPlaybackControls.svelte';
+import type { AnimationSequence, ObjectTarget, SequenceOptions } from '../sequence/types.svelte';
 import type {
 	AnimationPlaybackControls,
 	AnimationScope,
@@ -15,8 +15,8 @@ import type {
 	ElementOrSelector,
 	ValueAnimationTransition,
 } from '../types';
-import { animateSequence } from './sequence';
-import { animateSubject } from './subject';
+import { animateSequence } from './sequence.svelte';
+import { animateSubject } from './subject.svelte';
 
 function isSequence(value: unknown): value is AnimationSequence {
 	return Array.isArray(value) && Array.isArray(value[0]);

src/lib/motion-start/animation/animate/resolve-subjects.ts → src/lib/motion-start/animation/animate/resolve-subjects.svelte.ts

@@ -4,7 +4,7 @@ Copyright (c) 2018 Framer B.V.
 */
 
 import { resolveElements, type SelectorCache } from '../../render/dom/utils/resolve-element';
-import type { ObjectTarget } from '../sequence/types';
+import type { ObjectTarget } from '../sequence/types.svelte';
 import type { AnimationScope, DOMKeyframesDefinition } from '../types';
 import { isDOMKeyframes } from '../utils/is-dom-keyframes';
 

src/lib/motion-start/animation/animate/sequence.ts → src/lib/motion-start/animation/animate/sequence.svelte.ts

@@ -3,11 +3,11 @@ based on [email protected],
 Copyright (c) 2018 Framer B.V.
 */
 
-import { spring } from '../generators/spring';
-import { createAnimationsFromSequence } from '../sequence/create';
-import type { AnimationSequence, SequenceOptions } from '../sequence/types';
+import { spring } from '../generators/spring/index.svelte';
+import { createAnimationsFromSequence } from '../sequence/create.svelte';
+import type { AnimationSequence, SequenceOptions } from '../sequence/types.svelte';
 import type { AnimationPlaybackControls, AnimationScope } from '../types';
-import { animateSubject } from './subject';
+import { animateSubject } from './subject.svelte';
 
 export function animateSequence(sequence: AnimationSequence, options?: SequenceOptions, scope?: AnimationScope) {
 	const animations: AnimationPlaybackControls[] = [];

src/lib/motion-start/animation/animate/single-value.ts → src/lib/motion-start/animation/animate/single-value.svelte.ts

@@ -3,8 +3,8 @@ based on [email protected],
 Copyright (c) 2018 Framer B.V.
 */
 
-import { animateMotionValue } from '../interfaces/motion-value';
-import { motionValue as createMotionValue, type MotionValue } from '../../value';
+import { animateMotionValue } from '../interfaces/motion-value.svelte';
+import { motionValue as createMotionValue, type MotionValue } from '../../value/index.svelte';
 import { isMotionValue } from '../../value/utils/is-motion-value';
 import type { GenericKeyframesTarget } from '../../types';
 import type { AnimationPlaybackControls, ValueAnimationTransition } from '../types';

src/lib/motion-start/animation/animate/subject.ts → src/lib/motion-start/animation/animate/subject.svelte.ts

@@ -3,13 +3,13 @@ based on [email protected],
 Copyright (c) 2018 Framer B.V.
 */
 
-import { visualElementStore } from '../../render/store';
+import { visualElementStore } from '../../render/store.svelte';
 import type { GenericKeyframesTarget, TargetAndTransition } from '../../types';
 import { invariant } from '../../utils/errors';
-import type { MotionValue } from '../../value';
+import type { MotionValue } from '../../value/index.svelte';
 import { isMotionValue } from '../../value/utils/is-motion-value';
-import { animateTarget } from '../interfaces/visual-element-target';
-import type { ObjectTarget } from '../sequence/types';
+import { animateTarget } from '../interfaces/visual-element-target.svelte';
+import type { ObjectTarget } from '../sequence/types.svelte';
 import type {
 	AnimationPlaybackControls,
 	AnimationScope,
@@ -18,10 +18,10 @@ import type {
 	ElementOrSelector,
 	ValueAnimationTransition,
 } from '../types';
-import { createDOMVisualElement, createObjectVisualElement } from '../utils/create-visual-element';
+import { createDOMVisualElement, createObjectVisualElement } from '../utils/create-visual-element.svelte';
 import { isDOMKeyframes } from '../utils/is-dom-keyframes';
-import { resolveSubjects } from './resolve-subjects';
-import { animateSingleValue } from './single-value';
+import { resolveSubjects } from './resolve-subjects.svelte';
+import { animateSingleValue } from './single-value.svelte';
 
 export type AnimationSubject = Element | MotionValue<any> | any;
 

src/lib/motion-start/animation/animators/AcceleratedAnimation.svelte.ts

@@ -7,22 +7,22 @@ import { anticipate } from '../../easing/anticipate';
 import { backInOut } from '../../easing/back';
 import { circInOut } from '../../easing/circ';
 import type { EasingDefinition } from '../../easing/types';
-import { DOMKeyframesResolver } from '../../render/dom/DOMKeyframesResolver';
+import { DOMKeyframesResolver } from '../../render/dom/DOMKeyframesResolver.svelte';
 import type { ResolvedKeyframes } from '../../render/utils/KeyframesResolver.svelte';
 import { noop } from '../../utils/noop';
 import { millisecondsToSeconds, secondsToMilliseconds } from '../../utils/time-conversion';
-import type { MotionValue } from '../../value';
+import type { MotionValue } from '../../value/index.svelte';
 import { isGenerator } from '../generators/utils/is-generator';
 import type { ValueAnimationOptions, ValueAnimationOptionsWithRenderContext } from '../types';
 import { BaseAnimation, type ValueAnimationOptionsWithDefaults } from './BaseAnimation.svelte';
 import { MainThreadAnimation } from './MainThreadAnimation.svelte';
-import { acceleratedValues } from './utils/accelerated-values';
-import { startWaapiAnimation } from './waapi';
-import { isWaapiSupportedEasing } from './waapi/easing';
-import { attachTimeline } from './waapi/utils/attach-timeline';
-import { getFinalKeyframe } from './waapi/utils/get-final-keyframe';
-import { supportsLinearEasing } from './waapi/utils/supports-linear-easing';
-import { supportsWaapi } from './waapi/utils/supports-waapi';
+import { acceleratedValues } from './utils/accelerated-values.svelte';
+import { startWaapiAnimation } from './waapi/index.svelte';
+import { isWaapiSupportedEasing } from './waapi/easing.svelte';
+import { attachTimeline } from './waapi/utils/attach-timeline.svelte';
+import { getFinalKeyframe } from './waapi/utils/get-final-keyframe.svelte';
+import { supportsLinearEasing } from './waapi/utils/supports-linear-easing.svelte';
+import { supportsWaapi } from './waapi/utils/supports-waapi.svelte';
 
 /**
  * 10ms is chosen here as it strikes a balance between smooth

src/lib/motion-start/animation/animators/BaseAnimation.svelte.ts

@@ -3,7 +3,7 @@ based on [email protected],
 Copyright (c) 2018 Framer B.V.
 */
 
-import { time } from '../../frameloop/sync-time';
+import { time } from '../../frameloop/sync-time.svelte';
 import {
 	type KeyframeResolver,
 	type ResolvedKeyframes,
@@ -16,8 +16,8 @@ import type {
 	ValueAnimationOptions,
 	ValueAnimationOptionsWithRenderContext,
 } from '../types';
-import { canAnimate } from './utils/can-animate';
-import { getFinalKeyframe } from './waapi/utils/get-final-keyframe';
+import { canAnimate } from './utils/can-animate.svelte';
+import { getFinalKeyframe } from './waapi/utils/get-final-keyframe.svelte';
 
 /**
  * Maximum time allowed between an animation being created and it being

src/lib/motion-start/animation/animators/MainThreadAnimation.svelte.ts

@@ -7,21 +7,21 @@ import {
 	KeyframeResolver as DefaultKeyframeResolver,
 	type ResolvedKeyframes,
 } from '../../render/utils/KeyframesResolver.svelte';
-import { spring } from '../generators/spring/index';
-import { inertia } from '../generators/inertia';
-import { keyframes as keyframesGeneratorFactory } from '../generators/keyframes';
+import { spring } from '../generators/spring/index.svelte';
+import { inertia } from '../generators/inertia.svelte';
+import { keyframes as keyframesGeneratorFactory } from '../generators/keyframes.svelte';
 import type { ValueAnimationOptions, ValueAnimationOptionsWithRenderContext } from '../types';
 import { BaseAnimation } from './BaseAnimation.svelte';
-import type { AnimationState, KeyframeGenerator } from '../generators/types';
+import type { AnimationState, KeyframeGenerator } from '../generators/types.svelte';
 import { pipe } from '../../utils/pipe';
 import { mix } from '../../utils/mix';
-import { calcGeneratorDuration } from '../generators/utils/calc-duration';
+import { calcGeneratorDuration } from '../generators/utils/calc-duration.svelte';
 import type { DriverControls } from './drivers/types';
 import { millisecondsToSeconds, secondsToMilliseconds } from '../../utils/time-conversion';
 import { clamp } from '../../utils/clamp';
 import { invariant } from '../../utils/errors';
-import { frameloopDriver } from './drivers/driver-frameloop';
-import { getFinalKeyframe } from './waapi/utils/get-final-keyframe';
+import { frameloopDriver } from './drivers/driver-frameloop.svelte';
+import { getFinalKeyframe } from './waapi/utils/get-final-keyframe.svelte';
 import { isGenerator } from '../generators/utils/is-generator';
 
 type GeneratorFactory = (options: ValueAnimationOptions<any>) => KeyframeGenerator<any>;
@@ -67,34 +67,34 @@ export class MainThreadAnimation<T extends string | number> extends BaseAnimatio
 	 * The driver that's controlling the animation loop. Normally this is a requestAnimationFrame loop
 	 * but in tests we can pass in a synchronous loop.
 	 */
-	private driver?: DriverControls;
+	private driver?: DriverControls = $state();
 
 	/**
 	 * The time at which the animation was paused.
 	 */
-	private holdTime: number | null = null;
+	private holdTime: number | null = $state(null);
 
 	/**
 	 * The time at which the animation was cancelled.
 	 */
-	private cancelTime: number | null = null;
+	private cancelTime: number | null = $state(null);
 
 	/**
 	 * The current time of the animation.
 	 */
-	private currentTime = 0;
+	private currentTime = $state(0);
 
 	/**
 	 * Playback speed as a factor. 0 would be stopped, -1 reverse and 2 double speed.
 	 */
-	private playbackSpeed = 1;
+	private playbackSpeed = $state(1);
 
 	/**
 	 * The state of the animation to apply when the animation is resolved. This
 	 * allows calls to the public API to control the animation before it is resolved,
 	 * without us having to resolve it first.
 	 */
-	private pendingPlayState: AnimationPlayState = 'running';
+	private pendingPlayState: AnimationPlayState = $state('running');
 
 	/**
 	 * The time at which the animation was started.

src/lib/motion-start/animation/animators/drivers/driver-frameloop.ts → src/lib/motion-start/animation/animators/drivers/driver-frameloop.svelte.ts

@@ -5,7 +5,7 @@ Copyright (c) 2018 Framer B.V.
 
 import { frame, cancelFrame } from '../../../frameloop';
 import { frameData } from '../../../frameloop';
-import { time } from '../../../frameloop/sync-time';
+import { time } from '../../../frameloop/sync-time.svelte';
 import type { FrameData } from '../../../frameloop/types';
 import type { Driver } from './types';
 

src/lib/motion-start/animation/animators/waapi/NativeAnimation.ts → src/lib/motion-start/animation/animators/waapi/NativeAnimation.svelte.ts

@@ -3,9 +3,9 @@ based on [email protected],
 Copyright (c) 2018 Framer B.V.
 */
 
-import { startWaapiAnimation } from '.';
+import { startWaapiAnimation } from './index.svelte';
 import { createGeneratorEasing } from '../../../easing/utils/create-generator-easing';
-import type { ProgressTimeline } from '../../../render/dom/scroll/observe';
+import type { ProgressTimeline } from '../../../render/dom/scroll/observe.svelte';
 import { browserNumberValueTypes } from '../../../render/dom/value-types/number-browser';
 import { invariant } from '../../../utils/errors';
 import { noop } from '../../../utils/noop';
@@ -18,12 +18,12 @@ import type {
 	ValueKeyframe,
 	ValueKeyframesDefinition,
 } from '../../types';
-import { attachTimeline } from './utils/attach-timeline';
-import { getFinalKeyframe } from './utils/get-final-keyframe';
-import { setCSSVar, setStyle } from './utils/style';
-import { supportsLinearEasing } from './utils/supports-linear-easing';
-import { supportsPartialKeyframes } from './utils/supports-partial-keyframes';
-import { supportsWaapi } from './utils/supports-waapi';
+import { attachTimeline } from './utils/attach-timeline.svelte';
+import { getFinalKeyframe } from './utils/get-final-keyframe.svelte';
+import { setCSSVar, setStyle } from './utils/style.svelte';
+import { supportsLinearEasing } from './utils/supports-linear-easing.svelte';
+import { supportsPartialKeyframes } from './utils/supports-partial-keyframes.svelte';
+import { supportsWaapi } from './utils/supports-waapi.svelte';
 
 const state = new WeakMap<Element, Map<string, NativeAnimation>>();
 

src/lib/motion-start/animation/animators/waapi/animate-elements.ts → src/lib/motion-start/animation/animators/waapi/animate-elements.svelte.ts

@@ -13,8 +13,8 @@ import type {
 	DynamicAnimationOptions,
 	ElementOrSelector,
 } from '../../types';
-import { getValueTransition } from '../../utils/get-value-transition';
-import { NativeAnimation } from './NativeAnimation';
+import { getValueTransition } from '../../utils/get-value-transition.svelte';
+import { NativeAnimation } from './NativeAnimation.svelte';
 
 export function animateElements(
 	elementOrSelector: ElementOrSelector,

src/lib/motion-start/animation/animators/waapi/animate-sequence.ts → src/lib/motion-start/animation/animators/waapi/animate-sequence.svelte.ts

@@ -3,12 +3,12 @@ based on [email protected],
 Copyright (c) 2018 Framer B.V.
 */
 
-import type { MotionValue } from '../../../value';
-import { GroupPlaybackControls } from '../../GroupPlaybackControls';
-import { createAnimationsFromSequence } from '../../sequence/create';
-import type { AnimationSequence, SequenceOptions } from '../../sequence/types';
+import type { MotionValue } from '../../../value/index.svelte';
+import { GroupPlaybackControls } from '../../GroupPlaybackControls.svelte';
+import { createAnimationsFromSequence } from '../../sequence/create.svelte';
+import type { AnimationSequence, SequenceOptions } from '../../sequence/types.svelte';
 import type { AnimationPlaybackControls, ElementOrSelector } from '../../types';
-import { animateElements } from './animate-elements';
+import { animateElements } from './animate-elements.svelte';
 
 export function animateSequence(definition: AnimationSequence, options?: SequenceOptions) {
 	const animations: AnimationPlaybackControls[] = [];

src/lib/motion-start/animation/animators/waapi/animate-style.ts → src/lib/motion-start/animation/animators/waapi/animate-style.svelte.ts

@@ -3,9 +3,9 @@ based on [email protected],
 Copyright (c) 2018 Framer B.V.
 */
 
-import { GroupPlaybackControls } from '../../GroupPlaybackControls';
+import { GroupPlaybackControls } from '../../GroupPlaybackControls.svelte';
 import type { AnimationScope, DOMKeyframesDefinition, DynamicAnimationOptions, ElementOrSelector } from '../../types';
-import { animateElements } from './animate-elements';
+import { animateElements } from './animate-elements.svelte';
 
 export const createScopedWaapiAnimate = (scope?: AnimationScope) => {
 	function scopedAnimate(

src/lib/motion-start/animation/animators/waapi/easing.ts → src/lib/motion-start/animation/animators/waapi/easing.svelte.ts

@@ -5,8 +5,8 @@ Copyright (c) 2018 Framer B.V.
 
 import type { BezierDefinition, Easing } from '../../../easing/types';
 import { isBezierDefinition } from '../../../easing/utils/is-bezier-definition';
-import { generateLinearEasing } from './utils/linear';
-import { supportsLinearEasing } from './utils/supports-linear-easing';
+import { generateLinearEasing } from './utils/linear.svelte';
+import { supportsLinearEasing } from './utils/supports-linear-easing.svelte';
 
 export function isWaapiSupportedEasing(easing?: Easing | Easing[]): boolean {
 	return Boolean(

src/lib/motion-start/animation/animators/waapi/index.ts → src/lib/motion-start/animation/animators/waapi/index.svelte.ts

@@ -3,7 +3,7 @@ based on [email protected],
 Copyright (c) 2018 Framer B.V.
 */
 
-import { mapEasingToNativeEasing } from './easing';
+import { mapEasingToNativeEasing } from './easing.svelte';
 import type { NativeAnimationOptions } from './types';
 
 export function startWaapiAnimation(

src/lib/motion-start/animation/animators/waapi/utils/memo-supports.ts → src/lib/motion-start/animation/animators/waapi/utils/memo-supports.svelte.ts

@@ -4,7 +4,7 @@ Copyright (c) 2018 Framer B.V.
 */
 
 import { memo } from '../../../../utils/memo';
-import { supportsFlags } from './supports-flags';
+import { supportsFlags } from './supports-flags.svelte';
 
 export function memoSupports<T>(callback: () => T, supportsFlag: keyof typeof supportsFlags) {
 	const memoized = memo(callback);

src/lib/motion-start/animation/animators/waapi/utils/supports-linear-easing.ts → src/lib/motion-start/animation/animators/waapi/utils/supports-linear-easing.svelte.ts

@@ -3,7 +3,7 @@ based on [email protected],
 Copyright (c) 2018 Framer B.V.
 */
 
-import { memoSupports } from './memo-supports';
+import { memoSupports } from './memo-supports.svelte';
 
 export const supportsLinearEasing = /*@__PURE__*/ memoSupports(() => {
 	try {

src/lib/motion-start/animation/generators/inertia.ts → src/lib/motion-start/animation/generators/inertia.svelte.ts

@@ -3,10 +3,10 @@ based on [email protected],
 Copyright (c) 2018 Framer B.V.
 */
 
-import type { AnimationState, KeyframeGenerator } from './types';
-import { spring as createSpring } from './spring';
+import type { AnimationState, KeyframeGenerator } from './types.svelte';
+import { spring as createSpring } from './spring/index.svelte';
 import type { ValueAnimationOptions } from '../types';
-import { calcGeneratorVelocity } from './utils/velocity';
+import { calcGeneratorVelocity } from './utils/velocity.svelte';
 
 export function inertia({
 	keyframes,