Sync svelte docs

apps/svelte.dev/content/docs/svelte/06-runtime/01-stores.md

@@ -49,7 +49,7 @@ export const userState = $state({
 ```svelte
 <!--- file: App.svelte --->
 <script>
-	import { userState } from './state.svelte';
+	import { userState } from './state.svelte.js';
 </script>
 
 <p>User name: {userState.name}</p>

apps/svelte.dev/content/docs/svelte/06-runtime/02-context.md

@@ -22,7 +22,7 @@ export const myGlobalState = $state({
 ```svelte
 <!--- file: App.svelte --->
 <script>
-	import { myGlobalState } from './state.svelte';
+	import { myGlobalState } from './state.svelte.js';
 	// ...
 </script>
 ```

apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-motion.md

@@ -6,9 +6,259 @@ title: svelte/motion
 
 ```js
 // @noErrors
-import { prefersReducedMotion, spring, tweened } from 'svelte/motion';
+import {
+	Spring,
+	Tween,
+	prefersReducedMotion,
+	spring,
+	tweened
+} from 'svelte/motion';
 ```
 
+## Spring
+
+A wrapper for a value that behaves in a spring-like fashion. Changes to `spring.target` will cause `spring.current` to
+move towards it over time, taking account of the `spring.stiffness` and `spring.damping` parameters.
+
+```svelte
+<script>
+	import { Spring } from 'svelte/motion';
+
+	const spring = new Spring(0);
+</script>
+
+<input type="range" bind:value={spring.target} />
+<input type="range" bind:value={spring.current} disabled />
+```
+
+<div class="ts-block">
+
+```dts
+class Spring<T> {/*…*/}
+```
+
+<div class="ts-block-property">
+
+```dts
+constructor(value: T, options?: SpringOpts);
+```
+
+<div class="ts-block-property-details"></div>
+</div>
+
+<div class="ts-block-property">
+
+```dts
+static of<U>(fn: () => U, options?: SpringOpts): Spring<U>;
+```
+
+<div class="ts-block-property-details">
+
+Create a spring whose value is bound to the return value of `fn`. This must be called
+inside an effect root (for example, during component initialisation).
+
+```svelte
+<script>
+	import { Spring } from 'svelte/motion';
+
+	let { number } = $props();
+
+	const spring = Spring.of(() => number);
+</script>
+```
+
+</div>
+</div>
+
+<div class="ts-block-property">
+
+```dts
+set(value: T, options?: SpringUpdateOpts): Promise<void>;
+```
+
+<div class="ts-block-property-details">
+
+Sets `spring.target` to `value` and returns a `Promise` that resolves if and when `spring.current` catches up to it.
+
+If `options.instant` is `true`, `spring.current` immediately matches `spring.target`.
+
+If `options.preserveMomentum` is provided, the spring will continue on its current trajectory for
+the specified number of milliseconds. This is useful for things like 'fling' gestures.
+
+</div>
+</div>
+
+<div class="ts-block-property">
+
+```dts
+damping: number;
+```
+
+<div class="ts-block-property-details"></div>
+</div>
+
+<div class="ts-block-property">
+
+```dts
+precision: number;
+```
+
+<div class="ts-block-property-details"></div>
+</div>
+
+<div class="ts-block-property">
+
+```dts
+stiffness: number;
+```
+
+<div class="ts-block-property-details"></div>
+</div>
+
+<div class="ts-block-property">
+
+```dts
+target: T;
+```
+
+<div class="ts-block-property-details">
+
+The end value of the spring.
+This property only exists on the `Spring` class, not the legacy `spring` store.
+
+</div>
+</div>
+
+<div class="ts-block-property">
+
+```dts
+get current(): T;
+```
+
+<div class="ts-block-property-details">
+
+The current value of the spring.
+This property only exists on the `Spring` class, not the legacy `spring` store.
+
+</div>
+</div></div>
+
+
+
+## Tween
+
+<blockquote class="since note">
+
+Available since 5.8.0
+
+</blockquote>
+
+A wrapper for a value that tweens smoothly to its target value. Changes to `tween.target` will cause `tween.current` to
+move towards it over time, taking account of the `delay`, `duration` and `easing` options.
+
+```svelte
+<script>
+	import { Tween } from 'svelte/motion';
+
+	const tween = new Tween(0);
+</script>
+
+<input type="range" bind:value={tween.target} />
+<input type="range" bind:value={tween.current} disabled />
+```
+
+<div class="ts-block">
+
+```dts
+class Tween<T> {/*…*/}
+```
+
+<div class="ts-block-property">
+
+```dts
+static of<U>(fn: () => U, options?: TweenedOptions<U> | undefined): Tween<U>;
+```
+
+<div class="ts-block-property-details">
+
+Create a tween whose value is bound to the return value of `fn`. This must be called
+inside an effect root (for example, during component initialisation).
+
+```svelte
+<script>
+	import { Tween } from 'svelte/motion';
+
+	let { number } = $props();
+
+	const tween = Tween.of(() => number);
+</script>
+```
+
+</div>
+</div>
+
+<div class="ts-block-property">
+
+```dts
+constructor(value: T, options?: TweenedOptions<T>);
+```
+
+<div class="ts-block-property-details"></div>
+</div>
+
+<div class="ts-block-property">
+
+```dts
+set(value: T, options?: TweenedOptions<T> | undefined): Promise<void>;
+```
+
+<div class="ts-block-property-details">
+
+Sets `tween.target` to `value` and returns a `Promise` that resolves if and when `tween.current` catches up to it.
+
+If `options` are provided, they will override the tween's defaults.
+
+</div>
+</div>
+
+<div class="ts-block-property">
+
+```dts
+get current(): T;
+```
+
+<div class="ts-block-property-details"></div>
+</div>
+
+<div class="ts-block-property">
+
+```dts
+set target(v: T);
+```
+
+<div class="ts-block-property-details"></div>
+</div>
+
+<div class="ts-block-property">
+
+```dts
+get target(): T;
+```
+
+<div class="ts-block-property-details"></div>
+</div>
+
+<div class="ts-block-property">
+
+```dts
+#private;
+```
+
+<div class="ts-block-property-details"></div>
+</div></div>
+
+
+
 ## prefersReducedMotion
 
 <blockquote class="since note">
@@ -50,6 +300,12 @@ const prefersReducedMotion: MediaQuery;
 
 ## spring
 
+<blockquote class="tag deprecated note">
+
+Use [`Spring`](/docs/svelte/svelte-motion#Spring) instead
+
+</blockquote>
+
 The spring function in Svelte creates a store whose value is animated, with a motion that simulates the behavior of a spring. This means when the value changes, instead of transitioning at a steady rate, it "bounces" like a spring would, depending on the physics parameters provided. This adds a level of realism to the transitions and can enhance the user experience.
 
 <div class="ts-block">
@@ -67,6 +323,12 @@ function spring<T = any>(
 
 ## tweened
 
+<blockquote class="tag deprecated note">
+
+Use [`Tween`](/docs/svelte/svelte-motion#Tween) instead
+
+</blockquote>
+
 A tweened store in Svelte is a special type of store that provides smooth transitions between state values over time.
 
 <div class="ts-block">
@@ -93,7 +355,7 @@ interface Spring<T> extends Readable<T> {/*…*/}
 <div class="ts-block-property">
 
 ```dts
-set: (new_value: T, opts?: SpringUpdateOpts) => Promise<void>;
+set(new_value: T, opts?: SpringUpdateOpts): Promise<void>;
 ```
 
 <div class="ts-block-property-details"></div>
@@ -105,7 +367,32 @@ set: (new_value: T, opts?: SpringUpdateOpts) => Promise<void>;
 update: (fn: Updater<T>, opts?: SpringUpdateOpts) => Promise<void>;
 ```
 
-<div class="ts-block-property-details"></div>
+<div class="ts-block-property-details">
+
+<div class="ts-block-property-bullets">
+
+- <span class="tag deprecated">deprecated</span> Only exists on the legacy `spring` store, not the `Spring` class
+
+</div>
+
+</div>
+</div>
+
+<div class="ts-block-property">
+
+```dts
+subscribe(fn: (value: T) => void): Unsubscriber;
+```
+
+<div class="ts-block-property-details">
+
+<div class="ts-block-property-bullets">
+
+- <span class="tag deprecated">deprecated</span> Only exists on the legacy `spring` store, not the `Spring` class
+
+</div>
+
+</div>
 </div>
 
 <div class="ts-block-property">