Sync svelte docs (sveltejs#938)

sync svelte docs

Co-authored-by: Rich-Harris <[email protected]>

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

@@ -6,9 +6,48 @@ title: svelte/motion
 
 ```js
 // @noErrors
-import { spring, tweened } from 'svelte/motion';
+import { prefersReducedMotion, spring, tweened } from 'svelte/motion';
 ```
 
+## prefersReducedMotion
+
+<blockquote class="since note">
+
+Available since 5.7.0
+
+</blockquote>
+
+A [media query](/docs/svelte/svelte-reactivity#MediaQuery) that matches if the user [prefers reduced motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion).
+
+```svelte
+<script>
+	import { prefersReducedMotion } from 'svelte/motion';
+	import { fly } from 'svelte/transition';
+
+	let visible = $state(false);
+</script>
+
+<button onclick={() => visible = !visible}>
+	toggle
+</button>
+
+{#if visible}
+	<p transition:fly={{ y: prefersReducedMotion.current ? 0 : 200 }}>
+		flies in, unless the user prefers reduced motion
+	</p>
+{/if}
+```
+
+<div class="ts-block">
+
+```dts
+const prefersReducedMotion: MediaQuery;
+```
+
+</div>
+
+
+
 ## spring
 
 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.

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

@@ -27,14 +27,83 @@ Svelte provides reactive versions of various built-ins like `SvelteMap`, `Svelte
 ```js
 // @noErrors
 import {
+	MediaQuery,
 	SvelteDate,
 	SvelteMap,
 	SvelteSet,
 	SvelteURL,
-	SvelteURLSearchParams
+	SvelteURLSearchParams,
+	createSubscriber
 } from 'svelte/reactivity';
 ```
 
+## MediaQuery
+
+<blockquote class="since note">
+
+Available since 5.7.0
+
+</blockquote>
+
+Creates a media query and provides a `current` property that reflects whether or not it matches.
+
+Use it carefully — during server-side rendering, there is no way to know what the correct value should be, potentially causing content to change upon hydration.
+If you can use the media query in CSS to achieve the same effect, do that.
+
+```svelte
+<script>
+	import { MediaQuery } from 'svelte/reactivity';
+
+	const large = new MediaQuery('min-width: 800px');
+</script>
+
+<h1>{large.current ? 'large screen' : 'small screen'}</h1>
+```
+
+<div class="ts-block">
+
+```dts
+class MediaQuery {/*…*/}
+```
+
+<div class="ts-block-property">
+
+```dts
+constructor(query: string, matches?: boolean | undefined);
+```
+
+<div class="ts-block-property-details">
+
+<div class="ts-block-property-bullets">
+
+- `query` A media query string
+- `matches` Fallback value for the server
+
+</div>
+
+</div>
+</div>
+
+<div class="ts-block-property">
+
+```dts
+get current(): boolean;
+```
+
+<div class="ts-block-property-details"></div>
+</div>
+
+<div class="ts-block-property">
+
+```dts
+#private;
+```
+
+<div class="ts-block-property-details"></div>
+</div></div>
+
+
+
 ## SvelteDate
 
 <div class="ts-block">
@@ -193,4 +262,64 @@ class SvelteURLSearchParams extends URLSearchParams {/*…*/}
 
 
 
+## createSubscriber
+
+<blockquote class="since note">
+
+Available since 5.7.0
+
+</blockquote>
+
+Returns a `subscribe` function that, if called in an effect (including expressions in the template),
+calls its `start` callback with an `update` function. Whenever `update` is called, the effect re-runs.
+
+If `start` returns a function, it will be called when the effect is destroyed.
+
+If `subscribe` is called in multiple effects, `start` will only be called once as long as the effects
+are active, and the returned teardown function will only be called when all effects are destroyed.
+
+It's best understood with an example. Here's an implementation of [`MediaQuery`](/docs/svelte/svelte-reactivity#MediaQuery):
+
+```js
+// @errors: 7031
+import { createSubscriber } from 'svelte/reactivity';
+import { on } from 'svelte/events';
+
+export class MediaQuery {
+	#query;
+	#subscribe;
+
+	constructor(query) {
+		this.#query = window.matchMedia(`(${query})`);
+
+		this.#subscribe = createSubscriber((update) => {
+			// when the `change` event occurs, re-run any effects that read `this.current`
+			const off = on(this.#query, 'change', update);
+
+			// stop listening when all the effects are destroyed
+			return () => off();
+		});
+	}
+
+	get current() {
+		this.#subscribe();
+
+		// Return the current state of the query, whether or not we're in an effect
+		return this.#query.matches;
+	}
+}
+```
+
+<div class="ts-block">
+
+```dts
+function createSubscriber(
+	start: (update: () => void) => (() => void) | void
+): () => void;
+```
+
+</div>
+
+
+